Style for radio buttons inspired by Dragablz tabs (#598)

Style for radio buttons inspired by Drabablz tabs

Author: mgnslndh

MainDemo.Wpf/Buttons.xaml

@@ -287,7 +287,7 @@
                                />
                 </Grid>
             </smtx:XamlDisplay>
-            
+
             <smtx:XamlDisplay Key="buttons_27" Margin="5 0 0 0">
                 <Grid Width="124">
                     <Button Style="{StaticResource MaterialDesignRaisedButton}"
@@ -501,19 +501,19 @@
                 </smtx:XamlDisplay>
             </StackPanel>
             <StackPanel Grid.Column="0" Grid.Row="3" Margin="0 16 0 0" Orientation="Horizontal">
-                <smtx:XamlDisplay Key="buttons_53" Margin="5 0 0 0">
+                <smtx:XamlDisplay Key="buttons_53" Margin="5 0 0 0" VerticalAlignment="Center">
                     <ToggleButton Style="{StaticResource MaterialDesignFlatToggleButton}" ToolTip="MaterialDesignFlatToggleButton">
                         <materialDesign:PackIcon Kind="Paperclip" Height="21" Width="21" />
                     </ToggleButton>
                 </smtx:XamlDisplay>
-                <smtx:XamlDisplay Key="buttons_54" Margin="8 0 0 0" >
+                <smtx:XamlDisplay Key="buttons_54" Margin="8 0 0 0" VerticalAlignment="Center" >
                     <ToggleButton Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}"
                                   ToolTip="MaterialDesignFlatPrimaryToggleButton"
                                   IsChecked="True">
                         <materialDesign:PackIcon Kind="Heart" Height="21" Width="21" />
                     </ToggleButton>
                 </smtx:XamlDisplay>
-                <smtx:XamlDisplay Key="buttons_55" Margin="8 0 0 0">
+                <smtx:XamlDisplay Key="buttons_55" Margin="8 0 0 0" VerticalAlignment="Center">
                     <ToggleButton Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}"
                           ToolTip="MaterialDesignFlatPrimaryToggleButton"
                           IsEnabled="False">
@@ -566,6 +566,26 @@
                     </ListBoxItem>
                 </ListBox>
             </smtx:XamlDisplay>
+
+            <StackPanel Grid.Column="1" Grid.Row="3" Margin="2">
+                <smtx:XamlDisplay Key="buttons_60" HorizontalAlignment="Left">
+                    <StackPanel Orientation="Horizontal" Margin="4">
+                        <RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="True" Content="FIRST"/>
+                        <RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="False" Content="SECOND"/>
+                        <RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="False" Content="THIRD"/>
+                    </StackPanel>
+                </smtx:XamlDisplay>
+                <smtx:XamlDisplay Key="buttons_61" HorizontalAlignment="Left">
+                    <materialDesign:ColorZone Mode="PrimaryMid">
+                        <StackPanel Orientation="Horizontal" Margin="2" >
+                            <RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="True" Content="FIRST"/>
+                            <RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="False" Content="SECOND"/>
+                            <RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="False" Content="THIRD"/>
+                        </StackPanel>
+                    </materialDesign:ColorZone>
+                </smtx:XamlDisplay>
+
+            </StackPanel>
         </Grid>
 
         <Border Grid.Row="9" Margin="0 16 0 0" BorderThickness="0 1 0 0" BorderBrush="{DynamicResource MaterialDesignDivider}" />

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.RadioButton.xaml

@@ -1,4 +1,5 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="MaterialDesignTheme.ValidationErrorTemplate.xaml" />
@@ -13,6 +14,7 @@
             </Setter.Value>
         </Setter>
     </Style>
+
     <Style x:Key="FocusVisual">
         <Setter Property="Control.Template">
             <Setter.Value>
@@ -22,6 +24,7 @@
             </Setter.Value>
         </Setter>
     </Style>
+
     <Style x:Key="MaterialDesignRadioButton" TargetType="{x:Type RadioButton}">
         <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
         <Setter Property="BorderThickness" Value="1"/>
@@ -214,4 +217,48 @@
         </Setter>
     </Style>
 
+    <Style x:Key="MaterialDesignTabRadioButton"  TargetType="{x:Type RadioButton}">
+        <Setter Property="FocusVisualStyle" Value="{StaticResource MaterialDesignFocusVisual}"/>
+        <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource SecondaryAccentBrush}"/>
+        <Setter Property="Padding" Value="16 4 16 4"/>
+        <Setter Property="Height" Value="32" />
+        <Setter Property="MinWidth" Value="80" />
+        <Setter Property="wpf:RippleAssist.Feedback" Value="{DynamicResource MaterialDesignFlatButtonRipple}" />
+        <Setter Property="TextBlock.FontWeight" Value="Medium"/>
+        <Setter Property="TextBlock.FontSize" Value="14"/>
+        <Setter Property="HorizontalContentAlignment" Value="Center"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type RadioButton}">
+                    <Grid SnapsToDevicePixels="true">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+                        <Border Background="{TemplateBinding Background}">
+                            <wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"    
+                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
+                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        Padding="{TemplateBinding Padding}" 
+                                        x:Name="contentPresenter"
+                                        Opacity=".82"
+                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                        </Border>
+                        <Border x:Name="SelectionHighlightBorder" Background="{TemplateBinding BorderBrush}" Height="2"
+                                Grid.Row="1"
+                                Visibility="Hidden"/>
+                    </Grid>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsChecked" Value="True">
+                            <Setter TargetName="contentPresenter" Property="Opacity" Value="1"/>
+                            <Setter TargetName="SelectionHighlightBorder" Property="Visibility" Value="Visible" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>