Xamarin Forms / Crossplatform - 选项卡式布局仅影响屏幕的一部分

Question

我对 XAML 或一般的移动开发还很陌生。我正在构建一个包含选项卡式页面界面的界面，但不是针对整个屏幕。它目前存在于具有 3 层的网格布局之外。下面的图片部分经过 Photoshop 处理以了解整体图片，然后是类似线框的 scetch。

包含"OV Frequentie / huidig voertuig"（网格层0）和"originele freq / nieuwe freq"（网格层1）的两个条已经在程序中了。 "tab 1 / tab 2" 及其下方包含的页面尚未包含在程序中，并且已被 Photoshop 处理过。这就是标签式布局应该出现的地方。

https://imgur.com/nDBcyH2

下图是最终产品需要的草图。

https://imgur.com/zy4snlQ

当前（可能不是很干净）XAML代码：

<?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>

在上面代码的底部是一个带有第二层网格的小部分（在下方）。这是 tabbedPage 布局应该去的地方。如何将此布局样式添加到该特定区域？如果可能，请提供一些解释或更高级代码的来源。

Answer 1

将 ContentView 添加到您的主页，并在单击时将其内容替换为您的选项卡视图。

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

然后在 cs 中单击时根据需要更改其内容：

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

Xamarin Forms / Crossplatform - 选项卡式布局仅影响屏幕的一部分

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

xaml

cross-platform

xamarin

xamarin.forms

tabbedpage