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

Question

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

这就是我想要在段控件中显示选项卡的方式。我可以更改色调颜色、背景颜色和文本颜色，但其中 none 将使我获得此样式的选项卡。 这是我现在的UI

这是我实现段控制的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 that can act as the underline (very short height). Then just add TapGestureRecognizers标签（或根据需要使用按钮和样式）。

这是一个使用按钮和 BoxView 的示例：

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
        }
    }

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

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

How to change the style of tab in segment control in xamarin forms

tabs

uisegmentedcontrol

xamarin

xamarin.forms