Skip to content

Add Segmented list box style #4072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
corvinsz wants to merge 2 commits into
base: master
Choose a base branch
from
+272 −0
Open

Add Segmented list box style #4072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
82c4904
feat: add new SegmentedListBox style
corvinsz Jun 17, 2026
4aac5d6
docs: add examples of SegmentedListBoxStyle to demo app
corvinsz Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions src/MainDemo.Wpf/Toggles.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,6 +452,65 @@
</ListBox>
</smtx:XamlDisplay>

<WrapPanel Margin="0,24,0,0">
<smtx:XamlDisplay UniqueKey="toggle_buttons_43">
<ListBox SelectedIndex="0" Style="{StaticResource SegmentedListBox}">
<ListBoxItem>Male</ListBoxItem>
<ListBoxItem>Female</ListBoxItem>
<ListBoxItem>Diverse</ListBoxItem>
</ListBox>
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="toggle_buttons_44">
<ListBox SelectedIndex="0" Style="{StaticResource SegmentedListBox}">
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon VerticalAlignment="Center" Kind="ListBox" />
<TextBlock Text="List" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon VerticalAlignment="Center" Kind="FileTree" />
<TextBlock Text="Tree" />
</StackPanel>
</ListBoxItem>
</ListBox>
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="toggle_buttons_45">
<ListBox materialDesign:ListBoxItemAssist.CornerRadius="16"
BorderBrush="{DynamicResource MaterialDesign.Brush.Foreground}"
BorderThickness="1"
FontSize="20"
SelectedIndex="0"
Style="{StaticResource SegmentedListBox}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource SegmentedListBoxItem}">
<Setter Property="materialDesign:ListBoxItemAssist.SelectedFocusedBackground" Value="{DynamicResource MaterialDesign.Brush.Primary}" />
<Setter Property="materialDesign:ListBoxItemAssist.SelectedUnfocusedBackground" Value="{DynamicResource MaterialDesign.Brush.Primary}" />
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem>Monthly</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" Text="Yearly" />
<materialDesign:Chip Background="Red"
Content="-20%"
FontSize="18"
IconBackground="Red"
IconForeground="{DynamicResource MaterialDesign.Brush.Foreground}"
IsHitTestVisible="False">
<materialDesign:Chip.Icon>
<materialDesign:PackIcon Kind="Tag" />
</materialDesign:Chip.Icon>
</materialDesign:Chip>
</StackPanel>
</ListBoxItem>
</ListBox>
</smtx:XamlDisplay>
</WrapPanel>

<Rectangle Style="{StaticResource PageSectionSeparator}" />
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Tabs" />

Expand Down
63 changes: 63 additions & 0 deletions src/MaterialDesign3.Demo.Wpf/Toggles.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
Expand Down Expand Up @@ -286,6 +287,68 @@
Grid.Column="0"
Margin="0,24,0,0"
Orientation="Horizontal">
<smtx:XamlDisplay UniqueKey="toggle_buttons_43">
<ListBox SelectedIndex="0" Style="{StaticResource SegmentedListBox}">
<ListBoxItem>Male</ListBoxItem>
<ListBoxItem>Female</ListBoxItem>
<ListBoxItem>Diverse</ListBoxItem>
</ListBox>
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="toggle_buttons_44">
<ListBox SelectedIndex="0" Style="{StaticResource SegmentedListBox}">
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon VerticalAlignment="Center" Kind="ListBox" />
<TextBlock Text="List" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon VerticalAlignment="Center" Kind="FileTree" />
<TextBlock Text="Tree" />
</StackPanel>
</ListBoxItem>
</ListBox>
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="toggle_buttons_45">
<ListBox materialDesign:ListBoxItemAssist.CornerRadius="16"
BorderBrush="{DynamicResource MaterialDesign.Brush.Foreground}"
BorderThickness="1"
FontSize="20"
SelectedIndex="0"
Style="{StaticResource SegmentedListBox}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource SegmentedListBoxItem}">
<Setter Property="materialDesign:ListBoxItemAssist.SelectedFocusedBackground" Value="{DynamicResource MaterialDesign.Brush.Primary}" />
<Setter Property="materialDesign:ListBoxItemAssist.SelectedUnfocusedBackground" Value="{DynamicResource MaterialDesign.Brush.Primary}" />
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem>Monthly</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" Text="Yearly" />
<materialDesign:Chip Background="Red"
Content="-20%"
FontSize="18"
IconBackground="Red"
IconForeground="{DynamicResource MaterialDesign.Brush.Foreground}"
IsHitTestVisible="False">
<materialDesign:Chip.Icon>
<materialDesign:PackIcon Kind="Tag" />
</materialDesign:Chip.Icon>
</materialDesign:Chip>
</StackPanel>
</ListBoxItem>
</ListBox>
</smtx:XamlDisplay>
</StackPanel>

<StackPanel Grid.Row="6"
Grid.Column="0"
Margin="0,24,0,0"
Orientation="Horizontal">
<smtx:XamlDisplay Margin="5,0,0,0"
VerticalAlignment="Center"
UniqueKey="buttons_53">
Expand Down
150 changes: 150 additions & 0 deletions src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ListBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -959,4 +959,154 @@
</Style>

<!--#endregion-->

<Style x:Key="SegmentedListBoxItem" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesign.Brush.ListBoxItem.Border}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Cursor" Value="{Binding Path=(wpf:ListBoxItemAssist.Cursor), RelativeSource={RelativeSource AncestorType=ListBox}}" />
<Setter Property="Foreground" Value="{DynamicResource MaterialDesign.Brush.Foreground}" />
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, FallbackValue=Left}" />
<Setter Property="Padding" Value="14,6,14,6" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Margin="4"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ClipToBounds="{TemplateBinding ClipToBounds}"
CornerRadius="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=(wpf:ListBoxItemAssist.CornerRadius)}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3" To="Normal">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState Name="Normal" />
<VisualState Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MouseOverBorder"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.6" />
</VisualStateGroup.Transitions>
<VisualState Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState Name="Unselected" />
<VisualState Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectedUnfocusedBorder"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>

<Border x:Name="MouseOverBorder"
Background="{Binding Path=(wpf:ListBoxItemAssist.HoverBackground), RelativeSource={RelativeSource TemplatedParent}}"
CornerRadius="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=(wpf:ListBoxItemAssist.CornerRadius)}"
Opacity="0" />
<Border x:Name="SelectedBorder"
Background="{Binding Path=(wpf:ListBoxItemAssist.SelectedFocusedBackground), RelativeSource={RelativeSource TemplatedParent}}"
CornerRadius="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=(wpf:ListBoxItemAssist.CornerRadius)}"
Opacity="0" />
<Border x:Name="SelectedUnfocusedBorder"
Background="{Binding Path=(wpf:ListBoxItemAssist.SelectedUnfocusedBackground), RelativeSource={RelativeSource TemplatedParent}}"
CornerRadius="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=(wpf:ListBoxItemAssist.CornerRadius)}"
Opacity="0" />
<wpf:Ripple x:Name="Ripple"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ClipToBounds="True"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
Feedback="{TemplateBinding Foreground, Converter={x:Static converters:BrushRoundConverter.Instance}}"
Focusable="False"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<wpf:Ripple.Clip>
<MultiBinding Converter="{x:Static converters:BorderClipConverter.Instance}">
<Binding ElementName="MouseOverBorder" Path="ActualWidth" />
<Binding ElementName="MouseOverBorder" Path="ActualHeight" />
<Binding ElementName="MouseOverBorder" Path="CornerRadius" />
<Binding ElementName="MouseOverBorder" Path="BorderThickness" />
</MultiBinding>
</wpf:Ripple.Clip>
</wpf:Ripple>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Ripple" Property="Opacity" Value=".92" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value=".56" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, FallbackValue=Center}" />
<Setter Property="wpf:ListBoxItemAssist.HoverBackground" Value="{Binding Foreground, RelativeSource={RelativeSource Self}, Converter={x:Static converters:BrushOpacityConverter.Instance}, ConverterParameter=0.1}" />
<Setter Property="wpf:ListBoxItemAssist.SelectedFocusedBackground" Value="{Binding Foreground, RelativeSource={RelativeSource Self}, Converter={x:Static converters:BrushOpacityConverter.Instance}, ConverterParameter=0.18}" />
<Setter Property="wpf:ListBoxItemAssist.SelectedUnfocusedBackground" Value="{Binding Foreground, RelativeSource={RelativeSource Self}, Converter={x:Static converters:BrushOpacityConverter.Instance}, ConverterParameter=0.09}" />
</Style>

<Style x:Key="SegmentedListBox" TargetType="ListBox">
<Setter Property="Background" Value="{DynamicResource MaterialDesign.Brush.Chip.Background}" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="ItemContainerStyle" Value="{StaticResource SegmentedListBoxItem}" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
wpf:ElevationAssist.Elevation="{TemplateBinding wpf:ElevationAssist.Elevation}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ClipToBounds="{TemplateBinding ClipToBounds}"
CornerRadius="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=(wpf:ListBoxItemAssist.CornerRadius)}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="wpf:ListBoxItemAssist.CornerRadius" Value="8" />
</Style>

</ResourceDictionary>
Loading