menu

WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfSegmentedControl - WinUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfSegmentedControl

    The SfSegmentedControl provides a simple way to choose from a linear set of two or more segments, each of which functions as a mutually exclusive option.

    Control style and template

    Key Description
    SyncfusionSegmentedControlBackground Used to set the background color of the segmented control.
    SyncfusionSegmentedControlBorderBrush Used to set the border color of the segmented control.
    Inheritance
    System.Object
    SfSegmentedControl
    Namespace: Syncfusion.UI.Xaml.Editors
    Assembly: Syncfusion.Editors.WinUI.dll
    Syntax
    public class SfSegmentedControl : Control
    Examples

    This example illustrates how to set the items using ItemsSource and ItemTemplate.

    <syncfusion:SfSegmentedControl Name="segmentedControl" ItemsSource="{Binding SegmentItems}">
         <syncfusion:SfSegmentedControl.ItemTemplate>
             <DataTemplate>
                 <Grid>
                     <TextBlock Text = "{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                  </Grid>
             </DataTemplate>
        </syncfusion:SfSegmentedControl.ItemTemplate>
    </ syncfusion:SfSegmentedControl>   

    This example illustrates how to set the items using ItemsSource and DisplayMemberPath.

    <syncfusion:SfSegmentedControl Name="segmentedControl" 
        DisplayMemberPath ="Name"
        ItemsSource="{Binding SegmentItems}"/>

    This example illustrates how to set the items using string collection.

    <syncfusion:SfSegmentedControl Name="segmentedControl">
        <x:String>Day</x:String>
        <x:String>Week</x:String>
        <x:String>Month</x:String>
        <x:String>Year</x:String>
    </syncfusion:SfSegmentedControl>

    Constructors

    SfSegmentedControl()

    Initializes a new instance of the SfSegmentedControl class.

    Declaration
    public SfSegmentedControl()

    Fields

    DisplayMemberPathProperty

    Identifies DisplayMemberPath dependency property.

    Declaration
    public static readonly DependencyProperty DisplayMemberPathProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the DisplayMemberPath dependency property.

    ItemBorderThicknessProperty

    Identifies ItemBorderThickness dependency property.

    Declaration
    public static readonly DependencyProperty ItemBorderThicknessProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemBorderThickness dependency property.

    ItemContainerStyleProperty

    Identifies ItemContainerStyle dependency property.

    Declaration
    public static readonly DependencyProperty ItemContainerStyleProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemContainerStyle dependency property.

    ItemContainerStyleSelectorProperty

    Identifies ItemContainerStyleSelector dependency property.

    Declaration
    public static readonly DependencyProperty ItemContainerStyleSelectorProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemContainerStyleSelector dependency property.

    ItemsSourceProperty

    Identifies ItemsSource dependency property.

    Declaration
    public static readonly DependencyProperty ItemsSourceProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemsSource dependency property.

    ItemTemplateProperty

    Identifies ItemTemplate dependency property.

    Declaration
    public static readonly DependencyProperty ItemTemplateProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemTemplate dependency property.

    ItemTemplateSelectorProperty

    Identifies ItemTemplateSelector dependency property.

    Declaration
    public static readonly DependencyProperty ItemTemplateSelectorProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemTemplateSelector dependency property.

    SelectedIndexProperty

    Identifies SelectedIndex dependency property.

    Declaration
    public static readonly DependencyProperty SelectedIndexProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the SelectedIndex dependency property.

    SelectedItemProperty

    Identifies SelectedItem dependency property.

    Declaration
    public static readonly DependencyProperty SelectedItemProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the SelectedItem dependency property.

    SelectedSegmentStyleProperty

    Identifies SelectedSegmentStyle dependency property.

    Declaration
    public static readonly DependencyProperty SelectedSegmentStyleProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the SelectedSegmentStyle dependency property.

    SelectionAnimationTypeProperty

    Identifies SelectionAnimationType dependency property.

    Declaration
    public static readonly DependencyProperty SelectionAnimationTypeProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the SelectionAnimationType dependency property.

    Properties

    DisplayMemberPath

    Gets or sets the name or path of the property that is displayed for each item in the SfSegmentedControl.

    Declaration
    public string DisplayMemberPath { get; set; }
    Property Value
    Type Description
    System.String

    The name or path of the property that is displayed for each SfSegmentedItem. The default value is string.Empty.

    Examples
    <syncfusion:SfSegmentedControl Name="segmentedControl" 
        DisplayMemberPath ="Name"
        ItemsSource="{Binding SegmentItems}"/>

    ItemBorderThickness

    Gets or sets the border thickness of the SfSegmentedItem in the SfSegmentedControl.

    Declaration
    public Thickness ItemBorderThickness { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Thickness

    The border thickness of the SfSegmentedItem. The default value is 0,0,1,0.

    ItemContainerStyle

    Gets or sets the Microsoft.UI.Xaml.Style that is applied to the container element generated for each SfSegmentedItem.

    Declaration
    public Style ItemContainerStyle { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Style

    The Microsoft.UI.Xaml.Style that is applied to the container element generated for each SfSegmentedItem. The default value is null.

    Examples
    <Grid.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="SelectedBorderBrush" Color="DarkBlue"/>
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="SelectedBorderBrush" Color="Red"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
            <Style TargetType = "syncfusion:SelectedSegmentBorder" x:Key="topBorderStyle" >
                <Setter Property = "BorderThickness" Value="0,4,0,0" />
                <Setter Property = "BorderBrush" Value="{ThemeResource SelectedBorderBrush}" />
            </Style>
        </ResourceDictionary>
    </Grid.Resources>
    
    <syncfusion:SfSegmentedControl
        x:Name="segmentedcontrol"
        Margin="100"
        HorizontalAlignment="Center"
        VerticalAlignment="Center" 
        SelectedIndex="2" 
        BorderThickness="0"
        ItemBorderThickness="0,4,0,0"
        SelectedSegmentStyle="{StaticResource topBorderStyle}"
        ItemsSource="{Binding Days}">
        <syncfusion:SfSegmentedControl.Resources>
            <ResourceDictionary>
                <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Light">
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverBackground" Color="CornflowerBlue"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverForeground" Color="White"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverBackground" Color="CornflowerBlue"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverForeground" Color="White"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedForeground" Color="Black"/>
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="Dark">
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverBackground" Color="PaleVioletRed"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverForeground" Color="White"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverBackground" Color="PaleVioletRed"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverForeground" Color="White"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedForeground" Color="White"/>
                    </ResourceDictionary>
                </ResourceDictionary.ThemeDictionaries>
            </ResourceDictionary>
        </syncfusion:SfSegmentedControl.Resources>
        <syncfusion:SfSegmentedControl.ItemContainerStyle>
            <Style TargetType = "syncfusion:SfSegmentedItem">
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property = "Padding" Value="8" />
                <Setter Property = "Margin" Value="2,0,2,0"/>
            </Style>
         </syncfusion:SfSegmentedControl.ItemContainerStyle>
         <syncfusion:SfSegmentedControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text = "{Binding Name}"
                        VerticalAlignment="Center" 
                        HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>
        </syncfusion:SfSegmentedControl.ItemTemplate>
    </syncfusion:SfSegmentedControl>

    ItemContainerStyleSelector

    Gets or sets custom style-selection logic for a style that can be applied to each SfSegmentedItem.

    Declaration
    public StyleSelector ItemContainerStyleSelector { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Controls.StyleSelector

    The Microsoft.UI.Xaml.Controls.StyleSelector returns different style values to use for the SfSegmentedItem container based on characteristics of the object being displayed. The default value is null.

    Examples
    <Grid.Resources>
        <Style TargetType="syncfusion:SelectedSegmentBorder" x:Key="ellipse" >
            <Setter Property = "CornerRadius" Value="20" />
            <Setter Property = "Background" Value="DarkGreen"/>
        </Style>
        <Style x:Key="averageRatingStyle" TargetType="syncfusion:SfSegmentedItem">
            <Setter Property = "CornerRadius" Value="20" />
            <Setter Property = "Margin" Value="5,5,5,5" />
            <Setter Property = "Background" Value="Red" />
        </Style>
        <Style x:Key="defaultStyle" TargetType="syncfusion:SfSegmentedItem">
            <Setter Property = "CornerRadius" Value="20" />
            <Setter Property = "Margin" Value="5,5,5,5" />
            <Setter Property = "Background" Value="Yellow" />
        </Style>
        <local:RatingStyleSelector x:Key="ratingStyleSelector" 
                    AverageRatingStyle="{StaticResource averageRatingStyle}"
                    DefaultStyle="{StaticResource defaultStyle}"/>
    </Grid.Resources>
    
    <syncfusion:SfSegmentedControl
        x:Name="segmentedcontrol"
        SelectedIndex="2"
        SelectionAnimationType="None"
        HorizontalAlignment="Center" 
        VerticalAlignment="Center"
        ItemBorderThickness="2"
        BorderThickness="0"
        ItemsSource="{Binding SegmentItems}" 
        ItemContainerStyleSelector="{StaticResource ratingStyleSelector}"
        SelectedSegmentStyle="{StaticResource ellipse}">
        <syncfusion:SfSegmentedControl.Resources>
            <ResourceDictionary>
                <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Light">
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemBackground" Color="DarkSeaGreen"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverBackground" Color="Olive"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemPressedBackground" Color="Olive"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverBackground" Color="Olive"/>
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="Dark">
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemBackground" Color="DarkSeaGreen"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverBackground" Color="Olive"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemPressedBackground" Color="Olive"/>
                        <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverBackground" Color="Olive"/>
                    </ResourceDictionary>
                </ResourceDictionary.ThemeDictionaries>
            </ResourceDictionary>
        </syncfusion:SfSegmentedControl.Resources>
        <syncfusion:SfSegmentedControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text = "{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>
        </syncfusion:SfSegmentedControl.ItemTemplate>
    </syncfusion:SfSegmentedControl>
    public class RatingStyleSelector : StyleSelector
    {
       public Style AverageRatingStyle { get; set; }
       public Style DefaultStyle { get; set; }
       protected override Style SelectStyleCore(object item, DependencyObject container)
       {
           if (item == null)
               return null;
           if ((item as SegmentModel).Rating == "Poor")
               return AverageRatingStyle;
           else
               return DefaultStyle;
       }
    }

    ItemsSource

    Gets or sets a collection used to generate the content of the SfSegmentedControl.

    Declaration
    public IList<object> ItemsSource { get; set; }
    Property Value
    Type Description
    System.Collections.Generic.IList<System.Object>

    A collection that is used to generate the content of the SfSegmentedControl. The default value is null.

    Examples

    The following example shows how to define a ItemsSource in SfSegmentedControl.

    <syncfusion:SfSegmentedControl Name="segmentedControl" ItemsSource="{Binding SegmentItems}">
         <syncfusion:SfSegmentedControl.ItemTemplate>
             <DataTemplate>
                 <Grid>
                     <TextBlock Text = "{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                  </Grid>
             </DataTemplate>
        </syncfusion:SfSegmentedControl.ItemTemplate>
    </ syncfusion:SfSegmentedControl>   

    ItemTemplate

    Gets or sets the Microsoft.UI.Xaml.DataTemplate used to display each SfSegmentedItem.

    Declaration
    public DataTemplate ItemTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.DataTemplate

    A Microsoft.UI.Xaml.DataTemplate that specifies the visualization of the data objects. The default value is null.

    Remarks

    This property should not be set while Microsoft.UI.Xaml.Controls.ItemsControl.DisplayMemberPath property value is provided.

    Examples
    <syncfusion:SfSegmentedControl Name="segmentedControl" ItemsSource="{Binding SegmentItems}">
         <syncfusion:SfSegmentedControl.ItemTemplate>
             <DataTemplate>
                 <Grid>
                     <TextBlock Text = "{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                  </Grid>
             </DataTemplate>
        </syncfusion:SfSegmentedControl.ItemTemplate>
    </ syncfusion:SfSegmentedControl>   

    ItemTemplateSelector

    Gets or sets the custom logic for choosing a template used to display each SfSegmentedItem.

    Declaration
    public DataTemplateSelector ItemTemplateSelector { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Controls.DataTemplateSelector

    A custom Microsoft.UI.Xaml.Controls.DataTemplateSelector object that provides logic and returns a Microsoft.UI.Xaml.DataTemplate. The default value is null.

    Remarks

    This property should not be set while Microsoft.UI.Xaml.Controls.ItemsControl.DisplayMemberPath property value is provided.

    Examples
    <Grid.Resources>
      <DataTemplate x:Key="selectedtemplate">
           <StackPanel Orientation = "Horizontal" >
              <ContentPresenter Width="16"
                                Height="16"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Center"
                                ContentTemplate="{Binding ImageTemplate}"/>
               <TextBlock Margin = "5"
                          VerticalAlignment="Center"
                          Text="{Binding Name}" />
           </StackPanel>
       </DataTemplate>
       <DataTemplate x:Key="childTemplate">
           <StackPanel Orientation = "Horizontal" >
               <TextBlock Margin="5"
                          VerticalAlignment="Center"
                          Text="{Binding Name}" />
           </StackPanel>
       </DataTemplate>
       <local:ItemTemplateSelector x:Key="templateselector" 
                                   SelectedTemplate="{StaticResource selectedtemplate}" 
                                   ChildTemplate="{StaticResource childTemplate}"/>
    </Grid.Resources>
    <syncfusion:SfSegmentedControl Name="segmentedControl" 
                        ItemsSource="{Binding SegmentItems}"
                        ItemTemplateSelector="{StaticResource templateselector}" />
    class ItemTemplateSelector : DataTemplateSelector
    {
       public DataTemplate SelectedTemplate { get; set; }
       public DataTemplate ChildTemplate { get; set; }
       protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
       {
           if (container == null)
               return null;
           if ((container as SfSegmentedItem).IsSelected)
               return SelectedTemplate;
           else
               return ChildTemplate;
       }
    }

    SelectedIndex

    Gets or sets the index of the selected item in the SfSegmentedControl.

    Declaration
    public int SelectedIndex { get; set; }
    Property Value
    Type Description
    System.Int32

    The index of the selected item. The default value is -1, which indicates that no item is selected.

    See Also
    SelectionChanged

    SelectedItem

    Gets or sets the selected item in the SfSegmentedControl.

    Declaration
    public object SelectedItem { get; set; }
    Property Value
    Type Description
    System.Object

    The selected item of SfSegmentedControl. The default value is null.

    SelectedSegmentStyle

    Gets or sets the selected SfSegmentedItem style in SfSegmentedControl.

    Declaration
    public Style SelectedSegmentStyle { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Style

    The style that defines the appearance of selected item in SfSegmentedControl. The default value is null.

    Remarks

    Need to provide style of target type SelectedSegmentBorder.

    Examples
    <Grid.Resources>
       <Style TargetType = "syncfusion:SelectedSegmentBorder" x:Key="style" >
           <Setter Property = "BorderThickness" Value="0,2,0,0" />
           <Setter Property = "BorderBrush" Value="Red" />
       </Style>
    </Grid.Resources>
    
    <syncfusion:SfSegmentedControl Name="segmentedControl" 
            ItemsSource="{Binding SegmentItems}"
            SelectedSegmentStyle="{StaticResource style}">
         <syncfusion:SfSegmentedControl.ItemTemplate>
             <DataTemplate>
                 <Grid>
                     <TextBlock Text = "{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                  </Grid>
             </DataTemplate>
        </syncfusion:SfSegmentedControl.ItemTemplate>
    </ syncfusion:SfSegmentedControl>   

    SelectionAnimationType

    Gets or sets the type of the animation while selecting the SfSegmentedItem in the SfSegmentedControl.

    Declaration
    public SegmentSelectionAnimationType SelectionAnimationType { get; set; }
    Property Value
    Type Description
    SegmentSelectionAnimationType

    The animation to be applied for selection the SfSegmentedItem. The default value is Slide.

    Examples

    This example illustrates how to disable the selection animation.

    <syncfusion:SfSegmentedControl Name="segmentedControl" 
         SelectionAnimationType="None"
         ItemsSource="{Binding SegmentItems}">
         <syncfusion:SfSegmentedControl.ItemTemplate>
             <DataTemplate>
                 <Grid>
                     <TextBlock Text = "{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                  </Grid>
             </DataTemplate>
        </syncfusion:SfSegmentedControl.ItemTemplate>
    </syncfusion:SfSegmentedControl>   

    Methods

    Dispose()

    Method to dispose objects from memory.

    Declaration
    public void Dispose()

    OnApplyTemplate()

    Builds the visual tree for the SfSegmentedControl.

    Declaration
    protected override void OnApplyTemplate()

    OnCreateAutomationPeer()

    Returns a class-specific AutomationPeer Implementations for the Microsoft UI Automation infrasturcutre.

    Declaration
    protected override AutomationPeer OnCreateAutomationPeer()
    Returns
    Type Description
    Microsoft.UI.Xaml.Automation.Peers.AutomationPeer

    The class-specific AutomationPeer subclass.

    OnKeyDown(KeyRoutedEventArgs)

    Invoked when the KeyDown attached event reaches an element in its route that is derived from this class. Implement this method to add class handling for this event.

    Declaration
    protected override void OnKeyDown(KeyRoutedEventArgs e)
    Parameters
    Type Name Description
    Microsoft.UI.Xaml.Input.KeyRoutedEventArgs e

    The Microsoft.UI.Xaml.Input.KeyRoutedEventArgs that contains the event data.

    SetItemEnabled(Int32, Boolean)

    Enables or disables a segment item in the SfSegmentedControl based on the index specified.

    Declaration
    public void SetItemEnabled(int index, bool isEnabled)
    Parameters
    Type Name Description
    System.Int32 index

    The index of the SfSegmentedItem.

    System.Boolean isEnabled

    The boolean indicating whether the SfSegmentedItem should be enabled or not.

    Events

    SelectionChanged

    Occurs when the SelectedItem is changed in the SfSegmentedControl.

    Declaration
    public event EventHandler<SegmentSelectionChangedEventArgs> SelectionChanged
    Event Type
    Type
    System.EventHandler<SegmentSelectionChangedEventArgs>
    Remarks

    The SelectionChanged event occurs when the selected segment item is changed in SfSegmentedControl on mouse, keyboard or programmatic selection.

    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved