Xamarin Forms / Crossplatform - Having a tabbed layout only affecting part of screen

Question

I'm quite new to XAML or mobile development in general. I'm building an interface containing a tabbed page interface, but not for the entire screen. It currently exists out of a grid layout with 3 layers. The image below is partly photoshopped to get an idea of the total picture, followed by a wireframed-like scetch.

The two bars containing "OV Frequentie / huidig voertuig" (grid layer 0) and "originele freq / nieuwe freq" (grid layer 1) are already in the program. The "tab 1 / tab 2" with the page included below it are not yet in the program, and photoshopped in. This is where the tabbed layout is supposed to come.

https://i.sstatic.net/V34qr.jpg

The image below is a quick sketch of what the end product needs to be.

https://i.sstatic.net/8CVDZ.jpg

Current (possibly not very clean) XAML code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Se7FrequencyProject"
x:Class="Se7FrequencyProject.MainPage">

<ContentPage.Resources>
    <StyleSheet Source="Styles/MainStyleSheet.css"/>
    <!-- creatinng reusable style for boxview divider. -->
    <!-- (equivalent to setting properties for a class). -->
    <Style x:Key="ContentDivider" TargetType="BoxView">
        <Setter Property="HeightRequest" Value="2"/>
        <Setter Property="WidthRequest" Value="1000"/>
        <Setter Property="Margin" Value="3, 0"/>
    </Style>
</ContentPage.Resources>


<Grid RowSpacing="0">
    <Grid.RowDefinitions>
        <!-- first row from top {0} - app name, vessel. -->
        <RowDefinition Height="Auto"/>

        <!-- second row {1} - originele freq // nieuwe frequentie. -->
        <RowDefinition Height="Auto"/>

        <!-- third row {2} - tablayout. -->
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- header contents -->
    <Grid Grid.Row="0" StyleClass="headerBar">

        <StackLayout Grid.Column="0" HorizontalOptions="Start" StyleClass="inGrid">

            <BoxView BackgroundColor="#2d313a" Style="{StaticResource ContentDivider}" Margin="0"/>

            <Label StyleClass="header"
                Text="OV Frequentie"/>
            <Label StyleClass="headerSub"
                Text="huidig voertuig:"/>

            <BoxView BackgroundColor="#2d313a" Style="{StaticResource ContentDivider}"/>
        </StackLayout>

    </Grid>

    <!-- freq bar contents -->
    <Grid Grid.Row="1" StyleClass="subHeaderBar">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <BoxView Grid.ColumnSpan="2"
                 BackgroundColor="#2d313a"
                 WidthRequest="2"
                 HeightRequest="2"
                 Margin="3,0,3,-3"/>


        <StackLayout Grid.Column="0" HorizontalOptions="Start" StyleClass="inGrid">
            <Label StyleClass="generalSmallText"
                Text="originele freq:">

            </Label>
        </StackLayout>

        <StackLayout Grid.Column="1" HorizontalOptions="End" StyleClass="inGrid">
            <Label StyleClass="generalSmallText"
                Text="nieuwe freq:"/>
        </StackLayout>


    </Grid>

    <!-- tabbed page core XAML -->
    <Grid Grid.Row="2">

    </Grid>

</Grid>

In the bottom of the code above is a small section with the second layer of the grid (below <!-- tabbed page core XAML -->). This is where tabbedPage layout is supposed to go. How do I add this layout style to that specific area? Please provide some explanation or a source with the more advanced pieces of code if possible.

Answer 1

Add a ContentView to your Page and replace its content with whatever your tab view is when clicked.

<ContentView x:Name="_contentView">
</ContentView>

Then in cs when clicked change its content as needed:

 if (_contentView.Content != _tabView1)
 {
     _contentView.SetContent(_tabView1);
 }