如何在 xamarin 表单中更改段控件中的选项卡样式

Question

我有一个显示选项卡的分段控件。但我无法在 Xamarin Forms 中编辑选项卡的样式。 这就是我想要的用户界面

这就是我想要在段控件中显示我的选项卡的方式。我能够更改色调颜色、背景颜色和文本颜色，但这些都不会让我获得这种风格的标签。 这是我当前的用户界面

这是我实现段控制的 XAML 代码

<controls:SegmentedControl  BackgroundColor="White" SelectedTextColor="Black" TintColor="#FFA500" x:Name="SegControl" ValueChanged="Handle_ValueChanged">
                <controls:SegmentedControl.Children>
                    <controls:SegmentedControlOption  Text="VENDOR NAME" />
                    <controls:SegmentedControlOption Text="PRODUCT/SERVICE" />
                </controls:SegmentedControl.Children>
            </controls:SegmentedControl>
            <StackLayout x:Name="SegContent" />
        </StackLayout>
        <StackLayout Margin="0,30,0,0">
            <StackLayout AbsoluteLayout.LayoutBounds=".20,1,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" Orientation="Horizontal">

                <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckNear">

                    <Image Margin="0,10,0,10" x:Name="imgNear" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                    <Label Text="Near" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
                </StackLayout>
                <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckSearch">
                    <Image Margin="0,10,0,10" x:Name="imgSearch" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                    <Label Text="Search" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
                </StackLayout>
                <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckCart">
                    <Image Margin="0,10,0,10" x:Name="imgCart" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                    <Label Text="Cart" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
                </StackLayout>
                <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAccount">
                    <Image Margin="0,10,0,10" x:Name="imgAccount" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                    <Label Text="Account" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
                </StackLayout>
            </StackLayout>

我没有为此段控件使用任何自定义渲染器。我是否必须使用自定义渲染器来实现所需的 UI？如果是怎么办？有什么建议吗？

Answer 1

SegmentedControl 不是内置的 Xamarin.Forms 控件。有一些库提供 SegmentedControl，因此了解您使用的是哪一个会有所帮助。

也就是说，创建 SegmentedControl 的库作者也制作了平台渲染器，因此 iOS 与 Android 上的不同外观是其结果。

当然，您可以创建自己的自定义渲染器，但是为什么要使用该库呢？

对我来说更容易的是使用 Xamarin Forms 制作控件，例如，您可以使用第一行两个标签（或按钮）和第二行 2 BoxViews 的网格，可以充当下划线（非常短的高度）。然后只需将TapGestureRecognizers 添加到每个标签（或根据需要使用按钮和样式）。

这是一个使用 Buttons 和 BoxViews 的示例：

XAML：

    <Grid Padding="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button x:Name="vBtn"
                Text="VENDOR NAME" Clicked="Handle_Clicked"
                TextColor="Black"
                BackgroundColor="Transparent"
                BorderColor="Transparent"
                Grid.Row="0"
                Grid.Column="0"/>
        <Button x:Name="pBtn"
                Text="PRODUCT/SERVICE" Clicked="Handle_Clicked"
                TextColor="Black"
                BackgroundColor="Transparent"
                BorderColor="Transparent"
                Grid.Row="0"
                Grid.Column="1" />
        <BoxView x:Name="vBox"
                 Color="#FFA500" HeightRequest="5"
                 Grid.Row="1"
                 Grid.Column="0"/>
        <BoxView x:Name="pBox"
                 Color="Silver" HeightRequest="5" 
                 Grid.Row="1"
                 Grid.Column="1"/>
    </Grid> 

后面的代码：

    void Handle_Clicked(object sender, System.EventArgs e)
    {
        Button btn = sender as Button;
        if (btn.Text == "PRODUCT/SERVICE")
        {
            vBox.Color = Color.Silver;
            pBox.Color = Color.FromHex("#FFA500");
            // Do anything else you need to do when the PRODUCT/SERVICE is tapped
        }
        else
        {
            vBox.Color = Color.FromHex("#FFA500");
            pBox.Color = Color.Silver;
            // Do anything else you need to do when the VENDOR NAME is tapped
        }
    }

不需要库或自定义渲染器。