Как изменить стиль вкладки в сегментном контроле в формах xamarin

Question

У меня есть сегмент управления, где я отображаю вкладки.Но я не могу редактировать стиль вкладки в формах Xamarin. Это интерфейс, который я хочу

Именно так я хочу отображать свои вкладки в элементе управления сегментом.Я могу изменить цвет оттенка, цвет фона и цвет текста, но ничего из этого не даст мне вкладку в этом стиле. Это мой текущий пользовательский интерфейс

Это код 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>

Я не использую никакого пользовательского рендерера для этого элемента управленияНужно ли использовать пользовательский рендер для реализации необходимого интерфейса?Если да, то как?Есть предложения?

Answer 1

SegmentedControl не является встроенным элементом управления Xamarin.Forms.Есть несколько библиотек, которые предлагают SegmentedControl, поэтому было бы полезно узнать, какую из них вы используете.

Тем не менее, автор библиотеки, который создал SegmentedControl, также сделал рендереры платформы, поэтому результатом этого является разный взгляд на iOS и Android.

Конечно, вы можете создать свой собственный рендер, но зачем тогда использовать библиотеку?

Мне было бы проще создать элемент управления с помощью форм Xamarin, например, вы можете использовать сетку, которая имеет первый ряд из двух меток (или кнопок) и второй ряд из 2 BoxViews это может служить подчеркиванием (очень короткая высота).Затем просто добавьте TapGestureRecognizer к каждой метке (или просто используйте кнопки и стиль по мере необходимости).

Вот пример использования кнопок и представлений 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
        }
    }

Нет библиотеки или пользовательского средства визуализации.