Merge pull request #4053 from MaterialDesignInXAML/keboo/add-materialdesigntoolbartogglebutton-st

Add MaterialDesign toolbar toggle button style

Author: Keboo

src/MainDemo.Wpf/MenusAndToolBars.xaml

@@ -341,7 +341,9 @@
 
           <Separator />
 
-          <ToggleButton />
+          <ToggleButton Content="{materialDesign:PackIcon Kind=FormatStrikethroughVariant}"
+                        IsChecked="True"
+                        ToolTip="MaterialDesignToolBarToggleButton" />
         </ToolBar>
       </ToolBarTray>
     </smtx:XamlDisplay>

src/MaterialDesign3.Demo.Wpf/MenusAndToolBars.xaml

@@ -341,7 +341,9 @@
 
           <Separator />
 
-          <ToggleButton />
+          <ToggleButton Content="{materialDesign:PackIcon Kind=FormatStrikethroughVariant}"
+                        IsChecked="True"
+                        ToolTip="MaterialDesignToolBarToggleButton" />
         </ToolBar>
       </ToolBarTray>
     </smtx:XamlDisplay>

src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ToolBar.xaml

@@ -312,11 +312,68 @@
          BasedOn="{StaticResource MaterialDesignTextBox}">
     <Setter Property="Margin" Value="8,0,8,0" />
   </Style>
+  <Style x:Key="MaterialDesignToolBarToggleButton" TargetType="{x:Type ToggleButton}">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="Transparent" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Foreground" Value="{DynamicResource MaterialDesign.Brush.Foreground}" />
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+    <Setter Property="Margin" Value="0" />
+    <Setter Property="MinWidth" Value="54" />
+    <Setter Property="Padding" Value="16" />
+    <Setter Property="SnapsToDevicePixels" Value="True" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate TargetType="{x:Type ToggleButton}">
+          <Border Margin="{TemplateBinding Margin}"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  ClipToBounds="{TemplateBinding ClipToBounds}"
+                  CornerRadius="2">
+            <Grid>
+              <Border x:Name="MouseOverBorder"
+                      Background="{TemplateBinding Foreground, Converter={x:Static converters:BrushRoundConverter.Instance}}"
+                      Opacity="0" />
+              <Border x:Name="SelectedBackgroundBorder"
+                      Background="{DynamicResource MaterialDesign.Brush.ListBoxItem.Selected}"
+                      Opacity="0" />
+              <wpf:Ripple x:Name="Ripple"
+                          Padding="{TemplateBinding Padding}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          Content="{TemplateBinding Content}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Feedback="{TemplateBinding Foreground, Converter={x:Static converters:BrushRoundConverter.Instance}}"
+                          Focusable="False"
+                          Opacity=".56"
+                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+            </Grid>
+          </Border>
+          <ControlTemplate.Triggers>
+            <Trigger Property="IsChecked" Value="true">
+              <Setter TargetName="SelectedBackgroundBorder" Property="Opacity" Value="1" />
+              <Setter TargetName="Ripple" Property="Opacity" Value=".92" />
+            </Trigger>
+            <Trigger Property="IsMouseOver" Value="true">
+              <Setter TargetName="MouseOverBorder" Property="Opacity" Value=".03" />
+            </Trigger>
+            <Trigger Property="IsKeyboardFocused" Value="true">
+              <Setter TargetName="MouseOverBorder" Property="Opacity" Value=".03" />
+            </Trigger>
+            <Trigger Property="IsEnabled" Value="false">
+              <Setter Property="Opacity" Value=".56" />
+            </Trigger>
+          </ControlTemplate.Triggers>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+    <Setter Property="TextBlock.FontWeight" Value="DemiBold" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+  </Style>
   <Style x:Key="{x:Static ToolBar.ToggleButtonStyleKey}"
          TargetType="{x:Type ToggleButton}"
-         BasedOn="{StaticResource MaterialDesignSwitchToggleButton}">
-    <Setter Property="Margin" Value="8,0,8,0" />
-  </Style>
+         BasedOn="{StaticResource MaterialDesignToolBarToggleButton}" />
 
   <Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button">
     <Setter Property="BorderThickness" Value="1" />

tests/MaterialDesignThemes.UITests/WPF/ToolBars/ToolBarTests.cs

@@ -55,4 +55,5 @@ public async Task ToolBar_OverflowButton_InheritsCustomBackground()
 
         recorder.Success();
     }
+
 }