From 82c4904a95c822f67c174b3107fe72a2f4b21f76 Mon Sep 17 00:00:00 2001
From: Corvin <43533385+corvinsz@users.noreply.github.com>
Date: Wed, 17 Jun 2026 19:51:10 +0200
Subject: [PATCH 1/2] feat: add new SegmentedListBox style

---
 .../Themes/MaterialDesignTheme.ListBox.xaml   | 150 ++++++++++++++++++
 1 file changed, 150 insertions(+)

diff --git a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ListBox.xaml b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ListBox.xaml
index 89ec715a60..0c7ad18a52 100644
--- a/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ListBox.xaml
+++ b/src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ListBox.xaml
@@ -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>

From 4aac5d603ffc84a89a1e31c2499a1f5ef41c9172 Mon Sep 17 00:00:00 2001
From: Corvin <43533385+corvinsz@users.noreply.github.com>
Date: Wed, 17 Jun 2026 19:51:55 +0200
Subject: [PATCH 2/2] docs: add examples of SegmentedListBoxStyle to demo app

---
 src/MainDemo.Wpf/Toggles.xaml             | 59 +++++++++++++++++++++
 src/MaterialDesign3.Demo.Wpf/Toggles.xaml | 63 +++++++++++++++++++++++
 2 files changed, 122 insertions(+)

diff --git a/src/MainDemo.Wpf/Toggles.xaml b/src/MainDemo.Wpf/Toggles.xaml
index b608c89285..823f2a9bd4 100644
--- a/src/MainDemo.Wpf/Toggles.xaml
+++ b/src/MainDemo.Wpf/Toggles.xaml
@@ -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" />
 
diff --git a/src/MaterialDesign3.Demo.Wpf/Toggles.xaml b/src/MaterialDesign3.Demo.Wpf/Toggles.xaml
index 2429ef3afd..9a72eac4c9 100644
--- a/src/MaterialDesign3.Demo.Wpf/Toggles.xaml
+++ b/src/MaterialDesign3.Demo.Wpf/Toggles.xaml
@@ -23,6 +23,7 @@
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
+      <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
 
     <Grid.ColumnDefinitions>
@@ -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">