Segmented control Xamarin Forms customisation

Question

I would like to create the segmented control in the image below. What i currently have or attempted using is the library in the following link : https://github.com/1iveowl/Plugin.SegmentedControl

How ever as you can see the final result ends up being a horizontal segmented UI, which is what I do not want.

I have checked the documentation of the plugin to see if there is a way of changing the orientation and it seems that is the current limitation of the plugin

  <control:SegmentedControl
        x:Name="SegmentedGenderControl" 
        TintColor="#F2EBF9"
        SelectedTextColor="#6F1AC1"
        TextColor="Black"
        DisabledColor="White"
        BorderColor="#6F1AC1"
        BorderWidth="1.0"
        FontSize="Medium"                
        Margin="8,8,8,8">
    
            <control:SegmentedControl.Children  >
                <control:SegmentedControlOption Text="Male"/>
                <control:SegmentedControlOption Text="Female"/>  
                <control:SegmentedControlOption Text="Female"/>
            </control:SegmentedControl.Children>
        </control:SegmentedControl>

The second alternative that I have thought about is using a grid with 3 rows :

  <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

</Grid>

And then manually handle the selection based on the selection. Is there a simpler or plugin that is available to the public that is not the one above that I can use ?

the control seems suitably documented to me - it seems more likely that it just doesn't support the feature you want. If the source license allows it you can just modify the source to do what you want and submit a PR — Jason

George George · Accepted Answer · 2020-12-13T22:22:48

So I finally managed to solve this problem as suggested by an external party through the use of a collection view

See the code that follows :

        <CollectionView
            HeightRequest="250"
            x:Name="OptionsCollectionView"
            ItemsSource="{Binding SelectionOptions}"
            VerticalOptions="Start"
            SelectionMode="Single">

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <yummy:PancakeView
                        x:Name="optionPancake"
                        Padding="20">
                        <yummy:PancakeView.Border>
                            <yummy:Border
                                Color="{StaticResource CollectionViewBorderColor}"
                                Thickness="2" />
                        </yummy:PancakeView.Border>
                        <StackLayout
                        Orientation="Horizontal">

                            <Label
                                x:Name="optionLabel"
                                Text="{Binding Option}"
                                FontSize="15"
                                FontFamily="EuclidCircularASemibold"
                                TextColor="{StaticResource SubHeadingColor}"
                                FontAttributes="Bold" />

                        </StackLayout>
                    </yummy:PancakeView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

The code that follows is for styling the visual state group, when an item is selected:

    <Style TargetType="yummy:PancakeView">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState Name="Normal"/>
                    <VisualState Name="Selected">
                        <VisualState.Setters>

                            <Setter
                                Property="BackgroundColor"
                                Value="{StaticResource FrameSelectedColor}"/>

                            <Setter                                        
                                Property="yummy:PancakeView.Border"
                                Value="{yummy:BorderMarkup  Color={StaticResource SelectedLabelColor}, Thickness='2'}"/>

                            <Setter TargetName="optionLabel"
                                    Property="Label.TextColor"
                                    Value="{StaticResource SelectedLabelColor}"/>

                            <Setter Property="CornerRadius"
                                    Value="5"/>

                        </VisualState.Setters>
                    </VisualState>


                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

Segmented control Xamarin Forms customisation

1 Answers