c# - Xamarin 窗体选定的选项卡顶部边框

Question

如何为选定的选项卡项绘制顶线？

我正在使用标准的 xamarin Forms 分页布局外壳，这是在页脚选项卡式导航的上下文中。我正在为 ios、android 构建 xamarin。

标签： c#xamarin.forms

Answer 1

取决于您当前的上下文，但另一种选择是使用Xamarin 社区工具包中的TabView，该功能已经内置并且更多。

与这个问题相关的属性是TabIndicatorPlacement, TabIndicatorColor。和TabStripPlacement

<xct:TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue"
    TabStripHeight="60"
    TabIndicatorPlacement="Top"
    TabIndicatorColor="Yellow"
    TabContentBackgroundColor="Yellow">
    <xct:TabViewItem
        Icon="triangle.png"
        Text="Tab 1"
        TextColor="White"
        TextColorSelected="Yellow"
        FontSize="12">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </xct:TabViewItem>

<xct:TabViewItem
    <xct:TabViewItem
        Icon="circle.png"
        Text="Tab 2"
        TextColor="White"
        TextColorSelected="Yellow"
        FontSize="12">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </xct:TabViewItem>
</xct:TabView>

编辑

Shell没有为底部选项卡定义条形指示器（对于顶部选项卡是的），因此您更可能需要使用自定义渲染器（针对每个平台）来完成它，或者甚至自己本地构建它（在每个平台上）。