Unleashing the Power of Navigation and Filtering with WinUI Segmented Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (225)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (940)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (157)Chart  (140)Chart of the week  (54)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (69)Development  (656)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (612)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Unleashing the Power of Navigation and Filtering with WinUI Segmented Control

Unleashing the Power of Navigation and Filtering with WinUI Segmented Control

The Syncfusion WinUI Segmented Control is a user interface element that provides a simple way to choose from a linear set of two or more segments, each of which functions as a mutually exclusive option.

In this article, we’ll explore the practical benefits of using the WinUI Segmented Control to facilitate streamlined filtering and navigational capabilities in different apps.

Note: Before proceeding, refer to the getting started with WinUI Segmented Control documentation.

Navigation

The WinUI Segmented Control allows users to switch between different sections or views within a user interface. For example, in a calendar app, you could use it to switch between “Day,” “Week,” “Month,” and “Year” views.

To demonstrate this concept, the following code examples showcase two distinct designs for the WinUI Segmented Control that categorize days, weeks, months, and years.

Basic Segmented Control design

Refer to the following code example. In it, the WinUI Segmented Control is created with a user-defined data source and a DataTemplate to present each category.

<syncfusion:SfSegmentedControl Margin="100" HorizontalAlignment="Center" VerticalAlignment="Center" SelectedIndex="2" ItemsSource="{Binding Days}">
  <syncfusion:SfSegmentedControl.ItemTemplate>
   <DataTemplate>
    <Grid>
     <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
   </DataTemplate>
  </syncfusion:SfSegmentedControl.ItemTemplate>
</syncfusion:SfSegmentedControl>

After executing the previous code example, we’ll have a visually appealing Segmented Control that allows users to switch between different periods.

Selecting the Different Sections in a Basic WinUI Segmented Control
Selecting the Different Sections in a Basic WinUI Segmented Control

Customized Segmented Control design

We can also customize the appearance of the WinUI Segmented Control items. This can be done by modifying various properties, such as border styles, background colors, and icon rendering.

Refer to the following code example. In it, we’ll create a custom look for the Segmented Control.

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
 <Grid.Resources>
  <ResourceDictionary>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverBackground" Color="#7995f2"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemPressedBackground" Color="#7995e6"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverForeground" Color="White"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverBackground" Color="#7995f2"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverForeground" Color="White"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedForeground" Color="Black"/>
  </ResourceDictionary>
 </Grid.Resources>
 <syncfusion:SfSegmentedControl Margin="100" HorizontalAlignment="Center"
                                VerticalAlignment="Center" SelectedIndex="2" 
                                BorderThickness="0" ItemBorderThickness="0,4,0,0"
                                CornerRadius="0" Background="Transparent"
                                SelectedSegmentStyle="{StaticResource topBorderStyle}"
                                ItemsSource="{Binding Days}">
  <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>
    <StackPanel Orientation="Horizontal">
     <Path Data="{Binding Icon}" Stretch="Uniform" Fill="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Foreground}" Width="16" Height="16" RenderTransformOrigin="0.5,0.5">
      <Path.RenderTransform>
       <TransformGroup>
        <TransformGroup.Children>
         <RotateTransform Angle="0" />
         <ScaleTransform ScaleX="1" ScaleY="1" />
        </TransformGroup.Children>
       </TransformGroup>
      </Path.RenderTransform>
     </Path>
     <TextBlock Text="{Binding Name}" Margin="6,0,0,0"
                VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </StackPanel>
   </DataTemplate>
  </syncfusion:SfSegmentedControl.ItemTemplate>
 </syncfusion:SfSegmentedControl>
</Grid>

After executing the previous code example, we’ll have a customized Segmented Control design with distinct visual elements, enhancing user interaction and experience.

Selecting the Different Sections in a Customized WinUI Segmented Control
Selecting the Different Sections in a Customized WinUI Segmented Control

Filtering

We can also use the Segmented Control to filter data in a user interface. For example, in an e-commerce app, you can filter products based on different criteria, such as “Category,” “Size,” and “Color.”

One of the notable advantages of our WinUI Segmented Control is its support for customizing segment items’ shapes into circles, rectangles, or rounded rectangles to match the aesthetics of your app. This flexibility allows developers to create an interface that aligns with their branding and design choices.

Let’s see how to implement category, size, and color filtering scenarios in an e-commerce app using the WinUI Segmented Control.

Refer to the following code example to design the Segmented Control for choosing a category.

<syncfusion:SfSegmentedControl Height="36" Margin="0,20,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" CornerRadius="4" BorderThickness="1" ItemBorderThickness="0" SelectedSegmentStyle="{StaticResource shirtModelStyle}" ItemsSource="{Binding Shirts}" >
 <syncfusion:SfSegmentedControl.Resources>
  <ResourceDictionary>
   <SolidColorBrush x:Key="SyncfusionSegmentedControlBackground" Color="#F2F2F2"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemBackground" Color="#F2F2F2"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedBackground" Color="White"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverBackground" Color="#E4E4E4"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemPressedBackground" Color="#E4E4E4"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverBackground" Color="#E4E4E4"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemForeground" Color="Black"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverForeground" Color="Black"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemPressedForeground" Color="Black"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverForeground" Color="Black"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedForeground" Color="Black"/>
   <SolidColorBrush x:Key="SyncfusionSegmentedControlBorderBrush" Color="#D9D9D9"/>
  </ResourceDictionary>
 </syncfusion:SfSegmentedControl.Resources>
 <syncfusion:SfSegmentedControl.ItemContainerStyle>
  <Style TargetType="syncfusion:SfSegmentedItem">
   <Setter Property="Margin" Value="4" />
   <Setter Property="CornerRadius" Value="4" />
  </Style>
 </syncfusion:SfSegmentedControl.ItemContainerStyle>
 <syncfusion:SfSegmentedControl.ItemTemplate>
  <DataTemplate>
   <Grid>
    <TextBlock Text="{Binding Name}" 
               VerticalAlignment="Center" HorizontalAlignment="Center"/>
   </Grid>
  </DataTemplate>
 </syncfusion:SfSegmentedControl.ItemTemplate>
</syncfusion:SfSegmentedControl>

Refer to the following image.WinUI Segmented control for Choosing a Category

Now let’s design the Segmented Control for choosing a color.

. . . 

<Style TargetType="Syncfusion:SelectedSegmentBorder" x:Key="circleStyle">
 <Setter Property="BorderThickness" Value="2" />
 <Setter Property="BorderBrush" Value="{ThemeResource SystemBaseHighColor}"/>
 <Setter Property="Width" Value="28"/>
 <Setter Property="Margin" Value="-4,0,0,0"/>
 <Setter Property=”CornerRadius” Value=”14” />
 <Setter Property="Background" Value="Transparent"/>
 <Setter Property="Canvas.Zindex" Value="2"/>
</Style>
. . .
< Syncfusion:SfSegmentedControl Margin="-2,35,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" MinHeight="28" BorderThickness="0" Background="Transparent" SelectedItem="{Binding SelectedBackground, Mode=TwoWay}" ItemBorderThickness="0" SelectionAnimationType="None" SelectedSegmentStyle="{StaticResource circleStyle}" ItemsSource="{Binding Colors}" > < Syncfusion:SfSegmentedControl.ItemContainerStyle> <Style TargetType="Syncfusion:SfSegmentedItem"> <Setter Property="Width" Value="20" /> <Setter Property="Height" Value="20" /> <Setter Property="CornerRadius" Value="10" /> <Setter Property="Padding" Value="0" /> <Setter Property="Margin" Value="4,0,4,0"/> </Style> </Syncfusion:SfSegmentedControl.ItemContainerStyle> <Syncfusion:SfSegmentedControl.ItemTemplate> <DataTemplate> <Border Background="{Binding Background}" Width="20" Height="20" CornerRadius="10"/> </DataTemplate> </Syncfusion:SfSegmentedControl.ItemTemplate> </Syncfusion:SfSegmentedControl>

Refer to the following image to see the code’s output.

WinUI Segmented Control for Choosing a colorFinally, let’s design the Segmented Control for choosing a size.

. . . 

<Style TargetType="Syncfusion:SelectedSegmentBorder" x:Key="shirtSizeStyle">
 <Setter Property="CornerRadius" Value="2"/>
 <Setter Property="Background" Value="{ThemeResource SelectedBackground}"/>
</Style>
. . . <Syncfusion:SfSegmentedControl Margin="-3,35,0,20" VerticalAlignment="Center" HorizontalAlignment="Left" SelectedIndex="2" BorderThickness="0" SelectionAnimationType="None" ItemBorderThickness="1" Background="Transparent" SelectedSegmentStyle="{StaticResource shirtSizeStyle}" ItemsSource="{Binding Sizes}" > <Syncfusion:SfSegmentedControl.Resources> <ResourceDictionary> <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedBackground" Color="#6C58EA"/> <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverBackground" Color="#E8E4FF"/> <SolidColorBrush x:Key="SyncfusionSegmentedItemPressedBackground" Color="#6C58CA"/> <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverBackground" Color="#6C58EA"/> <SolidColorBrush x:Key="SyncfusionSegmentedItemForeground" Color="Black"/> <SolidColorBrush x:Key="SyncfusionSegmentedItemHoverForeground" Color="Black"/> <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedHoverForeground" Color="White"/> <SolidColorBrush x:Key="SyncfusionSegmentedItemSelectedForeground" Color="White"/> </ResourceDictionary> </Syncfusion:SfSegmentedControl.Resources> <Syncfusion:SfSegmentedControl.ItemContainerStyle> <Style TargetType="Syncfusion:SfSegmentedItem"> <Setter Property="Margin" Value="3" /> <Setter Property="Height" Value="33"/> <Setter Property="Width" Value="45"/> <Setter Property="CornerRadius" Value="2"/> <Setter Property="BorderBrush" Value="#C6C6C6"/> </Style> </Syncfusion:SfSegmentedControl.ItemContainerStyle> <Syncfusion:SfSegmentedControl.ItemTemplate> <DataTemplate> <Grid> <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </DataTemplate> </Syncfusion:SfSegmentedControl.ItemTemplate> </Syncfusion:SfSegmentedControl>

The following image shows the customized control.WinUI Segmented Control for Choosing a Size

The output UI combining the category, color and size selectors is shown in the following image.

Filtering in an E-Commerce App Using the WinUI Segmented Control
Filtering in an E-Commerce App Using the WinUI Segmented Control

GitHub reference

For more details, refer to the WinUI Segmented Control demo on GitHub.

Conclusion

Thanks for reading! I hope you found the information about our WinUI Segmented Control and its features interesting. This control is a powerful and versatile tool that can improve the user experience in apps by simplifying navigation and streamlining data filtering.

Our WinUI demo app is available for download in the Microsoft Store. After trying it out, please share your thoughts in the comment section below.

The latest version of our WinUI controls can be found on the License and Downloads page for current customers. If you’re not a Syncfusion customer, take advantage of our 30-day free trial to explore the newest features.

Don’t hesitate to contact us through our support forumssupport portal, or feedback portal. We’re always here to help!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed