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

Merged
Keboo merged 3 commits into from
Jun 19, 2026
+319 −1
Merged

Add Segmented list box style #4072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 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
3564fdf
feat: add dedicated brush for SegmentedListBox background
Keboo Jun 19, 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
61 changes: 61 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,67 @@
</ListBox>
</smtx:XamlDisplay>

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

<smtx:XamlDisplay UniqueKey="toggle_buttons_44">
<ListBox SelectedIndex="0" Style="{StaticResource SegmentedListBox}"
VerticalAlignment="Center">
<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
65 changes: 65 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,70 @@
Grid.Column="0"
Margin="0,24,0,0"
Orientation="Horizontal">
<smtx:XamlDisplay UniqueKey="toggle_buttons_43">
<ListBox SelectedIndex="0" Style="{StaticResource SegmentedListBox}"
VerticalAlignment="Center">
<ListBoxItem>Male</ListBoxItem>
<ListBoxItem>Female</ListBoxItem>
<ListBoxItem>Diverse</ListBoxItem>
</ListBox>
</smtx:XamlDisplay>

<smtx:XamlDisplay UniqueKey="toggle_buttons_44">
<ListBox SelectedIndex="0" Style="{StaticResource SegmentedListBox}"
VerticalAlignment="Center">
<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
3 changes: 3 additions & 0 deletions src/MaterialDesignThemes.Wpf/ResourceDictionaryExtensions.g.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ private static partial void LoadThemeColors(ResourceDictionary resourceDictionar
theme.CheckBoxes.Off = GetColor(resourceDictionary, "MaterialDesign.Brush.CheckBox.Off", "MaterialDesignBodyLight", "MaterialDesignCheckBoxOff", "MaterialDesignTextBoxBorder");
theme.Chips.Background = GetColor(resourceDictionary, "MaterialDesign.Brush.Chip.Background", "MaterialDesignChipBackground");
theme.Chips.OutlineBorder = GetColor(resourceDictionary, "MaterialDesign.Brush.Chip.OutlineBorder");
theme.ListBoxes.SegmentedBackground = GetColor(resourceDictionary, "MaterialDesign.Brush.ListBox.SegmentedBackground", "MaterialDesignChipBackground");
theme.ColorZones.DarkBackground = GetColor(resourceDictionary, "MaterialDesign.Brush.ColorZone.DarkBackground");
theme.ColorZones.DarkForeground = GetColor(resourceDictionary, "MaterialDesign.Brush.ColorZone.DarkForeground");
theme.ColorZones.LightBackground = GetColor(resourceDictionary, "MaterialDesign.Brush.ColorZone.LightBackground");
Expand Down Expand Up @@ -144,6 +145,8 @@ private static partial void ApplyThemeColors(ResourceDictionary resourceDictiona
SetSolidColorBrush(resourceDictionary, "MaterialDesign.Brush.Chip.Background", theme.Chips.Background);
SetSolidColorBrush(resourceDictionary, "MaterialDesignChipBackground", theme.Chips.Background);
SetSolidColorBrush(resourceDictionary, "MaterialDesign.Brush.Chip.OutlineBorder", theme.Chips.OutlineBorder);
SetSolidColorBrush(resourceDictionary, "MaterialDesign.Brush.ListBox.SegmentedBackground", theme.ListBoxes.SegmentedBackground);
SetSolidColorBrush(resourceDictionary, "MaterialDesignChipBackground", theme.ListBoxes.SegmentedBackground);
SetSolidColorBrush(resourceDictionary, "MaterialDesign.Brush.ColorZone.DarkBackground", theme.ColorZones.DarkBackground);
SetSolidColorBrush(resourceDictionary, "MaterialDesign.Brush.ColorZone.DarkForeground", theme.ColorZones.DarkForeground);
SetSolidColorBrush(resourceDictionary, "MaterialDesign.Brush.ColorZone.LightBackground", theme.ColorZones.LightBackground);
Expand Down
20 changes: 20 additions & 0 deletions src/MaterialDesignThemes.Wpf/Theme.g.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ public Theme()
Cards = new(this);
CheckBoxes = new(this);
Chips = new(this);
ListBoxes = new(this);
ColorZones = new(this);
ComboBoxes = new(this);
DataGrids = new(this);
Expand Down Expand Up @@ -76,6 +77,8 @@ public ColorReference ValidationError

public Chip Chips { get; set; }

public ListBox ListBoxes { get; set; }

public ColorZone ColorZones { get; set; }

public ComboBox ComboBoxes { get; set; }
Expand Down Expand Up @@ -289,6 +292,23 @@ public ColorReference OutlineBorder

}

public class ListBox
{
private readonly Theme _theme;
public ListBox(Theme theme)
{
_theme = theme ?? throw new ArgumentNullException(nameof(theme));
}

private ColorReference _segmentedBackground;
public ColorReference SegmentedBackground
{
get => _theme.Resolve(_segmentedBackground);
set => _segmentedBackground = value;
}

}

public class ColorZone
{
private readonly Theme _theme;
Expand Down
2 changes: 2 additions & 0 deletions src/MaterialDesignThemes.Wpf/ThemeExtensions.g.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ public static partial void SetLightTheme(this Theme theme)
theme.CheckBoxes.Off = BaseThemeColors.Black500;
theme.Chips.Background = BaseThemeColors.Black50;
theme.Chips.OutlineBorder = BaseThemeColors.Black100;
theme.ListBoxes.SegmentedBackground = BaseThemeColors.Black50;
theme.ColorZones.DarkBackground = BaseThemeColors.Neutral100;
theme.ColorZones.DarkForeground = BaseThemeColors.Neutral900;
theme.ColorZones.LightBackground = BaseThemeColors.Neutral900;
Expand Down Expand Up @@ -127,6 +128,7 @@ public static partial void SetDarkTheme(this Theme theme)
theme.CheckBoxes.Off = BaseThemeColors.White500;
theme.Chips.Background = BaseThemeColors.White50;
theme.Chips.OutlineBorder = BaseThemeColors.White100;
theme.ListBoxes.SegmentedBackground = BaseThemeColors.White50;
theme.ColorZones.DarkBackground = BaseThemeColors.Neutral100;
theme.ColorZones.DarkForeground = BaseThemeColors.Neutral900;
theme.ColorZones.LightBackground = BaseThemeColors.Neutral900;
Expand Down
1 change: 1 addition & 0 deletions src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Dark.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<colors:StaticResource x:Key="MaterialDesign.Brush.CheckBox.Disabled" ResourceKey="Neutral300" />
<colors:StaticResource x:Key="MaterialDesign.Brush.CheckBox.UncheckedBorder" ResourceKey="White100" />
<colors:StaticResource x:Key="MaterialDesign.Brush.Chip.Background" ResourceKey="White50" />
<colors:StaticResource x:Key="MaterialDesign.Brush.ListBox.SegmentedBackground" ResourceKey="White50" />
<colors:StaticResource x:Key="MaterialDesign.Brush.Chip.OutlineBorder" ResourceKey="White100" />
<colors:StaticResource x:Key="MaterialDesign.Brush.ColorZone.DarkBackground" ResourceKey="Neutral100" />
<colors:StaticResource x:Key="MaterialDesign.Brush.ColorZone.DarkForeground" ResourceKey="Neutral900" />
Expand Down
1 change: 1 addition & 0 deletions src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Light.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<colors:StaticResource x:Key="MaterialDesign.Brush.CheckBox.Disabled" ResourceKey="Neutral700" />
<colors:StaticResource x:Key="MaterialDesign.Brush.CheckBox.UncheckedBorder" ResourceKey="Black100" />
<colors:StaticResource x:Key="MaterialDesign.Brush.Chip.Background" ResourceKey="Black50" />
<colors:StaticResource x:Key="MaterialDesign.Brush.ListBox.SegmentedBackground" ResourceKey="Black50" />
<colors:StaticResource x:Key="MaterialDesign.Brush.Chip.OutlineBorder" ResourceKey="Black100" />
<colors:StaticResource x:Key="MaterialDesign.Brush.ColorZone.DarkBackground" ResourceKey="Neutral100" />
<colors:StaticResource x:Key="MaterialDesign.Brush.ColorZone.DarkForeground" ResourceKey="Neutral900" />
Expand Down
Loading
Loading