Selection in WinUI Segmented Control

20 Dec 202120 minutes to read

This section explains about features that aid in the selection of items, customization of the selected item, and its related operations in the Segmented Control.

Selected index

The Segmented Control allows you to select the segment item based on data source index using the SelectedIndex property.

XAML

<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors" 
    mc:Ignorable="d">
    <Grid>
        <Grid.DataContext>
            <local:SegmentedViewModel/>
        </Grid.DataContext>
        <syncfusion:SfSegmentedControl x:Name="segmentWithSelectedIndex"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    SelectedIndex="2"
                                    DisplayMemberPath="Name"
                                    ItemsSource="{Binding Days}">
            </syncfusion:SfSegmentedControl>
    </Grid>
</Window>

Selected item customization

The Segmented Control allows you to customize the appearance of selected item using the SelectedSegmentStyle property. You need to provide the style with target type SelectedSegmentBorder.

XAML

<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors" 
    mc:Ignorable="d">
    <Grid>
        <Grid.DataContext>
            <local:SegmentedViewModel/>
        </Grid.DataContext>
         <Grid.Resources>
            <Style TargetType="syncfusion:SelectedSegmentBorder" x:Key="selectedItemStyle">
               <Setter Property="Background" Value="Olive"/>
            </Style>
        </Grid.Resources>
        <syncfusion:SfSegmentedControl x:Name="segmentedControl"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    SelectedIndex="2" 
                                    SelectedSegmentStyle="{StaticResource selectedItemStyle}"
                                    DisplayMemberPath="Name"
                                    ItemsSource="{Binding Days}">
        </syncfusion:SfSegmentedControl>
    </Grid>
</Window>

NOTE

Users cannot change the selected item foreground using SelectedSegmentStyle.

Shadow effect

By setting the HasShadow property value to true in the SelectedSegmentBorder style and assign that style to SelectedSegmentStyle property in the Segmented control to enable a shadow effect for a selected segment item. Also, you can customize the appearance of the shadow effect using the ShadowColor property.

XAML

<Window
    x:Class="Shadow_effect.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Shadow_effect"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors"
    mc:Ignorable="d">
    <Grid>
        <Grid.DataContext>
            <local:SegmentedViewModel/>
        </Grid.DataContext>
        <Grid.Resources>
            <ResourceDictionary>
                <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Light">
                        <SolidColorBrush x:Key="SelectedBackground" Color="#00b7c0"/>
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="Dark">
                        <SolidColorBrush x:Key="SelectedBackground" Color="#00b7c0"/>
                    </ResourceDictionary>
                </ResourceDictionary.ThemeDictionaries>
                <Style TargetType="syncfusion:SelectedSegmentBorder" x:Key="shirtModelStyle">
                    <Setter Property="CornerRadius" Value="4"/>
                    <Setter Property="HasShadow" Value="True"/>
                    <Setter Property="ShadowColor" Value="#00b7c0"/>
                    <Setter Property="Background" Value="{ThemeResource SelectedBackground}"/>
                </Style>
            </ResourceDictionary>
        </Grid.Resources>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <syncfusion:SfSegmentedControl x:Name="segmentWithShadow"
                                    Height="40"   
                                    SelectedIndex="1"
                                    CornerRadius="4"
                                    BorderThickness="2"
                                    ItemBorderThickness="0"
                                    DisplayMemberPath="Name"        
                                    SelectedSegmentStyle="{StaticResource shirtModelStyle}"
                                    ItemsSource="{Binding ShirtModels}">
                <syncfusion:SfSegmentedControl.Resources>
                    <ResourceDictionary>
                        <ResourceDictionary.ThemeDictionaries>
                            <ResourceDictionary x:Key="Light">
                                <SolidColorBrush x:Key="SyncfusionSegmentedControlBackground" Color="#F2F2F2"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemBackground" Color="#F2F2F2"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedBackground" Color="#00b7c0"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverBackground" Color="#5bdae4"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverBackground" Color="#00b7c0"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemForeground" Color="Black"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverForeground" Color="White"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverForeground" Color="White"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedForeground" Color="White"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedControlBorderBrush" Color="#D9D9D9"/>
                            </ResourceDictionary>
                            <ResourceDictionary x:Key="Dark">
                                <SolidColorBrush x:Key="SyncfusionSegmentedControlBackground" Color="#414141"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemBackground" Color="#414141"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedBackground" Color="#00b7c0"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverBackground" Color="#5bdae4"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverBackground" Color="#00b7c0"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemForeground" Color="White"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverForeground" Color="White"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverForeground" Color="White"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedForeground" Color="White"/>
                                <SolidColorBrush x:Key="SyncfusionSegmentedControlBorderBrush" Color="#5F5E5E"/>
                            </ResourceDictionary>
                        </ResourceDictionary.ThemeDictionaries>
                    </ResourceDictionary>
                </syncfusion:SfSegmentedControl.Resources>
                <syncfusion:SfSegmentedControl.ItemContainerStyle>
                    <Style TargetType="syncfusion:SfSegmentedItem">
                        <Setter Property="Margin" Value="3" />
                        <Setter Property="CornerRadius" Value="4" />
                    </Style>
                </syncfusion:SfSegmentedControl.ItemContainerStyle>
            </syncfusion:SfSegmentedControl>
        </StackPanel>
    </Grid>
</Window>

NOTE

View sample in GitHub

Animation

The Segmented Control supports slide animation for selecting the item. Also, users can enable or disable the selection animation using the SelectionAnimationType property. This property has following two values:

• Slide - The slide animation effect is applied while selecting the item.
• None - Disables animation while selecting the item.

NOTE

The default value of SelectionAnimationType property property is Slide.

Slide

When setting SelectionAnimationType to Slide, then the slide animation effect is applied while selecting the item.

XAML

<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors" 
    mc:Ignorable="d">
    <Grid>
        <Grid.DataContext>
            <local:SegmentedViewModel/>
        </Grid.DataContext>
        <syncfusion:SfSegmentedControl x:Name="segmentedControl"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    SelectedIndex="0" 
                                    SelectionAnimationType="Slide"
                                    DisplayMemberPath="Name"
                                    ItemsSource="{Binding Days}">
        </syncfusion:SfSegmentedControl>
    </Grid>
</Window>

None

The animation effect can be disabled while selecting the item by setting the SelectionAnimationType to None.

XAML

<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors" 
    mc:Ignorable="d">
    <Grid>
        <Grid.DataContext>
            <local:SegmentedViewModel/>
        </Grid.DataContext>
        <syncfusion:SfSegmentedControl x:Name="segmentedControl"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    SelectedIndex="0"
                                    SelectionAnimationType="None"
                                    DisplayMemberPath="Name" 
                                    ItemsSource="{Binding Days}">
        </syncfusion:SfSegmentedControl>
    </Grid>
</Window>

Keyboard behaviors

Key or Key combinations	Description
LeftArrow	Moves to the previous item on the segmented control's left side. It does not make any selection and only navigates to the previous item. If the focus border is on the first item, pressing LeftArrow does nothing.
RightArrow	Moves to the next item on the segmented control's right side. It does not make any selection and only navigates to the next item. If the focus border is on the last item, pressing RightArrow does nothing.
Tab	The focus border appears on the selected item when users press the Tab key. The focus border appears on the first item, if there is no selected item. It will leave the control after pressing the Tab key with focus.
Enter	Pressing the Enter key when segment item in focus will make selection.

SelectionChanged event

The SelectionChanged event is triggered, once the selection process has been completed for the selected item in the Segmented Control. The SegmentSelectionChangedEventArgs has the following values, which provides information for SelectionChanged event:

• NewValue: Gets the new value of SelectedItem that has been assigned to the SegmentedControl.
• OldValue: Gets the old value of SelectedItem that has been assigned to the SegmentedControl.

C#

segmentedControl.SelectionChanged += SegmentedControl_SelectionChanged;

private void SegmentedControl_SelectionChanged(object sender, SegmentSelectionChangedEventArgs e)
{
   var newValue = e.NewValue;
   var oldValue = e.OldValue;         
}

NOTE

View sample in GitHub