menu

MAUI Toolkit

  • User Guide
  • Demos
  • Support
Class SfSegmentedControl - MAUI-ToolKit API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfSegmentedControl

    The SfSegmentedControl that allows you to display a set of segments, typically used for switch among different views. Each segment in the control represents an item that the user can select. The control can be populated with a collection of SfSegmentItem objects and a collection of strings. The SfSegmentedControl provides various customization options such as segment height, width, selection indicator settings, text and icon styles, and more. It supports setting the currently selected segment using the SelectedIndex property and provides an option to enable auto-scrolling when the selected index changes. You can also customize the appearance of individual segments using the SegmentTemplate.

    Inheritance
    System.Object
    SfView
    SfSegmentedControl
    Implements
    IDrawableLayout
    Microsoft.Maui.Graphics.IDrawable
    Microsoft.Maui.IAbsoluteLayout
    Microsoft.Maui.ILayout
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IContainer
    System.Collections.Generic.IList<Microsoft.Maui.IView>
    System.Collections.Generic.ICollection<Microsoft.Maui.IView>
    System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>
    System.Collections.IEnumerable
    Microsoft.Maui.ISafeAreaView
    Microsoft.Maui.IPadding
    Microsoft.Maui.ICrossPlatformLayout
    Microsoft.Maui.IVisualTreeElement
    Inherited Members
    SfView.Children
    SfView.ClipToBounds
    SfView.Padding
    Namespace: Syncfusion.Maui.Toolkit.SegmentedControl
    Assembly: Syncfusion.Maui.Toolkit.dll
    Syntax
    public class SfSegmentedControl : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, ISegmentItemInfo, ISegmentInfo, IKeyboardListener, IParentThemeElement, IThemeElement
    Examples

    The following code demonstrates, how to bind ItemsSource and populate segment items in the SfSegmentedControl.

    # [C#](#tab/tabid-1)
    public class SegmentViewModel
    {
       public List<SfSegmentItem> Employees { get; set; }
       public SegmentViewModel()
       {
           Employees = new List<SfSegmentItem>
           {
              new SfSegmentItem() {  ImageSource="jackson.png", Text="Jackson" },
              new SfSegmentItem() { ImageSource ="gabriella.png" ,Text="Gabriella"},
              new SfSegmentItem() { ImageSource="liam.png", Text="Liam"},
           };
       }
    }
    # [XAML](#tab/tabid-2)
    <button:SfSegmentedControl x:Name="segmentedControl"
                               ItemsSource="{Binding Employees}">
       <button:SfSegmentedControl.BindingContext>
          <local:SegmentViewModel/>
       </button:SfSegmentedControl.BindingContext>
    </button:SfSegmentedControl>

    Constructors

    SfSegmentedControl()

    Initializes a new instance of the SfSegmentedControl class.

    Declaration
    public SfSegmentedControl()

    Fields

    AutoScrollToSelectedSegmentProperty

    Identifies the AutoScrollToSelectedSegment dependency property.

    Declaration
    public static readonly BindableProperty AutoScrollToSelectedSegmentProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for AutoScrollToSelectedSegment dependency property.

    CornerRadiusProperty

    Identifies the CornerRadius dependency property.

    Declaration
    public static readonly BindableProperty CornerRadiusProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for CornerRadius dependency property.

    DisabledSegmentBackgroundProperty

    Identifies the DisabledSegmentBackground dependency property.

    Declaration
    public static readonly BindableProperty DisabledSegmentBackgroundProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for DisabledSegmentBackground dependency property.

    DisabledSegmentTextColorProperty

    Identifies the DisabledSegmentTextColor dependency property.

    Declaration
    public static readonly BindableProperty DisabledSegmentTextColorProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for DisabledSegmentTextColor dependency property.

    EnableRippleEffectProperty

    Identifies the EnableRippleEffect dependency property.

    Declaration
    public static readonly BindableProperty EnableRippleEffectProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for EnableRippleEffect dependency property.

    ItemsSourceProperty

    Identifies the ItemsSource dependency property.

    Declaration
    public static readonly BindableProperty ItemsSourceProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ItemsSource dependency property.

    SegmentBackgroundProperty

    Identifies the SegmentBackground dependency property.

    Declaration
    public static readonly BindableProperty SegmentBackgroundProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SegmentBackground dependency property.

    SegmentCornerRadiusProperty

    Identifies the SegmentCornerRadius dependency property.

    Declaration
    public static readonly BindableProperty SegmentCornerRadiusProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SegmentCornerRadius dependency property.

    SegmentHeightProperty

    Identifies the SegmentHeight dependency property.

    Declaration
    public static readonly BindableProperty SegmentHeightProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SegmentHeight dependency property.

    SegmentTemplateProperty

    Identifies the SegmentTemplate dependency property.

    Declaration
    public static readonly BindableProperty SegmentTemplateProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SegmentTemplate dependency property.

    SegmentWidthProperty

    Identifies the SegmentWidth dependency property.

    Declaration
    public static readonly BindableProperty SegmentWidthProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SegmentWidth dependency property.

    SelectedIndexProperty

    Identifies the SelectedIndex dependency property.

    Declaration
    public static readonly BindableProperty SelectedIndexProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SelectedIndex dependency property.

    SelectionIndicatorSettingsProperty

    Identifies the SelectionIndicatorSettings dependency property.

    Declaration
    public static readonly BindableProperty SelectionIndicatorSettingsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SelectionIndicatorSettings dependency property.

    ShowSeparatorProperty

    Identifies the ShowSeparator dependency property.

    Declaration
    public static readonly BindableProperty ShowSeparatorProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShowSeparator dependency property.

    StrokeProperty

    Identifies the Stroke dependency property.

    Declaration
    public static readonly BindableProperty StrokeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Stroke dependency property.

    StrokeThicknessProperty

    Identifies the StrokeThickness dependency property.

    Declaration
    public static readonly BindableProperty StrokeThicknessProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for StrokeThickness dependency property.

    TextStyleProperty

    Identifies the TextStyle dependency property.

    Declaration
    public static readonly BindableProperty TextStyleProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for TextStyle dependency property.

    VisibleSegmentsCountProperty

    Identifies the VisibleSegmentsCount dependency property.

    Declaration
    public static readonly BindableProperty VisibleSegmentsCountProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for VisibleSegmentsCount dependency property.

    Properties

    AutoScrollToSelectedSegment

    Gets or sets a value indicating whether to enable auto-scrolling when the selected index is changed in the SfSegmentedControl.

    Declaration
    public bool AutoScrollToSelectedSegment { get; set; }
    Property Value
    Type Description
    System.Boolean

    The default value is true.

    Remarks

    This property will be applicable to only during the initial loading of the SfSegmentedControl.

    Examples

    The below examples shows, how to use the AutoScrollToSelectedSegment property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               AutoScrollToSelectedSegment="False"
                               WidthRequest="102"
                               SelectedIndex="2"
                               VisibleSegmentsCount="2">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
     segmentedControl.AutoScrollToSelectedSegment = false;
     segmentedControl.WidthRequest = 102;
     segmentedControl.SelectedIndex = 2;
     segmentedControl.VisibleSegmentsCount = 2;
    See Also
    ScrollTo(Int32)
    SelectedIndex
    VisibleSegmentsCount

    CornerRadius

    Gets or sets the corner radius for the border of the SfSegmentedControl.

    Declaration
    public CornerRadius CornerRadius { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.CornerRadius

    The default value is Microsoft.Maui.CornerRadius.#ctor(System.Double) with a value of 20.

    Remarks

    This property will be applicable to only for the first and last segment items. To set CornerRadius for all segments, use SegmentCornerRadius.

    Examples

    The below examples shows, how to use the CornerRadius property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               CornerRadius="3">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.CornerRadius = 3;
    See Also
    SegmentCornerRadius
    ShowSeparator

    DisabledSegmentBackground

    Gets or sets the background brush of the disabled segment items in the SfSegmentedControl.

    Declaration
    public Brush DisabledSegmentBackground { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    The default value is Microsoft.Maui.Controls.Brush.Transparent.

    Remarks

    This property will be applicable to only when the IsEnabled is set to "false"/>.

    Examples

    The below examples shows, how to use the DisabledSegmentBackground property in the SfSegmentedControl.

    • XAML
    • C#
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               ItemsSource="{Binding Items}"
                               DisabledSegmentBackground="Red">
       <button:SfSegmentedControl.BindingContext>
           <local:SegmentViewModel/>
       </button:SfSegmentedControl.BindingContext>
    </button:SfSegmentedControl>
    public class SegmentViewModel
    {
       public List<SfSegmentItem> Items { get; set; }
       public SegmentViewModel()
       {
           Items = new List<SfSegmentItem>
           {
              new SfSegmentItem() { Text = "Day" },
              new SfSegmentItem() { Text = "Week", IsEnabled=false},
              new SfSegmentItem() { Text = "Month"},
              new SfSegmentItem() { Text = "Year", IsEnabled=false}
           };
       }
    }
    segmentedControl.DisabledSegmentBackground = Brush.Red;
    See Also
    SetSegmentEnabled(Int32, Boolean)
    IsEnabled
    DisabledSegmentTextColor

    DisabledSegmentTextColor

    Gets or sets the text color of the disabled segment items in the SfSegmentedControl.

    Declaration
    public Color DisabledSegmentTextColor { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Graphics.Color

    The default value is "Color.FromArgb("#1C1B1F61")"/>.

    Remarks

    This property will be applicable to only when the IsEnabled is set to "false"/>.

    Examples

    The below examples shows, how to use the DisabledSegmentTextColor property in the SfSegmentedControl.

    • XAML
    • C#
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               ItemsSource="{Binding Items}"
                               DisabledSegmentTextColor="Gray">
       <button:SfSegmentedControl.BindingContext>
           <local:SegmentViewModel/>
       </button:SfSegmentedControl.BindingContext>
    </button:SfSegmentedControl>
    public class SegmentViewModel
    {
       public List<SfSegmentItem> Items { get; set; }
       public SegmentViewModel()
       {
           Items = new List<SfSegmentItem>
           {
              new SfSegmentItem() { Text = "Day" },
              new SfSegmentItem() { Text = "Week", IsEnabled=false},
              new SfSegmentItem() { Text = "Month"},
              new SfSegmentItem() { Text = "Year", IsEnabled=false}
           };
       }
    }
    segmentedControl.DisabledSegmentTextColor = Colors.Gray;
    See Also
    SetSegmentEnabled(Int32, Boolean)
    IsEnabled
    DisabledSegmentBackground

    EnableRippleEffect

    Gets or sets a value indicating whether the ripple effect animation should be applied to a segment item when it is selected for default and segment template added.

    Declaration
    public bool EnableRippleEffect { get; set; }
    Property Value
    Type Description
    System.Boolean

    The default value is true.

    Examples

    The below examples shows, how to use the EnableRippleEffect property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               EnableRippleEffect="False">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    this.segmentedControl.EnableRippleEffect = false;

    ItemsSource

    Gets or sets a collection used to generate the SfSegmentItem in the SfSegmentedControl.

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

    The default value is null.

    Examples

    The below examples shows, how to set the items collection to the ItemsSource in the SfSegmentedControl.

    • XAML
    • C#
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               ItemsSource="{Binding Items}">
       <button:SfSegmentedControl.BindingContext>
           <local:SegmentViewModel/>
       </button:SfSegmentedControl.BindingContext>
    </button:SfSegmentedControl>
    public class SegmentViewModel
    {
       public List<SfSegmentItem> Items { get; set; }
       public SegmentViewModel()
       {
           Items = new List<SfSegmentItem>
           {
               new SfSegmentItem() { Text="Day" },
               new SfSegmentItem() { Text="Week"},
               new SfSegmentItem() { Text="Month"},
               new SfSegmentItem() { Text="Year"}
           };
       }
    }
     var items = new List<SfSegmentItem>();
     items.Add(new SfSegmentItem() { Text = "Day" });
     items.Add(new SfSegmentItem() { Text = "Week" });
     items.Add(new SfSegmentItem() { Text = "Month" });
     items.Add(new SfSegmentItem() { Text = "Year" });
     segmentedControl.ItemsSource = items;

    SegmentBackground

    Gets or sets the background brush for the segments in the SfSegmentedControl.

    Declaration
    public Brush SegmentBackground { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    The default value of Microsoft.Maui.Controls.Brush.Transparent.

    Examples

    The below examples shows, how to use the SegmentBackground property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               SegmentBackground="Orange">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.SegmentBackground = Brush.Orange;
    See Also
    TextStyle
    SelectionIndicatorSettings

    SegmentCornerRadius

    Gets or sets the segment corner radius for the segment items of the SfSegmentedControl.

    Declaration
    public CornerRadius SegmentCornerRadius { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.CornerRadius

    The default value is Microsoft.Maui.CornerRadius.#ctor(System.Double) with a value of 0.

    Examples

    The below examples shows, how to use the SegmentCornerRadius property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               SegmentCornerRadius="30"
                               StrokeThickness="0"
                               ShowSeparator="False">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.SegmentCornerRadius = 30;
    segmentedControl.StrokeThickness = 0;
    segmentedControl.ShowSeparator = false;
    See Also
    CornerRadius
    ShowSeparator

    SegmentHeight

    Gets or sets the height of the segments in the SfSegmentedControl.

    Declaration
    public double SegmentHeight { get; set; }
    Property Value
    Type Description
    System.Double

    The default value is 40.

    Examples

    The below examples shows, how to use the segment height property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               SegmentHeight="60">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.SegmentHeight = 60;
    See Also
    SegmentWidth
    SegmentBackground
    CornerRadius
    SegmentCornerRadius

    SegmentTemplate

    Gets or sets the data template to use for customizing the appearance of individual segments in the SfSegmentedControl.

    Declaration
    public DataTemplate SegmentTemplate { get; set; }
    Property Value
    Type
    Microsoft.Maui.Controls.DataTemplate
    Remarks

    The SfSegmentItem will be set as binding context.

    Examples

    The below examples shows, how to use the SegmentTemplate property in the SfSegmentedControl.

    • XAML
    <button:SfSegmentedControl x:Name="segmentedControl">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
       <button:SfSegmentedControl.SegmentTemplate>
         <DataTemplate>
           <Grid Background="Orange">
               <Label Text="{Binding Text}"
                      TextColor="Green"
                      Margin="6"/>
           </Grid>
         </DataTemplate>
       </button:SfSegmentedControl.SegmentTemplate>
    </button:SfSegmentedControl>
    See Also
    IsEnabled

    SegmentWidth

    Gets or sets the width of the segments in the SfSegmentedControl.

    Declaration
    public double SegmentWidth { get; set; }
    Property Value
    Type Description
    System.Double

    The default value is 100.

    Examples

    The below examples shows, how to use the segment width property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               SegmentWidth="120">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.SegmentWidth = 120;
    See Also
    SegmentHeight
    SegmentBackground
    CornerRadius
    SegmentCornerRadius

    SelectedIndex

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

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

    The index of the selected item defaults to null, indicating that no item is currently selected.

    Examples

    The below examples shows, how to use the selected index property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               SelectedIndex="1">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.SelectedIndex = 1;
    See Also
    SelectionChanged

    SelectionIndicatorSettings

    Gets or sets the settings for the segment selection indicator, which is used to highlight the selected item in the SfSegmentedControl.

    Declaration
    public SelectionIndicatorSettings SelectionIndicatorSettings { get; set; }
    Property Value
    Type Description
    SelectionIndicatorSettings

    The default value of TextColor is Microsoft.Maui.Graphics.Colors.White, Background is "new SolidColorBrush(Color.FromArgb("#6750A4"))", SelectionIndicatorPlacement is Fill, Stroke is "Color.FromArgb("#6750A4")"> StrokeThickness is "3"/>.

    Remarks

    When the selection mode is set to Fill, the selected item's appearance is determined by the Background property. However, when the selection mode is set to Border, TopBorder, or BottomBorder, the selected color is determined by the Stroke and StrokeThickness properties, and for border selection, the text color of the selected item is determined by the Background property.

    Examples

    The below examples shows, how to use the SelectionIndicatorSettings property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               SelectionIndicatorSettings="{button:SelectionIndicatorSettings SelectionIndicatorPlacement=Border, Stroke=Orange}">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() { SelectionIndicatorPlacement = SelectionIndicatorPlacement.Border, Stroke = Colors.Orange };
    See Also
    TextStyle

    ShowSeparator

    Gets or sets a value indicating whether to show separators between segments in the SfSegmentedControl.

    Declaration
    public bool ShowSeparator { get; set; }
    Property Value
    Type Description
    System.Boolean

    The default value is true.

    Examples

    The below examples shows, how to use the ShowSeparator property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               ShowSeparator="False"
                               SegmentCornerRadius="30"
                               StrokeThickness="0">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.ShowSeparator = false;
    segmentedControl.SegmentCornerRadius = 30;
    segmentedControl.StrokeThickness = 0;
    See Also
    SegmentCornerRadius
    StrokeThickness

    Stroke

    Gets or sets the stroke brush for the segments in the SfSegmentedControl.

    Declaration
    public Brush Stroke { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    The default value of "new SolidColorBrush(Color.FromArgb("#79747E")"/>.

    Examples

    The below examples shows, how to use the Stroke property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               Stroke="Orange">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.Stroke = Brush.Orange;
    See Also
    StrokeThickness
    ShowSeparator

    StrokeThickness

    Gets or sets the thickness of the segment stroke in the SfSegmentedControl.

    Declaration
    public double StrokeThickness { get; set; }
    Property Value
    Type Description
    System.Double

    The default value of 1.

    Examples

    The below examples shows, how to use the StrokeThickness property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               StrokeThickness="2">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.StrokeThickness = 2;
    See Also
    Stroke
    ShowSeparator

    TextStyle

    Gets or sets the style of segment item text, that used to customize the text color, font, font size, font family and font attributes.

    Declaration
    public SegmentTextStyle TextStyle { get; set; }
    Property Value
    Type Description
    SegmentTextStyle

    The default value of TextColor is "Color.FromArgb("#1C1B1F")", FontSize is 14, FontFamily is null, FontAttributes is Microsoft.Maui.Controls.FontAttributes.None.

    Examples

    The below examples shows, how to use the TextStyle property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               TextStyle="{button:SegmentTextStyle TextColor=Blue, FontAttributes=Italic}">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.TextStyle = new SegmentTextStyle() { TextColor = Colors.Blue, FontAttributes = FontAttributes.Italic };
    See Also
    SegmentBackground
    SelectionIndicatorSettings

    VisibleSegmentsCount

    Gets or sets the number of visible segments to be displayed in the SfSegmentedControl.

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

    The default value is -1.

    Remarks

    When set the VisibleSegmentsCount property, it automatically adjusts the layout of segments. This means that the SegmentWidth and Width properties will not apply, and the WidthRequest value should be divided by the VisibleSegmentsCount to determine the width of each segment.

    Examples

    The below examples shows, how to use the visible segments count property in the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               WidthRequest="102"
                               VisibleSegmentsCount="2">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.WidthRequest = 102;
    segmentedControl.VisibleSegmentsCount = 2;

    Methods

    ScrollTo(Int32)

    Method to scrolls the scroll viewer to the specified index.

    Declaration
    public void ScrollTo(int index)
    Parameters
    Type Name Description
    System.Int32 index

    The index of the item to scroll to.

    Remarks

    This method ensures that the segment at the given index is brought into view within the scrollable area.

    Examples

    The below examples shows, how to use the ScrollTo(Int32) method to the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl"
                               WidthRequest="102"
                               VisibleSegmentsCount="2">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.ScrollTo(2);
    See Also
    SetSegmentEnabled(Int32, Boolean)

    SetSegmentEnabled(Int32, Boolean)

    Sets the enabled state of a specific segment at the specified index.

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

    The index of the segment to set the enabled state for.

    System.Boolean isEnabled

    Determines whether the segment should be enabled (true) or disabled (false).

    Remarks

    This method updates the enabled state of a segment item and its corresponding view in the segment layout.

    Examples

    The below examples shows, how to use the SetSegmentEnabled(Int32, Boolean) method to the SfSegmentedControl.

    • XAML
    • C#
    <button:SfSegmentedControl x:Name="segmentedControl">
       <button:SfSegmentedControl.ItemsSource>
           <x:Array Type="{x:Type x:String}">
               <x:String>Day</x:String>
               <x:String>Week</x:String>
               <x:String>Month</x:String>
               <x:String>Year</x:String>
           </x:Array>
       </button:SfSegmentedControl.ItemsSource>
    </button:SfSegmentedControl>
    segmentedControl.SetSegmentEnabled(2, false);
    See Also
    ScrollTo(Int32)

    Events

    SelectionChanged

    Occurs when the selection within the segment item is changed.

    Declaration
    public event EventHandler<SelectionChangedEventArgs> SelectionChanged
    Event Type
    Type
    System.EventHandler<SelectionChangedEventArgs>
    Examples

    The following code demonstrates, how to use the SfSegmentedControl's selection changed event.

    segmentedControl.SelectionChanged += OnSegmentedControlSelectionChanged;
    void OnSegmentedControlSelectionChanged(object sender, Syncfusion.Maui.Buttons.SelectionChangedEventArgs e)
    {
       var oldValue = e.OldValue;
       var newValue = e.NewValue;
       int? oldIndex = e.OldIndex;
       int? newIndex = e.NewIndex;
    }

    Implements

    IDrawableLayout
    Microsoft.Maui.Graphics.IDrawable
    Microsoft.Maui.IAbsoluteLayout
    Microsoft.Maui.ILayout
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IContainer
    System.Collections.Generic.IList<>
    System.Collections.Generic.ICollection<>
    System.Collections.Generic.IEnumerable<>
    System.Collections.IEnumerable
    Microsoft.Maui.ISafeAreaView
    Microsoft.Maui.IPadding
    Microsoft.Maui.ICrossPlatformLayout
    Microsoft.Maui.IVisualTreeElement
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved