Xamarin Forms / Crossplatform - 具有仅影响部分屏幕的选项卡式布局答案

【问题标题】：Xamarin Forms / Crossplatform - Having a tabbed layout only affecting part of screenXamarin Forms / Crossplatform - 具有仅影响部分屏幕的选项卡式布局
【发布时间】：2019-08-09 03:43:30
【问题描述】：

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

包含“OVFrequentie / huidig voertuig”（网格层 0）和“originele freq / nieuwe freq”（网格层 1）的两个条已在程序中。 “标签 1 / 标签 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 布局应该去的地方。如何将此布局样式添加到该特定区域？如果可能，请提供一些解释或包含更高级代码的来源。

【问题讨论】：

在这种情况下您不能使用 TabbedPage。您将需要使用像 SegmentControl 和多个具有切换可见性的 ContentViews 之类的东西来构建自己的
哎呀。你知道在不创建自定义视图控制器（不使用网格等）的情况下创建类似效果的任何其他方法吗？或者这是唯一的选择。
这个不难做，不是自定义视图，XAML里都可以做

标签： xaml xamarin xamarin.forms cross-platform tabbedpage

【解决方案1】：

将ContentView 添加到您的主页，并将其内容替换为您点击时的标签视图。

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

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

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

【讨论】：