标签视图

我们可以使用 Shell 来创建选项卡。 但是，如果我们想在特定部分（例如：网格）中嵌套选项卡会发生什么？，_如果我们想完全自定义每个选项卡怎么办？_。 在这些情况下，到目前为止我们需要一个自定义渲染器......

TabView是一种显示一组选项卡及其各自内容的方法。 TabView 可用于显示多个内容，同时让用户能够自定义大部分内容。

注意： TabView 是一个跨平台视图，它会在原生选项卡达到其极限时接管，例如使用布局定位、样式和非统一样式（如凸起的按钮）。

应用程序接口

接下来是一个包含 TabView 属性、事件和视觉状态的列表。

特性

选项卡视图属性

| 物业 | 类型 | 说明 |
|------------|:-------------:|:------------:|
| TabItemsSource | IEnumerable | 用于生成 TabView 的选项卡项的集合。 |
| TabViewItemDataTemplate | 数据模板 | 选项卡视图用于生成选项卡项标题的模板。 |
| TabContentDataTemplate | 数据模板 | 选项卡视图用于生成选项卡项内容的模板。 |
| 是周期性的 | 布尔 | 启用或禁用循环标签导航。 |
| 懒惰 | 布尔 | 启用或禁用延迟选项卡加载。 |
| 精选索引 | 国际| 获取或设置当前选定的选项卡。 默认值为 0。
| TabStripPlacement | TabStripPlacement | TabStrip 位置（顶部或底部）。 |
| TabStripBackground | 刷| TabStrip 背景。 |
| TabIndicatorBrush | 刷| TabIndicator 背景。 |
| TabIndicatorHeight | 双| TabIndicator 高度。 |
| TabIndicatorWidth | 双| TabIndicator 宽度。 |
| TabIndicatorPlacement | TabIndicatorPlacement | |
| TabIndicatorView | 查看 | TabIndicator 内容。 |
| 标签内容背景 | 刷| 选项卡内容背景。 |
| 标签内容高度 | 双| 选项卡内容高度。 |
| TabStripHeight | 双| TabStrip 高度。 |
| 标签内容高度 | 双| 选项卡内容高度。 |
| HasTabStripShadow | 布尔 | 显示或隐藏 TabStrip 阴影效果。 |
| IsTabTransitionEnabled | 布尔 | 启用或禁用选项卡之间的转换。 |
| IsSwipeEnabled | 布尔 | 启用或禁用滑动手势。 |

TabViewItem 属性

| 物业 | 类型 | 说明 |
|------------|:-------------:|:------------:|
| 文字 | 字符串 | 选项卡的文本。 |
| 文字颜色 | 颜色 | 选项卡的文本颜色。 |
| 已选择的文本颜色 | 颜色 | 所选选项卡的文本颜色。 |
| 字体大小 | 字体大小 | 标签文本中使用的字体大小。 |
| 字体大小已选择 | 字体大小 | 所选选项卡中使用的字体大小。 |
| 字体家族 | 字符串 | 选项卡中使用的字体系列。 |
| FontFamilySelected | 字符串 | 所选选项卡中使用的字体系列。 |
| 字体属性 | 字体属性 | 选项卡中使用的字体属性。 |
| FontAttributesSelected | 字体属性 | 所选选项卡中使用的字体属性。 |
| 图标 | 图像源 | 选项卡的图标。 |
| 图标已选择 | 图像源 | 在所选选项卡中用作图标的 ImageSource。 |
| 内容 | 查看 | 选项卡的内容。 是View，可以使用任何东西作为内容。 |
| 徽章文本 | 布尔 | 选项卡中使用的徽章文本。 |
| 徽章文本颜色 | 颜色 | 选项卡中使用的徽章文本颜色。 |
| 徽章文本颜色已选择 | 颜色 | 所选选项卡中使用的徽章文本颜色。 |
| 徽章背景颜色 | 颜色 | 选项卡中使用的徽章颜色。 |
| 徽章背景颜色已选择 | 颜色 | 所选选项卡中使用的徽章颜色。 |
| 已选择 | 布尔 | 指示选项卡是否被选中的布尔值。 |
| 点击命令 | ICommand | 当用户点击选项卡时执行的命令。 |
| TapCommandParameter | 对象 | 点击命令参数。 |

活动

TabView 事件

| 活动 | 说明 |
|------------|:------------:|
| 选择已更改 | 选定选项卡更改时引发的事件。 |
| 滚动 | 在选项卡之间滑动时引发的事件。 |

TabViewItem 事件

| 活动 | 说明 |
|------------|:------------:|
| 标签点击 | 当用户点击选项卡时引发的事件。 |

视觉状态

视觉状态管理器 (VSM) 提供了一种结构化方式，可以通过代码对用户界面进行可视化更改。
VSM 引入了视觉状态的概念。 TabView 可以有几种不同的视觉外观，具体取决于其底层状态。

TabView 有四个特定的VisualStates ：

• 当前选项卡可视状态
• 下一个选项卡视觉状态
• 上一个选项卡视觉状态
• 默认选项卡视觉状态

场景

让我们看一些涵盖常见场景的示例。

基本标签

让我们看一个基本的例子：

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

标签项来源

使用 TabItemsSource（动态选项卡）：

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

自定义标签

每个选项卡的外观都可以自定义：

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

循环标签

您想在选项卡之间循环导航吗？

<TabView
    IsCyclical="True">
    ...
</TabView>

延迟加载

延迟标签加载：

<TabView
    IsLazy="True">
    ...
</TabView>

Tab 转换和 TabViewItem 动画

可以使用 Xamarin.Forms 动画来自定义每个选项卡之间的转换，在出现或消失时为选项卡设置动画，甚至在出现或消失时为徽章设置动画。

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

使用视觉状态

可以使用不同的视觉状态来自定义当前选项卡、下一个选项卡等。

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabViewStates">
            <VisualState x:Name="CurrentTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PreviousTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NextTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="DefaultTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.9" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label Text="{Binding Index}" HorizontalOptions="Center" VerticalOptions="End" />
</Grid>

使用 C 创建标签

可以使用 XAML 或 C# 在 Xamarin.Forms 中创建 UI。 让我们看看如何使用 C# 创建选项卡。

var tabView = new Tabs
{
    TabStripPlacement = TabStripPlacement.Bottom,
    TabStripBackgroundColor = Color.Blue,
    TabStripHeight = 60,
    TabIndicatorColor = Color.Yellow,
    TabContentBackgroundColor = Color.Yellow
};

var tabViewItem1 = new TabViewItem
{
    Icon = "triangle.png",
    Text = "Tab 1",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow,
};

var tabViewItem1Content = new Grid
{
    BackgroundColor = Color.Gray
};

var label1 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent1"
};

tabViewItem1Content.Children.Add(label1);

tabViewItem1.Content = tabViewItem1Content;

tabView.TabItems.Add(tabViewItem1);

var tabViewItem2 = new TabViewItem
{
    Icon = "circle.png",
    Text = "Tab 2",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow
};

var tabViewItem2Content = new Grid
{
    BackgroundColor = Color.OrangeRed
};

var label2 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent2"
};

tabViewItem2Content.Children.Add(label2);

tabViewItem2.Content = tabViewItem2Content;

tabView.TabItems.Add(tabViewItem2);

使用样式

可以使用XAML样式或CSS自定义选项卡内容、选项卡条、选项卡项等的外观。

使用 XAML：

<Style
    x:Key="TabItemStyle"
    TargetType="TabViewItem">
    <Setter
        Property="FontSize"
        Value="12" />
    <Setter
        Property="TextColor"
        Value="#979797" />
</Style>

使用 CSS：

.customTabItem {
    font-size: medium;
    text-color: red;
}

难度：中等

更多信息

基于https://github.com/xamarin/Xamarin.Forms/issues/10773