xamarin.forms - Change the ContentPage's content with customize titleview

Question

I make a customize title in the titleview, and I want to show different content(with other pages) by pressing the tabs I customize.(like pic shows below) I am wondering how to change the content with different pages...

    <ContentPage>
    <NavigationPage.TitleView>
    <Button x:Name="energy" />
    <Button x:Name="history" />
    ...
    </NavigationPage.TitleView>

    <ContentPage.Content>
//when I press energy, and content shows the Energy.xaml
//when I press history, and content shows the History.xaml
    </ContentPage.Content>
    </ContentPage>

question from:https://stackoverflow.com/questions/65868775/change-the-contentpages-content-with-customize-titleview

Answer 1

You can use TabView from XamarinCommunityToolkit package, here is a sample page you can find it in their sample repo.

<ContentPage  xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
...
>
  <ContentPage.Content>
        <Grid>
            <xct:TabView
                TabStripBackgroundColor="Blue"
                TabStripHeight="40"
                TabIndicatorColor="Yellow"
                TabContentBackgroundColor="Yellow">
                <xct:TabViewItem
                    Text="Tab 1"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
 <--Here you define the content of Tab1 -->
                </xct:TabViewItem>
                <xct:TabViewItem
                    Text="Tab 2"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
 <--Here you define the content of Tab2 : it can be the ContentView defined in your Energy.xaml -->
                </xct:TabViewItem>
            </xct:TabView>
        </Grid>
  <ContentPage.Content>
</ContentPage>

There is plenty of stuff you can customize take a look at the official documentation.