Skip to content

Commit 895c614

Browse files
ButchersBoyButchersBoy
committed
Merge pull request #209 from xaviergonz/betterripplefx
Better Ripple FX
2 parents 5e15b01 + 47c7ecf commit 895c614

File tree

4 files changed

+56
-13
lines changed

4 files changed

+56
-13
lines changed

‎MaterialDesignThemes.MahApps/Themes/MaterialDesignTheme.MahApps.Defaults.xaml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3-
xmlns:local="clr-namespace:MaterialDesignThemes.MahApps.Themes"
43
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls">
54

65
<ResourceDictionary.MergedDictionaries>

‎MaterialDesignThemes.MahApps/Themes/MaterialDesignTheme.MahApps.RangeSlider.xaml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3-
xmlns:local="clr-namespace:MaterialDesignThemes.MahApps.Themes"
43
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls">
54

65
<ResourceDictionary.MergedDictionaries>
7-
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Slider.xaml" />
6+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Slider.xaml" />
87
</ResourceDictionary.MergedDictionaries>
98

109
<ControlTemplate x:Key="MaterialDesignMahAppsRangeSliderHorizontal"

‎MaterialDesignThemes.Wpf/Ripple.cs

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
using System.Windows.Controls;
66
using System.Windows.Input;
77
using System.Windows.Media;
8+
using System.Windows.Media.Animation;
89

910
namespace MaterialDesignThemes.Wpf
1011
{
@@ -35,7 +36,28 @@ public Ripple()
3536
private static void MouseButtonEventHandler(object sender, MouseButtonEventArgs e)
3637
{
3738
foreach (var ripple in PressedInstances)
38-
VisualStateManager.GoToState(ripple, TemplateStateNormal, false);
39+
{
40+
// adjust the transition scale time according to the current animated scale
41+
var scaleTrans = ripple.Template.FindName("ScaleTransform", ripple) as ScaleTransform;
42+
if (scaleTrans != null)
43+
{
44+
double currentScale = scaleTrans.ScaleX;
45+
var newTime = TimeSpan.FromMilliseconds(300 * (1.0 - currentScale));
46+
47+
// change the scale animation according to the current scale
48+
var scaleXKeyFrame = ripple.Template.FindName("MousePressedToNormalScaleXKeyFrame", ripple) as EasingDoubleKeyFrame;
49+
if (scaleXKeyFrame != null)
50+
{
51+
scaleXKeyFrame.KeyTime = KeyTime.FromTimeSpan(newTime);
52+
}
53+
var scaleYKeyFrame = ripple.Template.FindName("MousePressedToNormalScaleYKeyFrame", ripple) as EasingDoubleKeyFrame;
54+
if (scaleYKeyFrame != null) {
55+
scaleYKeyFrame.KeyTime = KeyTime.FromTimeSpan(newTime);
56+
}
57+
}
58+
59+
VisualStateManager.GoToState(ripple, TemplateStateNormal, true);
60+
}
3961
PressedInstances.Clear();
4062
}
4163

‎MaterialDesignThemes.Wpf/Themes/Generic.xaml

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@
1818
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Clock.xaml" />
1919
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
2020
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.RatingBar.xaml" />
21-
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TimePicker.xaml" />
21+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TimePicker.xaml" />
2222
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
2323
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Font.xaml" />
2424
</ResourceDictionary.MergedDictionaries>
2525

2626
<!-- set up default styles for our custom Material Design in XAML Toolkit controls -->
2727
<Style TargetType="{x:Type local:Clock}" BasedOn="{StaticResource MaterialDesignClock}" />
28-
<Style TargetType="{x:Type local:PopupBox}" BasedOn="{StaticResource MaterialDesignPopupBox}" />
28+
<Style TargetType="{x:Type local:PopupBox}" BasedOn="{StaticResource MaterialDesignPopupBox}" />
2929
<Style TargetType="{x:Type local:TimePicker}" BasedOn="{StaticResource MaterialDesignTimePicker}" />
3030

3131
<converters:BrushToRadialGradientBrushConverter x:Key="BrushToRadialGradientBrushConverter" />
@@ -50,15 +50,15 @@
5050
<Storyboard>
5151
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="ScaleTransform">
5252
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
53-
<EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="1">
53+
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1">
5454
<EasingDoubleKeyFrame.EasingFunction>
5555
<SineEase EasingMode="EaseIn" />
5656
</EasingDoubleKeyFrame.EasingFunction>
5757
</EasingDoubleKeyFrame>
5858
</DoubleAnimationUsingKeyFrames>
5959
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="ScaleTransform">
6060
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
61-
<EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="1">
61+
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1">
6262
<EasingDoubleKeyFrame.EasingFunction>
6363
<SineEase EasingMode="EaseIn" />
6464
</EasingDoubleKeyFrame.EasingFunction>
@@ -67,7 +67,6 @@
6767
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ClickEllipse">
6868
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
6969
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value=".26"/>
70-
<EasingDoubleKeyFrame KeyTime="0:0:2.2" Value=".26"/>
7170
</DoubleAnimationUsingKeyFrames>
7271
</Storyboard>
7372
</VisualTransition>
@@ -92,12 +91,35 @@
9291
</DoubleAnimationUsingKeyFrames>
9392
</Storyboard>
9493
</VisualTransition>
95-
</VisualStateGroup.Transitions>
94+
<VisualTransition From="MousePressed" To="Normal">
95+
<Storyboard>
96+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="ScaleTransform">
97+
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="1" x:Name="MousePressedToNormalScaleXKeyFrame"/>
98+
<EasingDoubleKeyFrame KeyTime="0:0:0.50" Value="1"/>
99+
<EasingDoubleKeyFrame KeyTime="0:0:0.50" Value="0"/>
100+
</DoubleAnimationUsingKeyFrames>
101+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="ScaleTransform">
102+
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="1" x:Name="MousePressedToNormalScaleYKeyFrame"/>
103+
<EasingDoubleKeyFrame KeyTime="0:0:0.50" Value="1"/>
104+
<EasingDoubleKeyFrame KeyTime="0:0:0.50" Value="0"/>
105+
</DoubleAnimationUsingKeyFrames>
106+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ClickEllipse">
107+
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value=".26"/>
108+
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value=".26"/>
109+
<EasingDoubleKeyFrame KeyTime="0:0:0.50" Value="0">
110+
<EasingDoubleKeyFrame.EasingFunction>
111+
<SineEase EasingMode="EaseOut" />
112+
</EasingDoubleKeyFrame.EasingFunction>
113+
</EasingDoubleKeyFrame>
114+
</DoubleAnimationUsingKeyFrames>
115+
</Storyboard>
116+
</VisualTransition>
117+
</VisualStateGroup.Transitions>
96118
<VisualState x:Name="Normal">
97119
<Storyboard>
98-
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ClickEllipse" To="0" Duration="0:0:0.6"/>
99-
<DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="ScaleTransform" To="1" Duration="0:0:0.6"/>
100-
<DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="ScaleTransform" To="1" Duration="0:0:0.6"/>
120+
<DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="ScaleTransform" To="0"/>
121+
<DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="ScaleTransform" To="0"/>
122+
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ClickEllipse" To="0"/>
101123
</Storyboard>
102124
</VisualState>
103125
<VisualState x:Name="MousePressed">
@@ -116,6 +138,7 @@
116138
</VisualState>
117139
</VisualStateGroup>
118140
</VisualStateManager.VisualStateGroups>
141+
119142
<Canvas IsHitTestVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
120143
<Ellipse x:Name="ClickEllipse" Fill="{TemplateBinding Feedback}" Opacity="0"
121144
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=RippleSize}"

0 commit comments

Comments
 (0)