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添加到每个Label（或根据需要使用Buttons和样式）。

下面是使用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
        }
    }

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

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

1 个答案: