Skip to content

Commit b4eacf6

Browse files
ButchersBoyButchersBoy
committed
flat icon toggle style
1 parent 9164c17 commit b4eacf6

File tree

2 files changed

+111
-5
lines changed

2 files changed

+111
-5
lines changed

‎MaterialDesignColors.WpfExample/Buttons.xaml

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,10 +146,42 @@
146146
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" Margin="0 0 8 8" />
147147
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" Margin="0 0 8 8" IsChecked="True" />
148148
</StackPanel>
149-
<StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Horizontal" Margin="0 8 0 0"
150-
HorizontalAlignment="Right">
151-
<Button Style="{StaticResource MaterialDesignFlatButton}" Click="ButtonBase_OnClick">ACCEPT</Button>
152-
<Button Style="{StaticResource MaterialDesignFlatButton}">CANCEL</Button>
153-
</StackPanel>
149+
<DockPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Margin="0 8 0 0">
150+
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal"
151+
HorizontalAlignment="Right">
152+
<Button Style="{StaticResource MaterialDesignFlatButton}" Click="ButtonBase_OnClick">ACCEPT</Button>
153+
<Button Style="{StaticResource MaterialDesignFlatButton}">CANCEL</Button>
154+
</StackPanel>
155+
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
156+
<ToggleButton Style="{StaticResource MaterialDesignFlatToggleButton}">
157+
<Viewbox Width="21" Height="21">
158+
<Canvas Width="24" Height="24">
159+
<Path Data="M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z"
160+
StrokeThickness="4"
161+
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}, Path=Foreground}" />
162+
</Canvas>
163+
</Viewbox>
164+
</ToggleButton>
165+
<ToggleButton Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}"
166+
Margin="8 0 0 0"
167+
IsChecked="True">
168+
<Viewbox Width="21" Height="21">
169+
<Canvas Width="24" Height="24">
170+
<Path Data="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
171+
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}, Path=Foreground}" />
172+
</Canvas>
173+
</Viewbox>
174+
</ToggleButton>
175+
<ToggleButton Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}"
176+
IsEnabled="False" Margin="8 0 0 0" >
177+
<Viewbox Width="21" Height="21">
178+
<Canvas Width="24" Height="24">
179+
<Path Data="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
180+
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}, Path=Foreground}" />
181+
</Canvas>
182+
</Viewbox>
183+
</ToggleButton>
184+
</StackPanel>
185+
</DockPanel>
154186
</Grid>
155187
</UserControl>

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ToggleButton.xaml

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,80 @@
139139
<Setter Property="Foreground" Value="{DynamicResource SecondaryAccentForegroundBrush}"/>
140140
</Style>
141141

142+
<Style x:Key="MaterialDesignFlatToggleButton" TargetType="{x:Type ToggleButton}">
143+
<Setter Property="Foreground" Value="#616161"/>
144+
<Setter Property="Background" Value="#e0e0e0"/>
145+
<Setter Property="Width" Value="40"/>
146+
<Setter Property="Height" Value="40"/>
147+
<Setter Property="FontSize" Value="18"/>
148+
<Setter Property="HorizontalContentAlignment" Value="Center"/>
149+
<Setter Property="VerticalContentAlignment" Value="Center"/>
150+
<Setter Property="Padding" Value="0"/>
151+
<Setter Property="Template">
152+
<Setter.Value>
153+
<ControlTemplate TargetType="{x:Type ToggleButton}">
154+
<Grid Clip="{Binding ElementName=UncheckedEllipse, Path=RenderedGeometry}" ClipToBounds="True">
155+
<VisualStateManager.VisualStateGroups>
156+
<VisualStateGroup x:Name="CommonStates">
157+
<VisualState x:Name="Normal"/>
158+
<VisualState x:Name="Disabled">
159+
<Storyboard>
160+
<DoubleAnimation Duration="0" To="0.23" Storyboard.TargetProperty="(UIElement.Opacity)" />
161+
</Storyboard>
162+
</VisualState>
163+
</VisualStateGroup>
164+
<VisualStateGroup x:Name="CheckStates">
165+
<VisualState x:Name="Checked">
166+
<Storyboard>
167+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse">
168+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.0" />
169+
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.1" />
170+
</DoubleAnimationUsingKeyFrames>
171+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckedEllipse">
172+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.0" />
173+
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.1" />
174+
</DoubleAnimationUsingKeyFrames>
175+
</Storyboard>
176+
</VisualState>
177+
<VisualState x:Name="Unchecked">
178+
<Storyboard>
179+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse">
180+
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.0" />
181+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
182+
</DoubleAnimationUsingKeyFrames>
183+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckedEllipse">
184+
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.0" />
185+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
186+
</DoubleAnimationUsingKeyFrames>
187+
</Storyboard>
188+
</VisualState>
189+
</VisualStateGroup>
190+
</VisualStateManager.VisualStateGroups>
191+
<Ellipse Fill="Transparent" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" x:Name="HoverEllipse"
192+
Stroke="Transparent" StrokeThickness="1" />
193+
<Ellipse Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" x:Name="CheckedEllipse" />
194+
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
195+
</Grid>
196+
<ControlTemplate.Triggers>
197+
<Trigger Property="IsMouseOver" Value="true">
198+
<Setter Property="Stroke" TargetName="HoverEllipse" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
199+
</Trigger>
200+
<!-- TODO
201+
<Trigger Property="IsFocused" Value="True">
202+
<Setter Property="BorderBrush" TargetName="normal" Value="{Binding (Custom:ControlsHelper.FocusBorderBrush), RelativeSource={RelativeSource TemplatedParent}}"/>
203+
</Trigger>
204+
-->
205+
</ControlTemplate.Triggers>
206+
</ControlTemplate>
207+
</Setter.Value>
208+
</Setter>
209+
</Style>
210+
211+
<Style x:Key="MaterialDesignFlatPrimaryToggleButton" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignFlatToggleButton}">
212+
<Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}"/>
213+
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkBrush}"/>
214+
</Style>
215+
142216
<Style x:Key="MaterialDesignSwitchToggleButton" TargetType="{x:Type ToggleButton}">
143217
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
144218
<Setter Property="BorderThickness" Value="1"/>

0 commit comments

Comments
 (0)