时间戳

首页 > 解决方案 > Xamarin Forms / Crossplatform - 具有仅影响部分屏幕的选项卡式布局

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

问题描述

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

包含“OVfreqie / 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>

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

标签： xamlxamarinxamarin.formscross-platformtabbedpage

解决方案

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

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

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

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

推荐阅读