Skip to content

Commit 3bc3a3e

Browse files
mou-hazmou-haz
committed
improved calender view focus visuals
1 parent 34dc6e9 commit 3bc3a3e

File tree

1 file changed

+49
-11
lines changed

1 file changed

+49
-11
lines changed

‎source/iNKORE.UI.WPF.Modern/Themes/Controls/Calendar.xaml‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,33 @@
1717
</ResourceDictionary>
1818
</ResourceDictionary.MergedDictionaries>
1919

20+
<Style x:Key="EllipticalFocusStyle" BasedOn="{StaticResource {x:Static SystemParameters.FocusVisualStyleKey}}">
21+
<Setter Property="Control.Template">
22+
<Setter.Value>
23+
<ControlTemplate>
24+
<Grid>
25+
<Grid.Width>
26+
<MultiBinding Converter="{StaticResource RoundMathConverter}">
27+
<Binding Path="ActualWidth" RelativeSource="{RelativeSource TemplatedParent}" />
28+
<Binding Path="ActualHeight" RelativeSource="{RelativeSource TemplatedParent}" />
29+
</MultiBinding>
30+
</Grid.Width>
31+
<Grid.Height>
32+
<MultiBinding Converter="{StaticResource RoundMathConverter}">
33+
<Binding Path="ActualWidth" RelativeSource="{RelativeSource TemplatedParent}" />
34+
<Binding Path="ActualHeight" RelativeSource="{RelativeSource TemplatedParent}" />
35+
</MultiBinding>
36+
</Grid.Height>
37+
<Ellipse Stroke="{TemplateBinding chelper:FocusVisualHelper.FocusVisualSecondaryBrush}"
38+
StrokeThickness="1" />
39+
<Ellipse Stroke="{TemplateBinding chelper:FocusVisualHelper.FocusVisualPrimaryBrush}"
40+
StrokeThickness="2" />
41+
</Grid>
42+
</ControlTemplate>
43+
</Setter.Value>
44+
</Setter>
45+
</Style>
46+
2047
<Style x:Key="DefaultCalendarItemStyle" TargetType="CalendarItem">
2148
<Setter Property="OverridesDefaultStyle" Value="True" />
2249
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -38,7 +65,7 @@
3865
<TextBlock Style="{StaticResource WeekDayNameStyle}" Text="{Binding}" />
3966
</DataTemplate>
4067
</ControlTemplate.Resources>
41-
<Grid x:Name="PART_Root" SnapsToDevicePixels="True">
68+
<Grid x:Name="PART_Root" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
4269
<Grid.Resources>
4370
<Style
4471
x:Key="HeaderNavigationButtonStyle"
@@ -168,25 +195,25 @@
168195
<ColumnDefinition Width="Auto" />
169196
</Grid.ColumnDefinitions>
170197
<Button
198+
KeyboardNavigation.TabIndex="0"
171199
x:Name="PART_HeaderButton"
172200
HorizontalContentAlignment="Left"
173-
Focusable="False"
174201
Style="{StaticResource HeaderNavigationButtonStyle}" />
175202
<Button
176203
x:Name="PART_PreviousButton"
204+
KeyboardNavigation.TabIndex="1"
177205
Grid.Column="1"
178206
Margin="{DynamicResource CalendarViewNavigationPreviousButtonMargin}"
179207
HorizontalContentAlignment="Center"
180208
Content="&#xE2BC;"
181-
Focusable="False"
182209
Style="{StaticResource NavigationButtonStyle}" />
183210
<Button
184211
x:Name="PART_NextButton"
212+
KeyboardNavigation.TabIndex="2"
185213
Grid.Column="2"
186214
Margin="{DynamicResource CalendarViewNavigationNextButtonMargin}"
187215
HorizontalContentAlignment="Center"
188216
Content="&#xF260;"
189-
Focusable="False"
190217
Style="{StaticResource NavigationButtonStyle}" />
191218
</Grid>
192219
<Border
@@ -207,7 +234,10 @@
207234
x:Name="PART_MonthView"
208235
RenderTransformOrigin="0.5,0.5"
209236
TextElement.Foreground="{DynamicResource CalendarViewCalendarItemForeground}"
210-
Visibility="Visible">
237+
Visibility="Visible"
238+
KeyboardNavigation.TabNavigation="Once"
239+
KeyboardNavigation.TabIndex="3"
240+
Margin="3,0">
211241
<Grid.ColumnDefinitions>
212242
<ColumnDefinition Width="*" />
213243
<ColumnDefinition Width="*" />
@@ -233,7 +263,9 @@
233263
<Grid
234264
x:Name="PART_YearView"
235265
RenderTransformOrigin="0.5,0.5"
236-
Visibility="Hidden">
266+
Visibility="Collapsed"
267+
KeyboardNavigation.TabNavigation="Once"
268+
KeyboardNavigation.TabIndex="3">
237269
<Grid.ColumnDefinitions>
238270
<ColumnDefinition Width="*" />
239271
<ColumnDefinition Width="*" />
@@ -273,6 +305,9 @@
273305
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="PART_MonthView" Storyboard.TargetProperty="IsEnabled">
274306
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
275307
</BooleanAnimationUsingKeyFrames>
308+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_MonthView" Storyboard.TargetProperty="Visibility">
309+
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Hidden}" />
310+
</ObjectAnimationUsingKeyFrames>
276311
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_MonthView" Storyboard.TargetProperty="Opacity">
277312
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" />
278313
</DoubleAnimationUsingKeyFrames>
@@ -293,6 +328,9 @@
293328
KeyTime="0:0:0.150"
294329
Value="0" />
295330
</DoubleAnimationUsingKeyFrames>
331+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_MonthView" Storyboard.TargetProperty="Visibility">
332+
<DiscreteObjectKeyFrame KeyTime="0:0:0.150" Value="{x:Static Visibility.Hidden}" />
333+
</ObjectAnimationUsingKeyFrames>
296334
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_YearView" Storyboard.TargetProperty="Opacity">
297335
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
298336
<DiscreteDoubleKeyFrame KeyTime="0:0:0.150" Value="0" />
@@ -348,7 +386,7 @@
348386
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="PART_YearView" Storyboard.TargetProperty="IsHitTestVisible">
349387
<DiscreteBooleanKeyFrame KeyTime="0" Value="False" />
350388
</BooleanAnimationUsingKeyFrames>
351-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_YearView" Storyboard.TargetProperty="Visibility">
389+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_MonthView" Storyboard.TargetProperty="Visibility">
352390
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" />
353391
</ObjectAnimationUsingKeyFrames>
354392
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_YearView" Storyboard.TargetProperty="Opacity">
@@ -588,9 +626,9 @@
588626
<Setter Property="FontSize" Value="{DynamicResource CalendarViewDayItemFontSize}" />
589627
<Setter Property="HorizontalContentAlignment" Value="Center" />
590628
<Setter Property="VerticalContentAlignment" Value="Center" />
591-
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
629+
<Setter Property="FocusVisualStyle" Value="{StaticResource EllipticalFocusStyle}"/>
592630
<Setter Property="chelper:FocusVisualHelper.UseSystemFocusVisuals" Value="True" />
593-
<Setter Property="chelper:FocusVisualHelper.FocusVisualMargin" Value="-2" />
631+
<Setter Property="chelper:FocusVisualHelper.FocusVisualMargin" Value="-3" />
594632
<Setter Property="Template">
595633
<Setter.Value>
596634
<ControlTemplate TargetType="CalendarDayButton">
@@ -767,9 +805,9 @@
767805
<Setter Property="FontWeight" Value="Normal" />
768806
<Setter Property="HorizontalContentAlignment" Value="Center" />
769807
<Setter Property="VerticalContentAlignment" Value="Center" />
770-
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
808+
<Setter Property="FocusVisualStyle" Value="{StaticResource EllipticalFocusStyle}"/>
771809
<Setter Property="chelper:FocusVisualHelper.UseSystemFocusVisuals" Value="True" />
772-
<Setter Property="chelper:FocusVisualHelper.FocusVisualMargin" Value="-2" />
810+
<Setter Property="chelper:FocusVisualHelper.FocusVisualMargin" Value="-4,-3.5,-3.5,-3" />
773811
<Setter Property="Template">
774812
<Setter.Value>
775813
<ControlTemplate TargetType="CalendarButton">

0 commit comments

Comments
 (0)