Skip to content

Commit 403f8d4

Browse files
NuklonNuklon
authored
fix(controls): DatePicker focus (#1516)
* Update DatePicker.xaml * Update Calendar.xaml * Update DatePicker.xaml * Create DatePickerButtonPaddingConverter.cs * Create NegativeThicknessConverter.cs * Update DatePicker.xaml * Delete src/Wpf.Ui/Converters/NegativeThicknessConverter.cs * Do the same styling here as TextBox Reference: https://github.com/lepoco/wpfui/pull/1520/files
1 parent 3139927 commit 403f8d4

File tree

3 files changed

+141
-119
lines changed

3 files changed

+141
-119
lines changed

‎src/Wpf.Ui/Controls/Calendar/Calendar.xaml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -517,6 +517,47 @@
517517
</Setter>
518518
</Style>
519519

520+
<Style
521+
x:Key="DefaultCalendarDropShadowStyle"
522+
BasedOn="{StaticResource DefaultCalendarStyle}"
523+
TargetType="{x:Type Calendar}">
524+
<Setter Property="Template">
525+
<Setter.Value>
526+
<ControlTemplate TargetType="{x:Type Calendar}">
527+
<controls:EffectThicknessDecorator Thickness="30">
528+
<Border
529+
x:Name="PART_Root"
530+
Margin="0"
531+
Padding="0"
532+
Background="{DynamicResource CalendarViewBackground}"
533+
BorderBrush="{DynamicResource CalendarViewBorderBrush}"
534+
BorderThickness="1"
535+
CornerRadius="8">
536+
<Border.Effect>
537+
<DropShadowEffect
538+
BlurRadius="20"
539+
Direction="270"
540+
Opacity="0.135"
541+
ShadowDepth="10"
542+
Color="#202020" />
543+
</Border.Effect>
544+
<CalendarItem
545+
x:Name="PART_CalendarItem"
546+
Margin="0"
547+
Padding="0"
548+
HorizontalAlignment="Stretch"
549+
VerticalAlignment="Stretch"
550+
Background="{TemplateBinding Background}"
551+
BorderBrush="{TemplateBinding BorderBrush}"
552+
BorderThickness="{TemplateBinding BorderThickness}"
553+
Style="{TemplateBinding CalendarItemStyle}" />
554+
</Border>
555+
</controls:EffectThicknessDecorator>
556+
</ControlTemplate>
557+
</Setter.Value>
558+
</Setter>
559+
</Style>
560+
520561
<Style BasedOn="{StaticResource DefaultCalendarStyle}" TargetType="{x:Type Calendar}" />
521562

522563
</ResourceDictionary>

‎src/Wpf.Ui/Controls/DatePicker/DatePicker.xaml‎

Lines changed: 68 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!--
1+
<!--
22
This Source Code Form is subject to the terms of the MIT License.
33
If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
44
Copyright (C) Leszek Pomianowski and WPF UI Contributors.
@@ -12,58 +12,37 @@
1212
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
1313
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
1414
xmlns:controls="clr-namespace:Wpf.Ui.Controls"
15+
xmlns:converters="clr-namespace:Wpf.Ui.Converters"
1516
xmlns:system="clr-namespace:System;assembly=mscorlib">
1617

18+
<ResourceDictionary.MergedDictionaries>
19+
<ResourceDictionary Source="pack://application:,,,/Wpf.Ui;component/Controls/TextBox/TextBox.xaml" />
20+
</ResourceDictionary.MergedDictionaries>
21+
1722
<Thickness x:Key="DatePickerBorderThemeThickness">1,1,1,0</Thickness>
1823
<Thickness x:Key="DatePickerAccentBorderThemeThickness">0,0,0,1</Thickness>
1924
<Thickness x:Key="DatePickerLeftIconMargin">10,8,0,0</Thickness>
2025
<Thickness x:Key="DatePickerRightIconMargin">0,8,10,0</Thickness>
21-
<Thickness x:Key="DatePickerCalendarButtonMargin">0,5,4,0</Thickness>
26+
<Thickness x:Key="DatePickerCalendarButtonMargin">0,6,4,6</Thickness>
2227
<Thickness x:Key="DatePickerCalendarButtonPadding">0,0,0,0</Thickness>
2328
<system:Double x:Key="DatePickerCalendarButtonHeight">24</system:Double>
2429
<system:Double x:Key="DatePickerCalendarButtonIconSize">14</system:Double>
2530

26-
<Style x:Key="DefaultDatePickerTextBoxStyle" TargetType="{x:Type DatePickerTextBox}">
27-
<!-- Universal WPF UI focus -->
28-
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
29-
<!-- Universal WPF UI focus -->
30-
<Setter Property="BorderThickness" Value="0" />
31-
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
32-
<Setter Property="VerticalContentAlignment" Value="Stretch" />
33-
<Setter Property="BorderBrush" Value="Transparent" />
34-
<Setter Property="Background" Value="Transparent" />
35-
<Setter Property="Foreground">
36-
<Setter.Value>
37-
<SolidColorBrush Color="{DynamicResource TextFillColorPrimary}" />
38-
</Setter.Value>
39-
</Setter>
40-
<Setter Property="CaretBrush">
41-
<Setter.Value>
42-
<SolidColorBrush Color="{DynamicResource TextFillColorPrimary}" />
43-
</Setter.Value>
44-
</Setter>
45-
<Setter Property="SnapsToDevicePixels" Value="True" />
46-
<Setter Property="OverridesDefaultStyle" Value="True" />
47-
<Setter Property="Template">
48-
<Setter.Value>
49-
<ControlTemplate TargetType="{x:Type DatePickerTextBox}">
50-
<Border Margin="{TemplateBinding Margin}">
51-
<Decorator x:Name="PART_ContentHost" Margin="{TemplateBinding Padding}" />
52-
</Border>
53-
</ControlTemplate>
54-
</Setter.Value>
55-
</Setter>
31+
<converters:DatePickerButtonPaddingConverter x:Key="DatePickerButtonPaddingConverter" />
32+
33+
<Style
34+
x:Key="DefaultDatePickerTextBoxStyle"
35+
BasedOn="{StaticResource DefaultTextBoxStyle}"
36+
TargetType="{x:Type DatePickerTextBox}">
37+
<Setter Property="Border.CornerRadius" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
5638
</Style>
5739

5840
<Style x:Key="DefaultDatePickerStyle" TargetType="{x:Type DatePicker}">
59-
<!-- Universal WPF UI focus -->
60-
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
61-
<!-- Universal WPF UI focus -->
6241
<!-- Universal WPF UI ContextMenu -->
6342
<Setter Property="ContextMenu" Value="{DynamicResource DefaultControlContextMenu}" />
6443
<!-- Universal WPF UI ContextMenu -->
6544
<!-- Default WPF UI Calendar style -->
66-
<Setter Property="CalendarStyle" Value="{DynamicResource DefaultCalendarStyle}" />
45+
<Setter Property="CalendarStyle" Value="{DynamicResource DefaultCalendarDropShadowStyle}" />
6746
<!-- Default WPF UI Calendar style -->
6847
<Setter Property="Foreground">
6948
<Setter.Value>
@@ -81,13 +60,14 @@
8160
<Setter Property="HorizontalAlignment" Value="Stretch" />
8261
<Setter Property="VerticalAlignment" Value="Center" />
8362
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
84-
<Setter Property="VerticalContentAlignment" Value="Top" />
63+
<Setter Property="VerticalContentAlignment" Value="Stretch" />
8564
<Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
8665
<Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
8766
<Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
8867
<Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
8968
<Setter Property="SnapsToDevicePixels" Value="True" />
9069
<Setter Property="OverridesDefaultStyle" Value="True" />
70+
<Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
9171
<Setter Property="Template">
9272
<Setter.Value>
9373
<ControlTemplate TargetType="{x:Type DatePicker}">
@@ -100,115 +80,84 @@
10080
Grid.Row="0"
10181
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
10282
VerticalAlignment="{TemplateBinding VerticalAlignment}">
103-
<Border
104-
x:Name="ContentBorder"
83+
<DatePickerTextBox
84+
x:Name="PART_TextBox"
10585
MinWidth="{TemplateBinding MinWidth}"
10686
MinHeight="{TemplateBinding MinHeight}"
107-
Padding="0"
10887
HorizontalAlignment="Stretch"
10988
VerticalAlignment="Stretch"
110-
Background="{TemplateBinding Background}"
89+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
90+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
11191
BorderBrush="{TemplateBinding BorderBrush}"
11292
BorderThickness="{TemplateBinding BorderThickness}"
113-
CornerRadius="{TemplateBinding Border.CornerRadius}">
114-
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
115-
<Grid.ColumnDefinitions>
116-
<ColumnDefinition Width="*" />
117-
<ColumnDefinition Width="Auto" />
118-
</Grid.ColumnDefinitions>
119-
<Grid Grid.Column="0">
120-
<DatePickerTextBox
121-
x:Name="PART_TextBox"
122-
Margin="0"
123-
Padding="{TemplateBinding Padding}"
124-
HorizontalAlignment="Stretch"
125-
VerticalAlignment="Stretch"
126-
ContextMenu="{TemplateBinding ContextMenu}"
127-
Focusable="{TemplateBinding Focusable}"
128-
Foreground="{TemplateBinding Foreground}" />
129-
</Grid>
130-
<!-- Buttons and Icons have no padding from the main element to allow absolute positions if height is larger than the text entry zone -->
131-
<controls:Button
132-
x:Name="PART_Button"
133-
Grid.Column="1"
134-
Width="{StaticResource DatePickerCalendarButtonHeight}"
135-
Height="{StaticResource DatePickerCalendarButtonHeight}"
136-
Margin="{StaticResource DatePickerCalendarButtonMargin}"
137-
Padding="{StaticResource DatePickerCalendarButtonPadding}"
138-
HorizontalAlignment="Center"
139-
VerticalAlignment="Top"
140-
HorizontalContentAlignment="Center"
141-
VerticalContentAlignment="Center"
142-
Appearance="Secondary"
143-
Background="Transparent"
144-
BorderBrush="Transparent"
145-
Cursor="Arrow">
146-
<!-- WPF overrides paddings for button -->
147-
<controls:SymbolIcon
148-
Margin="{StaticResource DatePickerCalendarButtonPadding}"
149-
HorizontalAlignment="Center"
150-
VerticalAlignment="Center"
151-
FontSize="{StaticResource DatePickerCalendarButtonIconSize}"
152-
Foreground="{TemplateBinding Foreground}"
153-
Symbol="CalendarRtl24" />
154-
</controls:Button>
155-
</Grid>
156-
</Border>
93+
ContextMenu="{TemplateBinding ContextMenu}"
94+
Focusable="{TemplateBinding Focusable}"
95+
FontFamily="{TemplateBinding FontFamily}"
96+
FontSize="{TemplateBinding FontSize}"
97+
Foreground="{TemplateBinding Foreground}"
98+
KeyboardNavigation.TabIndex="0"
99+
Tag="{TemplateBinding Border.CornerRadius}">
100+
<DatePickerTextBox.Padding>
101+
<MultiBinding Converter="{StaticResource DatePickerButtonPaddingConverter}">
102+
<Binding Path="Padding" RelativeSource="{RelativeSource Mode=TemplatedParent}" />
103+
<Binding Source="{StaticResource DatePickerCalendarButtonMargin}" />
104+
<Binding Source="{StaticResource DatePickerCalendarButtonHeight}" />
105+
</MultiBinding>
106+
</DatePickerTextBox.Padding>
107+
</DatePickerTextBox>
108+
<!-- Buttons and Icons have no padding from the main element to allow absolute positions if height is larger than the text entry zone -->
109+
<controls:Button
110+
x:Name="PART_Button"
111+
Width="{StaticResource DatePickerCalendarButtonHeight}"
112+
Height="{StaticResource DatePickerCalendarButtonHeight}"
113+
Margin="{StaticResource DatePickerCalendarButtonMargin}"
114+
Padding="{StaticResource DatePickerCalendarButtonPadding}"
115+
HorizontalAlignment="Right"
116+
VerticalAlignment="Stretch"
117+
HorizontalContentAlignment="Center"
118+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
119+
Appearance="Secondary"
120+
Background="Transparent"
121+
BorderBrush="Transparent"
122+
Cursor="Arrow"
123+
KeyboardNavigation.TabIndex="1"
124+
MouseOverBackground="{DynamicResource SubtleFillColorSecondaryBrush}"
125+
MouseOverBorderBrush="Transparent"
126+
PressedBackground="{DynamicResource SubtleFillColorTertiaryBrush}"
127+
PressedBorderBrush="Transparent">
128+
<!-- WPF overrides paddings for button -->
129+
<controls:SymbolIcon
130+
Margin="{StaticResource DatePickerCalendarButtonPadding}"
131+
HorizontalAlignment="Center"
132+
VerticalAlignment="Center"
133+
FontSize="{StaticResource DatePickerCalendarButtonIconSize}"
134+
Foreground="{TemplateBinding Foreground}"
135+
Symbol="CalendarRtl24" />
136+
</controls:Button>
157137
<!-- The Accent Border is a separate element so that changes to the border thickness do not affect the position of the element -->
158138
<Border
159139
x:Name="AccentBorder"
160140
HorizontalAlignment="Stretch"
161141
VerticalAlignment="Stretch"
142+
BorderBrush="{DynamicResource ControlStrokeColorDefaultBrush}"
162143
BorderThickness="{StaticResource DatePickerAccentBorderThemeThickness}"
163-
CornerRadius="{TemplateBinding Border.CornerRadius}">
164-
<Border.BorderBrush>
165-
<SolidColorBrush Color="{DynamicResource ControlStrongStrokeColorDefault}" />
166-
</Border.BorderBrush>
167-
</Border>
144+
CornerRadius="{TemplateBinding Border.CornerRadius}" />
168145
</Grid>
169146
<Popup
170147
x:Name="PART_Popup"
171148
Grid.Row="1"
172149
HorizontalAlignment="Stretch"
173150
VerticalAlignment="Top"
174151
AllowsTransparency="True"
175-
Placement="Mouse"
152+
Placement="Bottom"
176153
PlacementTarget="{Binding ElementName=PART_TextBox}"
177154
StaysOpen="False" />
178155
</Grid>
179156
<ControlTemplate.Triggers>
180-
<Trigger Property="IsKeyboardFocusWithin" Value="True">
181-
<Setter TargetName="AccentBorder" Property="BorderThickness" Value="0,0,0,2" />
182-
<Setter TargetName="AccentBorder" Property="BorderBrush">
183-
<Setter.Value>
184-
<SolidColorBrush Color="{DynamicResource SystemAccentColorSecondary}" />
185-
</Setter.Value>
186-
</Setter>
187-
<Setter TargetName="ContentBorder" Property="Background">
188-
<Setter.Value>
189-
<SolidColorBrush Color="{DynamicResource ControlFillColorInputActive}" />
190-
</Setter.Value>
191-
</Setter>
192-
</Trigger>
193-
<MultiTrigger>
194-
<MultiTrigger.Conditions>
195-
<Condition Property="IsEnabled" Value="True" />
196-
<Condition Property="IsMouseOver" Value="True" />
197-
<Condition Property="IsKeyboardFocusWithin" Value="False" />
198-
</MultiTrigger.Conditions>
199-
<Setter TargetName="ContentBorder" Property="Background">
200-
<Setter.Value>
201-
<SolidColorBrush Color="{DynamicResource ControlFillColorSecondary}" />
202-
</Setter.Value>
203-
</Setter>
204-
</MultiTrigger>
205157
<Trigger Property="IsEnabled" Value="True">
206158
<Setter Property="Cursor" Value="IBeam" />
207159
</Trigger>
208160
<Trigger Property="IsEnabled" Value="False">
209-
<Setter TargetName="ContentBorder" Property="Background" Value="{DynamicResource ControlFillColorDisabledBrush}" />
210-
<Setter TargetName="ContentBorder" Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" />
211-
<Setter TargetName="AccentBorder" Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" />
212161
<Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" />
213162
</Trigger>
214163
</ControlTemplate.Triggers>

0 commit comments

Comments
 (0)