CODEWITHSUNDEEP
xamarin.forms
Annu
Annu

Reputation: 479

How to load a content page(xaml) to another page(xaml) in xamarin.Forms , but keep the header and footer same (like tab in Xamarin.Android)

I wish to create a custom tabbed page in Xamarin.Forms where both the Header and Footer remain the same. With the center section containing the content.

The Header is generally a text heading. Only the centre portion of the screen keeps changing according to tab selection.

The Footer contain the different tabs. It's also not like a usual tabbed page. It's more like a Button that changes color when selected and that has a definite gap between them.

Here's an example image

Expected

Upvotes: 1

Views: 1600

Answers (1)

Lukas Bergman
Lukas Bergman

Reputation: 48

You can create ContentViews by right-clicking the project, pressing 'add' and then add a ContentView.

You can then use a grid and create different rows and reference the ContentViews on one row and the header and footer on two other rows.

Reference the ContentViews like this in the top of the Xaml.

xmlns:Views="clr-namespace:SharedTestProject.ContentViews"

Then define the rest of the Xaml like this. All you have to do after that is to implement the logic to change which view is visible.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="55"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid x:Name="NavigationButtons" HeightRequest="55" Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="140"/>
            <ColumnDefinition Width="140"/>
            <ColumnDefinition Width="140"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" HeightRequest="50" WidthRequest="140" VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand">
            <Button x:Name="BtnView1" Clicked="BtnView1_Clicked" Text="View1"/>
        </Grid>
        <Grid Grid.Column="1" HeightRequest="50" WidthRequest="140" VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand">
            <Button x:Name="BtnView2" Clicked="BtnView2_Clicked" Text="View2"/>
        </Grid>
        <Grid Grid.Column="2" HeightRequest="50" WidthRequest="140" VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand">
            <Button x:Name="BtnView3" Clicked="BtnView3_Clicked" Text="View3"/>
        </Grid>
    </Grid>

    <Grid x:Name="ContentViews" Grid.Row="1">
        <ContentViews:View1 x:Name="View1" IsVisible="True"/>
        <ContentViews:View2 x:Name="View2" IsVisible="False"/>
        <ContentViews:View3 x:Name="View3" IsVisible="False"/>
    </Grid>
</Grid>

Upvotes: 1

Related Questions