Skip to content

Commit b8f60ab

Browse files
xaviergonzxaviergonz
committed
Fix for MaterialDesignFlatToggleButton
This is a fix for MaterialDesignFlatToggleButton so it can adapt to any kind of size (even non rectangular ones) by using a render scale transform instead of fixed values. The same could be considered for the action button.
1 parent b9ec6f7 commit b8f60ab

File tree

1 file changed

+87
-83
lines changed

1 file changed

+87
-83
lines changed

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

Lines changed: 87 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -177,94 +177,98 @@
177177
<Setter Property="Foreground" Value="{DynamicResource SecondaryAccentForegroundBrush}"/>
178178
</Style>
179179

180-
<Style x:Key="MaterialDesignFlatToggleButton" TargetType="{x:Type ToggleButton}">
181-
<Setter Property="Foreground" Value="#616161"/>
182-
<Setter Property="Background" Value="#e0e0e0"/>
183-
<Setter Property="Width" Value="40"/>
184-
<Setter Property="Height" Value="40"/>
185-
<Setter Property="FontSize" Value="18"/>
186-
<Setter Property="HorizontalContentAlignment" Value="Center"/>
187-
<Setter Property="VerticalContentAlignment" Value="Center"/>
188-
<Setter Property="Padding" Value="0"/>
189-
<Setter Property="Template">
190-
<Setter.Value>
191-
<ControlTemplate TargetType="{x:Type ToggleButton}">
192-
<Grid Clip="{Binding ElementName=UncheckedEllipse, Path=RenderedGeometry}" ClipToBounds="True">
193-
<VisualStateManager.VisualStateGroups>
194-
<VisualStateGroup x:Name="CommonStates">
195-
<VisualState x:Name="Normal"/>
196-
<VisualState x:Name="Disabled">
197-
<Storyboard>
198-
<DoubleAnimation Duration="0" To="0.23" Storyboard.TargetProperty="(UIElement.Opacity)" />
199-
</Storyboard>
200-
</VisualState>
201-
</VisualStateGroup>
202-
<VisualStateGroup x:Name="CheckStates">
203-
<VisualStateGroup.Transitions>
204-
<VisualTransition From="*" To="Checked">
205-
<Storyboard>
206-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse">
207-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.0" />
208-
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.1" />
209-
</DoubleAnimationUsingKeyFrames>
210-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckedEllipse">
211-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.0" />
212-
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.1" />
213-
</DoubleAnimationUsingKeyFrames>
214-
</Storyboard>
215-
</VisualTransition>
216-
<VisualTransition From="Checked" To="Unchecked">
217-
<Storyboard>
218-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse">
219-
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.0" />
220-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
221-
</DoubleAnimationUsingKeyFrames>
222-
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckedEllipse">
223-
<LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.0" />
224-
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
225-
</DoubleAnimationUsingKeyFrames>
226-
</Storyboard>
227-
</VisualTransition>
228-
</VisualStateGroup.Transitions>
229-
<VisualState x:Name="Checked">
230-
<Storyboard>
231-
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse"
232-
To="40" />
233-
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckedEllipse"
234-
To="40" />
235-
</Storyboard>
236-
</VisualState>
237-
<VisualState x:Name="Unchecked">
238-
<Storyboard>
239-
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Width)" Storyboard.TargetName="CheckedEllipse"
180+
<Style x:Key="MaterialDesignFlatToggleButton" TargetType="{x:Type ToggleButton}">
181+
<Setter Property="Foreground" Value="#616161"/>
182+
<Setter Property="Background" Value="#e0e0e0"/>
183+
<Setter Property="Width" Value="40"/>
184+
<Setter Property="Height" Value="40"/>
185+
<Setter Property="FontSize" Value="18"/>
186+
<Setter Property="HorizontalContentAlignment" Value="Center"/>
187+
<Setter Property="VerticalContentAlignment" Value="Center"/>
188+
<Setter Property="Padding" Value="0"/>
189+
<Setter Property="Template">
190+
<Setter.Value>
191+
<ControlTemplate TargetType="{x:Type ToggleButton}">
192+
<Grid ClipToBounds="True" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
193+
<VisualStateManager.VisualStateGroups>
194+
<VisualStateGroup x:Name="CommonStates">
195+
<VisualState x:Name="Normal"/>
196+
<VisualState x:Name="Disabled">
197+
<Storyboard>
198+
<DoubleAnimation Duration="0" To="0.23" Storyboard.TargetProperty="(UIElement.Opacity)" />
199+
</Storyboard>
200+
</VisualState>
201+
</VisualStateGroup>
202+
<VisualStateGroup x:Name="CheckStates">
203+
<VisualStateGroup.Transitions>
204+
<VisualTransition From="*" To="Checked">
205+
<Storyboard>
206+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="CheckedEllipseScale">
207+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.0" />
208+
<LinearDoubleKeyFrame Value="1.0" KeyTime="0:0:0.1" />
209+
</DoubleAnimationUsingKeyFrames>
210+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="CheckedEllipseScale">
211+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.0" />
212+
<LinearDoubleKeyFrame Value="1.0" KeyTime="0:0:0.1" />
213+
</DoubleAnimationUsingKeyFrames>
214+
</Storyboard>
215+
</VisualTransition>
216+
<VisualTransition From="Checked" To="Unchecked">
217+
<Storyboard>
218+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="CheckedEllipseScale">
219+
<LinearDoubleKeyFrame Value="1.0" KeyTime="0:0:0.0" />
220+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
221+
</DoubleAnimationUsingKeyFrames>
222+
<DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="CheckedEllipseScale">
223+
<LinearDoubleKeyFrame Value="1.0" KeyTime="0:0:0.0" />
224+
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.1" />
225+
</DoubleAnimationUsingKeyFrames>
226+
</Storyboard>
227+
</VisualTransition>
228+
</VisualStateGroup.Transitions>
229+
<VisualState x:Name="Checked">
230+
<Storyboard>
231+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="CheckedEllipseScale"
232+
To="1.0" />
233+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="CheckedEllipseScale"
234+
To="1.0" />
235+
</Storyboard>
236+
</VisualState>
237+
<VisualState x:Name="Unchecked">
238+
<Storyboard>
239+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="CheckedEllipseScale"
240240
To="0" />
241-
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(Control.Height)" Storyboard.TargetName="CheckedEllipse"
242-
To="0" />
243-
</Storyboard>
244-
</VisualState>
245-
</VisualStateGroup>
246-
</VisualStateManager.VisualStateGroups>
247-
<Ellipse Fill="Transparent" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" x:Name="HoverEllipse"
241+
<DoubleAnimation Duration="0" Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="CheckedEllipseScale"
242+
To="0" />
243+
</Storyboard>
244+
</VisualState>
245+
</VisualStateGroup>
246+
</VisualStateManager.VisualStateGroups>
247+
<Ellipse Fill="Transparent" x:Name="HoverEllipse"
248248
Stroke="Transparent" StrokeThickness="1" />
249-
<Ellipse Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" x:Name="CheckedEllipse" />
250-
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
251-
</Grid>
252-
<ControlTemplate.Triggers>
253-
<Trigger Property="IsMouseOver" Value="true">
254-
<Setter Property="Stroke" TargetName="HoverEllipse" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
255-
</Trigger>
256-
<!-- TODO
249+
<Ellipse Fill="{TemplateBinding Background}" x:Name="CheckedEllipse" RenderTransformOrigin="0.5, 0.5">
250+
<Ellipse.RenderTransform>
251+
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.0" ScaleY="1.0" x:Name="CheckedEllipseScale"/>
252+
</Ellipse.RenderTransform>
253+
</Ellipse>
254+
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
255+
</Grid>
256+
<ControlTemplate.Triggers>
257+
<Trigger Property="IsMouseOver" Value="true">
258+
<Setter Property="Stroke" TargetName="HoverEllipse" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
259+
</Trigger>
260+
<!-- TODO
257261
<Trigger Property="IsFocused" Value="True">
258262
<Setter Property="BorderBrush" TargetName="normal" Value="{Binding (Custom:ControlsHelper.FocusBorderBrush), RelativeSource={RelativeSource TemplatedParent}}"/>
259263
</Trigger>
260264
-->
261-
</ControlTemplate.Triggers>
262-
</ControlTemplate>
263-
</Setter.Value>
264-
</Setter>
265-
</Style>
266-
267-
<Style x:Key="MaterialDesignFlatPrimaryToggleButton" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignFlatToggleButton}">
265+
</ControlTemplate.Triggers>
266+
</ControlTemplate>
267+
</Setter.Value>
268+
</Setter>
269+
</Style>
270+
271+
<Style x:Key="MaterialDesignFlatPrimaryToggleButton" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignFlatToggleButton}">
268272
<Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}"/>
269273
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkBrush}"/>
270274
</Style>
@@ -576,4 +580,4 @@
576580
</Setter>
577581
</Style>
578582

579-
</ResourceDictionary>
583+
</ResourceDictionary>

0 commit comments

Comments
 (0)