Skip to content

Commit 5f5c2aa

Browse files
l1pton17l1pton17
committed
Add togglebutton ripple flowing
Now ripple in ToggleButton flows up to button
1 parent 4cef829 commit 5f5c2aa

File tree

1 file changed

+54
-21
lines changed

1 file changed

+54
-21
lines changed

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

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -221,8 +221,10 @@
221221
<Setter.Value>
222222
<ControlTemplate TargetType="{x:Type ToggleButton}">
223223
<ControlTemplate.Resources>
224+
<SineEase x:Key="RippleEasingFunction" EasingMode="EaseInOut"/>
225+
224226
<Storyboard x:Key="Checked">
225-
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Thumb">
227+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
226228
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
227229
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="23.5">
228230
<EasingDoubleKeyFrame.EasingFunction>
@@ -231,8 +233,24 @@
231233
</EasingDoubleKeyFrame>
232234
</DoubleAnimationUsingKeyFrames>
233235
</Storyboard>
234-
<Storyboard x:Key="Unchecked">
235-
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Thumb">
236+
<Storyboard x:Key="ShowRipple">
237+
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
238+
EasingFunction="{StaticResource RippleEasingFunction}"
239+
To="0.26" Duration="0"/>
240+
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
241+
EasingFunction="{StaticResource RippleEasingFunction}"
242+
From="1" To="2.5" Duration="0:0:0.2"/>
243+
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
244+
EasingFunction="{StaticResource RippleEasingFunction}"
245+
From="1" To="2.5" Duration="0:0:0.2"/>
246+
</Storyboard>
247+
<Storyboard x:Key="HideRipple">
248+
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
249+
EasingFunction="{StaticResource RippleEasingFunction}"
250+
To="0" Duration="0:0:0.3"/>
251+
</Storyboard>
252+
<Storyboard x:Key="Unchecked">
253+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
236254
<EasingDoubleKeyFrame KeyTime="0" Value="23.5"/>
237255
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
238256
<EasingDoubleKeyFrame.EasingFunction>
@@ -244,23 +262,33 @@
244262
</ControlTemplate.Resources>
245263
<Viewbox Width="34">
246264
<Grid>
247-
<Rectangle x:Name="Track" Fill="Black" HorizontalAlignment="Left" Height="15" Margin="4.211,5,4.211,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="40" RadiusY="7.5" RadiusX="7.5" Opacity="0.26"/>
248-
<wpf:Ripple StayOnCenter="True"
249-
ClipToBounds="False"
250-
RippleSizeMultiplier="0.75"
251-
wpf:RippleAssist.ClipToBounds="False"
252-
x:Name="RippleWrapper">
253-
<Ellipse x:Name="Thumb" Fill="#FFFAFAFA" HorizontalAlignment="Left" Height="25" Margin="0,0,0,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="25" RenderTransformOrigin="0.5,0.5" Effect="{DynamicResource MaterialDesignShadowDepth1}">
254-
<Ellipse.RenderTransform>
255-
<TransformGroup>
256-
<ScaleTransform/>
257-
<SkewTransform/>
258-
<RotateTransform/>
259-
<TranslateTransform/>
260-
</TransformGroup>
261-
</Ellipse.RenderTransform>
262-
</Ellipse>
263-
</wpf:Ripple>
265+
<Rectangle x:Name="Track"
266+
Fill="Black" HorizontalAlignment="Left" Height="15" Margin="4.211,5,4.211,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="40" RadiusY="7.5" RadiusX="7.5" Opacity="0.26"/>
267+
268+
<Grid x:Name="ThumbHolder"
269+
HorizontalAlignment="Left" VerticalAlignment="Top">
270+
<Ellipse x:Name="RippleThumb"
271+
Fill="{DynamicResource PrimaryHueLightBrush}"
272+
Height="25" Width="25"
273+
Opacity="0.26"
274+
Margin="0"
275+
HorizontalAlignment="Center" VerticalAlignment="Center"
276+
RenderTransformOrigin="0.5,0.5">
277+
<Ellipse.RenderTransform>
278+
<ScaleTransform ScaleX="1" ScaleY="1"/>
279+
</Ellipse.RenderTransform>
280+
</Ellipse>
281+
<Ellipse x:Name="Thumb"
282+
Fill="#FFFAFAFA" Stroke="{x:Null}"
283+
HorizontalAlignment="Center" VerticalAlignment="Center"
284+
Width="25" Height="25"
285+
Margin="0,0,0,0"
286+
RenderTransformOrigin="0.5,0.5"
287+
Effect="{DynamicResource MaterialDesignShadowDepth1}"/>
288+
<Grid.RenderTransform>
289+
<TranslateTransform X="0" Y="0"/>
290+
</Grid.RenderTransform>
291+
</Grid>
264292
</Grid>
265293
</Viewbox>
266294
<ControlTemplate.Triggers>
@@ -277,7 +305,12 @@
277305
<Trigger Property="Button.IsDefaulted" Value="true"/>
278306
<Trigger Property="IsMouseOver" Value="true"/>
279307
<Trigger Property="IsPressed" Value="true">
280-
<Setter TargetName="RippleWrapper" Property="IsActive" Value="True"/>
308+
<Trigger.EnterActions>
309+
<BeginStoryboard Storyboard="{StaticResource ShowRipple}"/>
310+
</Trigger.EnterActions>
311+
<Trigger.ExitActions>
312+
<BeginStoryboard Storyboard="{StaticResource HideRipple}"/>
313+
</Trigger.ExitActions>
281314
</Trigger>
282315
<Trigger Property="IsEnabled" Value="false">
283316
<Setter TargetName="Thumb" Property="Fill" Value="#BDBDBD" />

0 commit comments

Comments
 (0)