Skip to content

Commit a98be99

Browse files
ButchersBoyButchersBoy
committed
enhanced control over visual feedback
1 parent ba94d85 commit a98be99

File tree

5 files changed

+55
-44
lines changed

5 files changed

+55
-44
lines changed

‎MaterialDesignColors.WpfExample/ColorZoneWindow.xaml

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,25 +42,29 @@
4242
<ColumnDefinition Width="*" />
4343
<ColumnDefinition Width="Auto" />
4444
</Grid.ColumnDefinitions>
45-
<Viewbox Width="16" Height="16" VerticalAlignment="Center" Opacity=".56">
46-
<Canvas Width="24" Height="24">
47-
<Path Data="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
48-
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:ColorZone}, Path=Foreground}" />
49-
</Canvas>
50-
</Viewbox>
51-
<TextBox Grid.Column="1" Margin="8 0 0 0" wpf:TextField.Hint="Build a search bar" MinWidth="200" />
52-
<Viewbox Grid.Column="2" Width="16" Height="16" Margin="8 0 0 0" Opacity=".56">
53-
<Canvas Width="24" Height="24">
54-
<Path Data="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"
55-
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:ColorZone}, Path=Foreground}" />
56-
</Canvas>
57-
</Viewbox>
45+
<Button Style="{DynamicResource MaterialDesignToolButton}">
46+
<Viewbox Width="16" Height="16" VerticalAlignment="Center" Opacity=".56">
47+
<Canvas Width="24" Height="24">
48+
<Path Data="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
49+
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:ColorZone}, Path=Foreground}" />
50+
</Canvas>
51+
</Viewbox>
52+
</Button>
53+
<TextBox Grid.Column="1" Margin="8 0 0 0" wpf:TextField.Hint="Build a search bar" MinWidth="200" VerticalAlignment="Center" />
54+
<Button Style="{DynamicResource MaterialDesignToolButton}" Grid.Column="2">
55+
<Viewbox Width="16" Height="16" Margin="8 0 0 0" Opacity=".56">
56+
<Canvas Width="24" Height="24">
57+
<Path Data="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"
58+
Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=wpf:ColorZone}, Path=Foreground}" />
59+
</Canvas>
60+
</Viewbox>
61+
</Button>
5862
</Grid>
5963
</wpf:ColorZone>
6064
</StackPanel>
6165
</wpf:ColorZone>
6266
<TextBlock Margin="0 16 0 0" FontSize="10">Add in a corner radius and shadow.</TextBlock>
63-
<wpf:ColorZone Mode="PrimaryDark" Padding="16" CornerRadius="3" Effect="{DynamicResource MaterialDesignShadowDepth3}">
67+
<wpf:ColorZone Mode="PrimaryDark" Padding="16" CornerRadius="3" Effect="{DynamicResource MaterialDesignShadowDepth3}" Margin="2">
6468
<StackPanel Orientation="Horizontal">
6569
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
6670
<TextBlock VerticalAlignment="Center" Margin="16 0 0 0">Material Design In XAML Toolkit</TextBlock>

‎MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@
220220
<Compile Include="Converters\TextFieldHintVisibilityConverter.cs" />
221221
<Compile Include="TimePicker.cs" />
222222
<Compile Include="ToolTipAssist.cs" />
223+
<Compile Include="VisualFeedbackAssist.cs" />
223224
<Compile Include="VisualFeedbackContentControl.cs" />
224225
<EmbeddedResource Include="Properties\Resources.resx">
225226
<Generator>ResXFileCodeGenerator</Generator>

‎MaterialDesignThemes.Wpf/Themes/Generic.xaml

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,14 @@
2828
<Setter Property="HorizontalAlignment" Value="Stretch" />
2929
<Setter Property="VerticalAlignment" Value="Stretch" />
3030
<Setter Property="Background" Value="Transparent" />
31+
<Setter Property="IsTabStop" Value="False" />
32+
<Setter Property="ClipToBounds" Value="{Binding RelativeSource={RelativeSource Self}, Path=(local:VisualFeedbackAssist.ClipToBounds)}" />
3133
<Setter Property="Feedback" Value="{Binding RelativeSource={RelativeSource Self}, Path=Foreground}" />
3234
<Setter Property="Template">
3335
<Setter.Value>
3436
<ControlTemplate TargetType="{x:Type local:VisualFeedbackContentControl}">
35-
<Grid ClipToBounds="True" Background="Transparent">
37+
<Grid Background="Transparent">
3638
<Canvas IsHitTestVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
37-
<Ellipse Opacity="0" Width="60" Height="60" Canvas.Left="{TemplateBinding MouseX}" Canvas.Top="{TemplateBinding MouseY}"
38-
x:Name="HoverEllipse" Fill="{TemplateBinding Feedback, Converter={StaticResource BrushToRadialGradientBrushConverter}}">
39-
<Ellipse.RenderTransform>
40-
<TransformGroup>
41-
<ScaleTransform/>
42-
<SkewTransform/>
43-
<RotateTransform/>
44-
<TranslateTransform X="-30" Y="-30"/>
45-
</TransformGroup>
46-
</Ellipse.RenderTransform>
47-
</Ellipse>
4839
<Ellipse x:Name="ClickEllipse" Fill="{TemplateBinding Feedback}" Opacity="0" Width="0" Height="0" Canvas.Left="{TemplateBinding MouseLeftButtonDownX}" Canvas.Top="{TemplateBinding MouseLeftButtonDownY}"
4940
RenderTransformOrigin=".5,.5">
5041
<Ellipse.RenderTransform>
@@ -66,24 +57,6 @@
6657
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
6758
</Grid>
6859
<ControlTemplate.Triggers>
69-
<EventTrigger RoutedEvent="MouseEnter">
70-
<BeginStoryboard>
71-
<Storyboard TargetName="HoverEllipse">
72-
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)">
73-
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value=".56"/>
74-
</DoubleAnimationUsingKeyFrames>
75-
</Storyboard>
76-
</BeginStoryboard>
77-
</EventTrigger>
78-
<EventTrigger RoutedEvent="MouseLeave">
79-
<BeginStoryboard>
80-
<Storyboard TargetName="HoverEllipse">
81-
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)">
82-
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value=".0"/>
83-
</DoubleAnimationUsingKeyFrames>
84-
</Storyboard>
85-
</BeginStoryboard>
86-
</EventTrigger>
8760
<EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
8861
<BeginStoryboard>
8962
<Storyboard TargetName="ClickEllipse">
@@ -290,13 +263,15 @@
290263
<Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
291264
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
292265
<Setter Property="VerticalAlignment" Value="Top" />
266+
<Setter Property="IsTabStop" Value="False" />
293267
<Setter Property="Template">
294268
<Setter.Value>
295269
<ControlTemplate TargetType="{x:Type local:ColorZone}">
296270
<Border Background="{TemplateBinding Background}"
297271
BorderBrush="{TemplateBinding BorderBrush}"
298272
BorderThickness="{TemplateBinding BorderThickness}"
299273
CornerRadius="{TemplateBinding CornerRadius}"
274+
ClipToBounds="True"
300275
>
301276
<ContentPresenter Content="{TemplateBinding Content}"
302277
ContentTemplate="{TemplateBinding ContentTemplate}"

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,17 @@
118118
</Setter>
119119
</Style>
120120

121+
<Style x:Key="MaterialDesignToolButton" TargetType="{x:Type Button}" BasedOn="{StaticResource MaterialDesignFlatButton}">
122+
<Setter Property="Foreground" Value="#616161"/>
123+
<!--
124+
<Setter Property="Width" Value="40"/>
125+
<Setter Property="Height" Value="40"/>
126+
-->
127+
<Setter Property="FontSize" Value="18"/>
128+
<Setter Property="Padding" Value="4"/>
129+
<Setter Property="wpf:VisualFeedbackAssist.ClipToBounds" Value="False"/>
130+
</Style>
131+
121132
<Style x:Key="MaterialDesignFloatingActionButton" TargetType="{x:Type Button}">
122133
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
123134
<Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}"/>

‎MaterialDesignThemes.Wpf/VisualFeedbackAssist.cs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
using System.Windows;
2+
3+
namespace MaterialDesignThemes.Wpf
4+
{
5+
public static class VisualFeedbackAssist
6+
{
7+
public static readonly DependencyProperty ClipToBoundsProperty = DependencyProperty.RegisterAttached(
8+
"ClipToBounds", typeof (bool), typeof (VisualFeedbackAssist), new FrameworkPropertyMetadata(true, FrameworkPropertyMetadataOptions.Inherits));
9+
10+
public static void SetClipToBounds(DependencyObject element, bool value)
11+
{
12+
element.SetValue(ClipToBoundsProperty, value);
13+
}
14+
15+
public static bool GetClipToBounds(DependencyObject element)
16+
{
17+
return (bool) element.GetValue(ClipToBoundsProperty);
18+
}
19+
}
20+
}

0 commit comments

Comments
 (0)