Skip to content

Commit 227e2e4

Browse files
l1pton17l1pton17
committed
Ripple works without "hack"
1) Now in OnApplyTemplate ripple checks templatedparent and if it is ButtonBase, bind IsPressed to IsActive. So now we don't need change to subscribe on IsPressed trigger in XAML! 2) Add RippleAssist.StayOnCenter and RippleAssist.RippleSizeMultiplier attached properties.
1 parent 6f9d4d6 commit 227e2e4

File tree

9 files changed

+82
-79
lines changed

9 files changed

+82
-79
lines changed

‎MainDemo.Wpf/Cards.xaml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,17 @@
3939
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center">A great way to keep fit and forget about the constant grind of IT.</TextBlock>
4040
</StackPanel>
4141
<StackPanel HorizontalAlignment="Right" Grid.Row="2" Orientation="Horizontal" Margin="8">
42-
<Button Style="{StaticResource MaterialDesignToolButton}" Width="30" Padding="2 0 2 0">
42+
<Button Style="{StaticResource MaterialDesignToolButton}" Width="30" Padding="2 0 2 0"
43+
wpf:RippleAssist.StayOnCenter="True">
4344
<Viewbox Width="16" Height="16">
4445
<Canvas Width="24" Height="24">
4546
<Path Data="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"
4647
Fill="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}}, Path=Foreground}" />
4748
</Canvas>
4849
</Viewbox>
4950
</Button>
50-
<Button Style="{StaticResource MaterialDesignToolButton}" Width="30" Padding="2 0 2 0">
51+
<Button Style="{StaticResource MaterialDesignToolButton}" Width="30" Padding="2 0 2 0"
52+
wpf:RippleAssist.StayOnCenter="True">
5153
<Viewbox Width="16" Height="16">
5254
<Canvas Width="24" Height="24">
5355
<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"

‎MainDemo.Wpf/ColorZones.xaml

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
xmlns:local="clr-namespace:MaterialDesignColors.WpfExample"
77
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
88
mc:Ignorable="d"
9-
d:DesignHeight="300" d:DesignWidth="300">
9+
d:DesignHeight="800" d:DesignWidth="600">
1010
<ScrollViewer>
1111
<StackPanel Margin="16">
1212
<TextBlock FontSize="16">Colour Zones</TextBlock>
@@ -18,7 +18,8 @@
1818
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
1919
<TextBlock VerticalAlignment="Center" Margin="16 0 0 0">Material Design In XAML Toolkit</TextBlock>
2020
</StackPanel>
21-
<Button Style="{DynamicResource MaterialDesignToolForegroundButton}" DockPanel.Dock="Right" HorizontalAlignment="Right">
21+
<Button Style="{DynamicResource MaterialDesignToolForegroundButton}" DockPanel.Dock="Right" HorizontalAlignment="Right"
22+
wpf:RippleAssist.StayOnCenter="True">
2223
<Viewbox Width="16" Height="16">
2324
<Canvas Width="24" Height="24">
2425
<Path Data="M2,21L23,12L2,3V10L17,12L2,14V21Z" Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=Foreground}" />
@@ -36,7 +37,8 @@
3637
</wpf:ColorZone>
3738
<TextBlock Margin="0 16 0 0" FontSize="10">Use primary mid colours, and nest colour zones!</TextBlock>
3839
<wpf:ColorZone Mode="PrimaryMid" Padding="16">
39-
<StackPanel Orientation="Horizontal">
40+
<StackPanel Orientation="Horizontal"
41+
wpf:RippleAssist.StayOnCenter="True">
4042
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
4143
<wpf:ColorZone Mode="Standard" Padding="8 4 8 4" CornerRadius="2" Panel.ZIndex="1"
4244
Margin="16 0 0 0"

‎MainDemo.Wpf/MainWindow.xaml.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ public MainWindow()
1111
{
1212
InitializeComponent();
1313
}
14-
}
14+
}
1515
}

‎MaterialDesignThemes.Wpf/Ripple.cs

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
using System.Threading.Tasks;
77
using System.Windows;
88
using System.Windows.Controls;
9+
using System.Windows.Controls.Primitives;
910
using System.Windows.Data;
1011
using System.Windows.Documents;
1112
using System.Windows.Documents.DocumentStructures;
@@ -41,7 +42,7 @@ private void OnSizeChanged(object sender, SizeChangedEventArgs sizeChangedEventA
4142

4243
double width, height;
4344

44-
if (StayOnCenter && innerContent != null)
45+
if (RippleAssist.GetStayOnCenter(this) && innerContent != null)
4546
{
4647
width = innerContent.ActualWidth;
4748
height = innerContent.ActualHeight;
@@ -54,16 +55,7 @@ private void OnSizeChanged(object sender, SizeChangedEventArgs sizeChangedEventA
5455

5556
double radius = Math.Sqrt(Math.Pow(width, 2) + Math.Pow(height, 2));
5657

57-
RippleSize = 2 * radius * RippleSizeMultiplier;
58-
}
59-
60-
public static readonly DependencyProperty StayOnCenterProperty = DependencyProperty.Register(
61-
"StayOnCenter", typeof(bool), typeof(Ripple), new PropertyMetadata(false));
62-
63-
public bool StayOnCenter
64-
{
65-
get { return (bool)GetValue(StayOnCenterProperty); }
66-
set { SetValue(StayOnCenterProperty, value); }
58+
RippleSize = 2 * radius * RippleAssist.GetRippleSizeMultiplier(this);
6759
}
6860

6961
public static readonly DependencyProperty FeedbackProperty = DependencyProperty.Register(
@@ -78,8 +70,8 @@ public Brush Feedback
7870
protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e)
7971
{
8072
var point = e.GetPosition(this);
81-
82-
if (StayOnCenter)
73+
74+
if (RippleAssist.GetStayOnCenter(this))
8375
{
8476
var innerContent = (Content as FrameworkElement);
8577

@@ -106,15 +98,6 @@ protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e)
10698
base.OnPreviewMouseLeftButtonDown(e);
10799
}
108100

109-
public static readonly DependencyProperty RippleSizeMultiplierProperty = DependencyProperty.Register(
110-
"RippleSizeMultiplier", typeof(double), typeof(Ripple), new PropertyMetadata(1.0));
111-
112-
public double RippleSizeMultiplier
113-
{
114-
get { return (double)GetValue(RippleSizeMultiplierProperty); }
115-
set { SetValue(RippleSizeMultiplierProperty, value); }
116-
}
117-
118101
private static readonly DependencyPropertyKey RippleSizePropertyKey =
119102
DependencyProperty.RegisterReadOnly(
120103
"RippleSize", typeof(double), typeof(Ripple),
@@ -182,6 +165,17 @@ public override void OnApplyTemplate()
182165
{
183166
base.OnApplyTemplate();
184167

168+
var button = (TemplatedParent as ButtonBase);
169+
if (button != null)
170+
{
171+
Binding isPressedBinding = new Binding
172+
{
173+
Path = new PropertyPath("IsPressed"),
174+
Source = button
175+
};
176+
this.SetBinding(Ripple.IsActiveProperty, isPressedBinding);
177+
}
178+
185179
VisualStateManager.GoToState(this, TemplateStateNormal, false);
186180
}
187181
}

‎MaterialDesignThemes.Wpf/RippleAssist.cs

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ namespace MaterialDesignThemes.Wpf
44
{
55
public static class RippleAssist
66
{
7+
#region ClipToBound
8+
79
public static readonly DependencyProperty ClipToBoundsProperty = DependencyProperty.RegisterAttached(
810
"ClipToBounds", typeof (bool), typeof (RippleAssist), new FrameworkPropertyMetadata(true, FrameworkPropertyMetadataOptions.Inherits));
911

@@ -15,6 +17,43 @@ public static void SetClipToBounds(DependencyObject element, bool value)
1517
public static bool GetClipToBounds(DependencyObject element)
1618
{
1719
return (bool) element.GetValue(ClipToBoundsProperty);
18-
}
20+
}
21+
22+
#endregion
23+
24+
#region StayOnCenter
25+
26+
public static readonly DependencyProperty StayOnCenterProperty = DependencyProperty.RegisterAttached(
27+
"StayOnCenter", typeof(bool), typeof(RippleAssist), new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.Inherits));
28+
29+
public static void SetStayOnCenter(DependencyObject element, bool value)
30+
{
31+
element.SetValue(StayOnCenterProperty, value);
32+
}
33+
34+
public static bool GetStayOnCenter(DependencyObject element)
35+
{
36+
return (bool)element.GetValue(StayOnCenterProperty);
37+
}
38+
39+
#endregion
40+
41+
#region RippleSizeMultiplier
42+
43+
public static readonly DependencyProperty RippleSizeMultiplierProperty = DependencyProperty.RegisterAttached(
44+
"RippleSizeMultiplier", typeof(double), typeof(RippleAssist), new FrameworkPropertyMetadata(1.0, FrameworkPropertyMetadataOptions.Inherits));
45+
46+
public static void SetRippleSizeMultiplier(DependencyObject element, double value)
47+
{
48+
element.SetValue(RippleSizeMultiplierProperty, value);
49+
}
50+
51+
public static double GetRippleSizeMultiplier(DependencyObject element)
52+
{
53+
return (double)element.GetValue(RippleSizeMultiplierProperty);
54+
}
55+
56+
#endregion
57+
1958
}
2059
}

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

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,7 @@
7070
</TransformGroup>
7171
</Border.RenderTransform>
7272
</Border>
73-
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
74-
x:Name="RippleWrapper"
73+
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
7574
Feedback="White"
7675
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
7776
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -82,9 +81,6 @@
8281
<Trigger Property="IsDefaulted" Value="true">
8382
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
8483
</Trigger>
85-
<Trigger Property="IsPressed" Value="True">
86-
<Setter TargetName="RippleWrapper" Property="IsActive" Value="True"/>
87-
</Trigger>
8884
<Trigger Property="IsMouseOver" Value="true">
8985
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource AttentionToActionBrush}" />
9086
</Trigger>
@@ -167,9 +163,8 @@
167163
</Border.RenderTransform>
168164
</Border>
169165
<Border Background="{TemplateBinding Background}" x:Name="border" CornerRadius="2">
170-
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
171-
x:Name="RippleWrapper"
172-
Feedback="{DynamicResource MaterialDesignFlatButtonRipple}"
166+
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
167+
Feedback="{DynamicResource MaterialDesignFlatButtonRipple}"
173168
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
174169
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
175170
Padding="{TemplateBinding Padding}"
@@ -183,9 +178,6 @@
183178
<Trigger Property="IsMouseOver" Value="true">
184179
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource AttentionToActionBrush}" />
185180
</Trigger>
186-
<Trigger Property="IsPressed" Value="True">
187-
<Setter TargetName="RippleWrapper" Property="IsActive" Value="True"/>
188-
</Trigger>
189181
<Trigger Property="IsEnabled" Value="false">
190182
<Setter Property="Opacity" Value="0.23"/>
191183
</Trigger>
@@ -205,17 +197,13 @@
205197
<Setter Property="Template">
206198
<Setter.Value>
207199
<ControlTemplate TargetType="Button">
208-
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
209-
x:Name="RippleWrapper"
210-
Feedback="{DynamicResource MaterialDesignFlatButtonRipple}"
211-
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
212-
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
213-
Padding="{TemplateBinding Padding}"
214-
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
200+
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
201+
Feedback="{DynamicResource MaterialDesignFlatButtonRipple}"
202+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
203+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
204+
Padding="{TemplateBinding Padding}"
205+
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
215206
<ControlTemplate.Triggers>
216-
<Trigger Property="IsPressed" Value="True">
217-
<Setter TargetName="RippleWrapper" Property="IsActive" Value="True"/>
218-
</Trigger>
219207
</ControlTemplate.Triggers>
220208
</ControlTemplate>
221209
</Setter.Value>
@@ -243,8 +231,7 @@
243231
<Grid>
244232
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Effect="{DynamicResource MaterialDesignShadowDepth1}"
245233
x:Name="border" />
246-
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
247-
x:Name="RippleWrapper"
234+
<wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"
248235
Feedback="White"
249236
Clip="{Binding ElementName=GeometryEllipse, Path=RenderedGeometry}" ClipToBounds="True"
250237
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -257,9 +244,6 @@
257244
<Trigger Property="IsDefaulted" Value="true">
258245
<Setter Property="Stroke" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
259246
</Trigger>
260-
<Trigger Property="IsPressed" Value="True">
261-
<Setter TargetName="RippleWrapper" Property="IsActive" Value="True"/>
262-
</Trigger>
263247
<Trigger Property="IsEnabled" Value="false">
264248
<Setter Property="Opacity" Value="0.23"/>
265249
</Trigger>

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

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -295,17 +295,12 @@
295295
</VisualState>
296296
</VisualStateGroup>
297297
</VisualStateManager.VisualStateGroups>
298-
<wpf:Ripple x:Name="RippleWrapper" HorizontalAlignment="Center" VerticalAlignment="Center">
298+
<wpf:Ripple HorizontalAlignment="Center" VerticalAlignment="Center">
299299
<Viewbox Height="12" Margin="8">
300300
<Path x:Name="path" Data="M288.75,232.25 L288.75,240.625 L283,236.625 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" />
301301
</Viewbox>
302302
</wpf:Ripple>
303303
</Grid>
304-
<ControlTemplate.Triggers>
305-
<Trigger Property="IsPressed" Value="True">
306-
<Setter TargetName="RippleWrapper" Property="IsActive" Value="True"/>
307-
</Trigger>
308-
</ControlTemplate.Triggers>
309304
</ControlTemplate>
310305
<ControlTemplate x:Key="NextButtonTemplate" TargetType="{x:Type Button}">
311306
<Grid Cursor="Hand">
@@ -320,17 +315,12 @@
320315
</VisualState>
321316
</VisualStateGroup>
322317
</VisualStateManager.VisualStateGroups>
323-
<wpf:Ripple x:Name="RippleWrapper" HorizontalAlignment="Center" VerticalAlignment="Center">
318+
<wpf:Ripple HorizontalAlignment="Center" VerticalAlignment="Center">
324319
<Viewbox Height="12" Margin="8">
325320
<Path x:Name="path" Data="M282.875,231.875 L282.875,240.375 L288.625,236 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" />
326321
</Viewbox>
327322
</wpf:Ripple>
328323
</Grid>
329-
<ControlTemplate.Triggers>
330-
<Trigger Property="IsPressed" Value="True">
331-
<Setter TargetName="RippleWrapper" Property="IsActive" Value="True"/>
332-
</Trigger>
333-
</ControlTemplate.Triggers>
334324
</ControlTemplate>
335325
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="{x:Type Button}">
336326
<Grid Cursor="Hand">

0 commit comments

Comments
 (0)