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.

SelectionModeProperty

Identifies the SelectionMode dependency property.

Declaration

public static readonly BindableProperty SelectionModeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectionMode 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;

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;

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.

<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;

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.

<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;

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.

<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;

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;

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;

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>

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;

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;

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 };

SelectionMode

Gets or sets the selection behavior of segment items, allowing either single selection or single deselection.

Declaration

public SegmentSelectionMode SelectionMode { get; set; }

Property Value

Type	Description
SegmentSelectionMode	The default value of SegmentSelectionMode is Single.

Examples

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

XAML
C#

<button:SfSegmentedControl x:Name="segmentedControl"
                           SelectionMode="Single">
   <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.SelectionMode = SegmentSelectionMode.Single;

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;

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;

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;

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 };

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);

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);

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;
}

Tapped

Occurs when tapped on a segment item.

Declaration

public event EventHandler<SegmentTappedEventArgs> Tapped

Event Type

Type
System.EventHandler<SegmentTappedEventArgs>

Examples

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

this.segmentedControl.Tapped += SegmentedControl_Tapped;
private void SegmentedControl_Tapped(object sender, Syncfusion.Maui.Tolkit.SegmentTappedEventArgs e)
{
   var tappedItem = e.TappedItem;
}

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

Class SfSegmentedControl

Inheritance

Implements

Inherited Members

Namespace: Syncfusion.Maui.Toolkit.SegmentedControl

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

Examples

Constructors

SfSegmentedControl()

Declaration

Fields

AutoScrollToSelectedSegmentProperty

Declaration

Field Value

CornerRadiusProperty

Declaration

Field Value

DisabledSegmentBackgroundProperty

Declaration

Field Value

DisabledSegmentTextColorProperty

Declaration

Field Value

EnableRippleEffectProperty

Declaration

Field Value

ItemsSourceProperty

Declaration

Field Value

SegmentBackgroundProperty

Declaration

Field Value

SegmentCornerRadiusProperty

Declaration

Field Value

SegmentHeightProperty

Declaration

Field Value

SegmentTemplateProperty

Declaration

Field Value

SegmentWidthProperty

Declaration

Field Value

SelectedIndexProperty

Declaration

Field Value

SelectionIndicatorSettingsProperty

Declaration

Field Value

SelectionModeProperty

Declaration

Field Value

ShowSeparatorProperty

Declaration

Field Value

StrokeProperty

Declaration

Field Value

StrokeThicknessProperty

Declaration

Field Value

TextStyleProperty

Declaration

Field Value

VisibleSegmentsCountProperty

Declaration

Field Value

Properties

AutoScrollToSelectedSegment

Declaration

Property Value

Remarks

Examples

See Also

CornerRadius

Declaration

Property Value

Remarks