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	Description
System.EventHandler<SegmentSelectionChangedEventArgs>

Remarks

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