Segmented control #2335
manfromarce
started this conversation in
New Feature Discussions
Replies: 1 comment 1 reply
-
Here's a mockup of how you may achieve a SegementedControl with a CollectionView: <CollectionView x:Name="segmentedControl" HorizontalOptions="Fill" SelectionMode="Single" VerticalOptions="Start">
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Alpha</x:String>
<x:String>Beta</x:String>
<x:String>Gamma</x:String>
<x:String>Delta</x:String>
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="4" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Frame>
<Label HorizontalOptions="Center" Text="{Binding .}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="LightBlue" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView> |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
It would be nice to have a segmented control to quickly select an option or switch views. A native equivalent should be available in all platforms.
Material: https://m3.material.io/components/segmented-buttons/overview
Apple: https://developer.apple.com/design/human-interface-guidelines/segmented-controls
WinUI Community Toolkit: https://github.com/CommunityToolkit/Windows/tree/main/components/Segmented/src
There are also third-party implementations for MAUI.
Beta Was this translation helpful? Give feedback.
All reactions