Skip to content

Commit 49b362a

Browse files
corvinszcorvinsz
authored
Add hover halo for CheckBox and RadioButton (#3919)
* added hovering halo for checkbox * added hovering halo for radioButton and constant (InteractionHoverOpacity) for hover opacity
1 parent be0b22b commit 49b362a

File tree

3 files changed

+51
-12
lines changed

3 files changed

+51
-12
lines changed

‎src/MaterialDesignThemes.Wpf/Constants.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@ public static class Constants
1313
public static readonly Thickness DefaultOutlinedBorderActiveThickness = new(2);
1414
public const double TextBoxNotEnabledOpacity = 0.56;
1515
public const double ComboBoxArrowSize = 8;
16+
public const double InteractionHoverOpacity = 0.15;
1617
}

‎src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.CheckBox.xaml‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
<Setter Property="Background" Value="{DynamicResource MaterialDesign.Brush.Primary}" />
6868
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesign.Brush.Primary}" />
6969
<Setter Property="BorderThickness" Value="1" />
70+
<Setter Property="Cursor" Value="Hand" />
7071
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
7172
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground), FallbackValue=Black}" />
7273
<Setter Property="Template">
@@ -103,11 +104,12 @@
103104
<ColumnDefinition Width="Auto" />
104105
<ColumnDefinition Width="*" />
105106
</Grid.ColumnDefinitions>
106-
<Viewbox Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:CheckBoxAssist.CheckBoxSize)}"
107+
<Viewbox x:Name="IconHost"
108+
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:CheckBoxAssist.CheckBoxSize)}"
107109
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:CheckBoxAssist.CheckBoxSize)}"
108110
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
109111
FlowDirection="LeftToRight">
110-
<Canvas Width="24" Height="24">
112+
<Canvas Width="24" Height="24" Background="Transparent">
111113
<Path x:Name="Graphic"
112114
Data="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"
113115
Fill="{DynamicResource MaterialDesign.Brush.ForegroundLight}" />
@@ -131,6 +133,19 @@
131133
</Ellipse>
132134
</Canvas>
133135
</Viewbox>
136+
137+
<!-- halo shown when hovering -->
138+
<Ellipse x:Name="halo"
139+
Grid.Column="0"
140+
HorizontalAlignment="Center"
141+
VerticalAlignment="Center"
142+
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:CheckBoxAssist.CheckBoxSize), Converter={x:Static converters:MathConverter.MultiplyInstance}, ConverterParameter=1.6}"
143+
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:CheckBoxAssist.CheckBoxSize), Converter={x:Static converters:MathConverter.MultiplyInstance}, ConverterParameter=1.6}"
144+
Fill="{TemplateBinding Foreground}"
145+
Opacity="0"
146+
IsHitTestVisible="False"
147+
RenderTransformOrigin="0.5,0.5" />
148+
134149
<ContentPresenter x:Name="contentPresenter"
135150
Grid.Column="1"
136151
Margin="{TemplateBinding Padding}"
@@ -152,7 +167,7 @@
152167
</MultiDataTrigger>
153168
<Trigger Property="HasContent" Value="true">
154169
<Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}" />
155-
<Setter Property="Padding" Value="4,2,0,0" />
170+
<Setter Property="Padding" Value="0,2,0,0" />
156171
</Trigger>
157172
<Trigger Property="IsPressed" Value="true" />
158173
<Trigger Property="IsChecked" Value="true">
@@ -171,6 +186,9 @@
171186
<Setter TargetName="Graphic" Property="Fill" Value="{DynamicResource MaterialDesign.Brush.ValidationError}" />
172187
<Setter TargetName="contentPresenter" Property="Control.Foreground" Value="{DynamicResource MaterialDesign.Brush.ValidationError}" />
173188
</Trigger>
189+
<Trigger SourceName="IconHost" Property="IsMouseOver" Value="True">
190+
<Setter TargetName="halo" Property="Opacity" Value="{x:Static wpf:Constants.InteractionHoverOpacity}" />
191+
</Trigger>
174192
</ControlTemplate.Triggers>
175193
</ControlTemplate>
176194
</Setter.Value>
@@ -242,7 +260,7 @@
242260
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:CheckBoxAssist.CheckBoxSize)}"
243261
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
244262
FlowDirection="LeftToRight">
245-
<Canvas Width="24" Height="24">
263+
<Canvas Width="24" Height="24" Background="Transparent">
246264
<Path x:Name="Graphic"
247265
Data="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"
248266
Fill="{TemplateBinding Foreground}" />

‎src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.RadioButton.xaml‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3-
xmlns:system="clr-namespace:System;assembly=mscorlib"
43
xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters"
4+
xmlns:system="clr-namespace:System;assembly=mscorlib"
55
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf">
66
<ResourceDictionary.MergedDictionaries>
77
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ValidationErrorTemplate.xaml" />
@@ -39,6 +39,7 @@
3939
<Setter Property="Background" Value="{DynamicResource MaterialDesign.Brush.Primary}" />
4040
<Setter Property="BorderBrush" Value="{DynamicResource MaterialDesign.Brush.Primary}" />
4141
<Setter Property="BorderThickness" Value="1" />
42+
<Setter Property="Cursor" Value="Hand" />
4243
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
4344
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground), FallbackValue=Black}" />
4445
<Setter Property="Template">
@@ -75,20 +76,23 @@
7576
<ColumnDefinition Width="Auto" />
7677
<ColumnDefinition Width="*" />
7778
</Grid.ColumnDefinitions>
78-
<Viewbox Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:RadioButtonAssist.RadioButtonSize)}"
79-
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:RadioButtonAssist.RadioButtonSize)}"
80-
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
81-
<Canvas Width="24" Height="24">
79+
<Viewbox x:Name="IconHost"
80+
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:RadioButtonAssist.RadioButtonSize)}"
81+
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:RadioButtonAssist.RadioButtonSize)}"
82+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
83+
<Canvas Width="24"
84+
Height="24"
85+
Background="Transparent">
8286
<Path x:Name="Graphic"
8387
Data="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
8488
Fill="{DynamicResource MaterialDesign.Brush.RadioButton.Outline}" />
8589
<Ellipse x:Name="InteractionEllipse"
8690
Canvas.Left="12"
8791
Canvas.Top="12"
88-
IsHitTestVisible="False"
8992
Width="0"
9093
Height="0"
9194
Fill="{TemplateBinding Foreground}"
95+
IsHitTestVisible="False"
9296
Opacity="0"
9397
RenderTransformOrigin="0.5,0.5">
9498
<Ellipse.RenderTransform>
@@ -102,6 +106,19 @@
102106
</Ellipse>
103107
</Canvas>
104108
</Viewbox>
109+
110+
<!-- halo shown when hovering -->
111+
<Ellipse x:Name="halo"
112+
Grid.Column="0"
113+
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:RadioButtonAssist.RadioButtonSize), Converter={x:Static converters:MathConverter.MultiplyInstance}, ConverterParameter=1.6}"
114+
Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:RadioButtonAssist.RadioButtonSize), Converter={x:Static converters:MathConverter.MultiplyInstance}, ConverterParameter=1.6}"
115+
HorizontalAlignment="Center"
116+
VerticalAlignment="Center"
117+
Fill="{TemplateBinding Foreground}"
118+
IsHitTestVisible="False"
119+
Opacity="0"
120+
RenderTransformOrigin="0.5,0.5" />
121+
105122
<ContentPresenter x:Name="contentPresenter"
106123
Grid.Column="1"
107124
Margin="{TemplateBinding Padding}"
@@ -117,7 +134,7 @@
117134
</EventTrigger>
118135
<Trigger Property="HasContent" Value="true">
119136
<Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}" />
120-
<Setter Property="Padding" Value="4,2,0,0" />
137+
<Setter Property="Padding" Value="0,2,0,0" />
121138
</Trigger>
122139
<Trigger Property="IsEnabled" Value="false">
123140
<Setter Property="Opacity" Value="0.26" />
@@ -136,6 +153,9 @@
136153
<Setter TargetName="Graphic" Property="Fill" Value="{DynamicResource MaterialDesign.Brush.ValidationError}" />
137154
<Setter TargetName="contentPresenter" Property="Control.Foreground" Value="{DynamicResource MaterialDesign.Brush.ValidationError}" />
138155
</Trigger>
156+
<Trigger SourceName="IconHost" Property="IsMouseOver" Value="True">
157+
<Setter TargetName="halo" Property="Opacity" Value="{x:Static wpf:Constants.InteractionHoverOpacity}" />
158+
</Trigger>
139159
</ControlTemplate.Triggers>
140160
</ControlTemplate>
141161
</Setter.Value>
@@ -213,10 +233,10 @@
213233
<Ellipse x:Name="InteractionEllipse"
214234
Canvas.Left="12"
215235
Canvas.Top="12"
216-
IsHitTestVisible="False"
217236
Width="0"
218237
Height="0"
219238
Fill="{TemplateBinding Foreground}"
239+
IsHitTestVisible="False"
220240
Opacity="0"
221241
RenderTransformOrigin="0.5,0.5">
222242
<Ellipse.RenderTransform>

0 commit comments

Comments
 (0)