Xamarin 窗体选定选项卡顶部边框 [英] Xamarin forms selected tab top border

问题描述

如何为所选标签项画一条顶线?

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

解决方案

取决于您当前的上下文，但替代方案可能是使用

编辑

Shell 没有为底部选项卡定义条带指示器(对于顶部选项卡是)，因此您更有可能需要使用自定义渲染器(针对每个平台)或什至自己构建它原生(在每个平台上).

How can I draw a top line for the selected tab item ?

I'm using the standard xamarin Forms pagged layout shell and this is in context of the footer tabbed navigation. I'm building with xamarin for both ios,android.

解决方案

Depends on what is your current context but an alternative could be to to use TabView from Xamarin community toolkit package, where this capability is already built-in and a lot more.

properties relevant to this question are TabIndicatorPlacement, TabIndicatorColor. and 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>

Edit

Shell is not defining a strip indicator for bottom tabs (for top tabs yes), so you are more probably needs to do it with a custom renderer (for each platform) or even build it yourself natively (on each platform).

这篇关于Xamarin 窗体选定选项卡顶部边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！