Skip to content

Commit bbd9fdc

Browse files
emakoemako
committed
Revamp DateTimePicker visuals and styles
1 parent e8022d0 commit bbd9fdc

5 files changed

Lines changed: 26 additions & 116 deletions

File tree

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

Lines changed: 8 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<ResourceDictionary
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
xmlns:local="clr-namespace:Wpf.Ui.Violeta.Controls">
4+
xmlns:local="clr-namespace:Wpf.Ui.Violeta.Controls"
5+
xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml">
56
<ResourceDictionary.MergedDictionaries>
67
<ResourceDictionary Source="pack://application:,,,/Wpf.Ui.Violeta;component/Controls/DateTimePicker/DateTimePicker.xaml" />
78
</ResourceDictionary.MergedDictionaries>
@@ -106,41 +107,6 @@
106107
</Grid>
107108
</Grid>
108109

109-
<!-- Column header labels -->
110-
<Grid
111-
Grid.Row="0"
112-
VerticalAlignment="Top"
113-
IsHitTestVisible="False">
114-
<Grid.ColumnDefinitions>
115-
<ColumnDefinition Width="*" />
116-
<ColumnDefinition Width="1" />
117-
<ColumnDefinition Width="*" />
118-
<ColumnDefinition Width="1" />
119-
<ColumnDefinition Width="*" />
120-
</Grid.ColumnDefinitions>
121-
<TextBlock
122-
Grid.Column="0"
123-
Padding="0,4"
124-
HorizontalAlignment="Center"
125-
FontSize="11"
126-
Foreground="{DynamicResource DateTimePickerHeaderForeground}"
127-
Text="{Binding MonthText, RelativeSource={RelativeSource AncestorType={x:Type local:DatePickerPresenter}}}" />
128-
<TextBlock
129-
Grid.Column="2"
130-
Padding="0,4"
131-
HorizontalAlignment="Center"
132-
FontSize="11"
133-
Foreground="{DynamicResource DateTimePickerHeaderForeground}"
134-
Text="{Binding DayText, RelativeSource={RelativeSource AncestorType={x:Type local:DatePickerPresenter}}}" />
135-
<TextBlock
136-
Grid.Column="4"
137-
Padding="0,4"
138-
HorizontalAlignment="Center"
139-
FontSize="11"
140-
Foreground="{DynamicResource DateTimePickerHeaderForeground}"
141-
Text="{Binding YearText, RelativeSource={RelativeSource AncestorType={x:Type local:DatePickerPresenter}}}" />
142-
</Grid>
143-
144110
<!-- Accept / Dismiss row -->
145111
<Grid Grid.Row="1">
146112
<Grid.ColumnDefinitions>
@@ -307,22 +273,14 @@
307273
Text="{TemplateBinding YearText}" />
308274

309275
<!-- Calendar icon -->
310-
<Grid
276+
<ui:SymbolIcon
311277
Grid.Column="5"
312278
Width="32"
313-
HorizontalAlignment="Right"
314-
VerticalAlignment="Center">
315-
<Path
316-
Width="14"
317-
Height="14"
318-
HorizontalAlignment="Center"
319-
VerticalAlignment="Center"
320-
Data="M 2,3 L 2,1 L 4,1 L 4,3 L 8,3 L 8,1 L 10,1 L 10,3 L 12,3 L 12,13 L 0,13 L 0,3 Z M 0,5 L 12,5"
321-
Fill="Transparent"
322-
Stretch="Fill"
323-
Stroke="{DynamicResource DateTimePickerIconForeground}"
324-
StrokeThickness="1" />
325-
</Grid>
279+
HorizontalAlignment="Center"
280+
VerticalAlignment="Center"
281+
FontSize="16"
282+
Foreground="{DynamicResource DateTimePickerIconForeground}"
283+
Symbol="CalendarDate20" />
326284
</Grid>
327285
</Button>
328286

‎src/Wpf.Ui.Violeta/Controls/DateTimePicker/DateTimePicker.xaml‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<Border
3939
Height="{TemplateBinding ItemHeight}"
4040
VerticalAlignment="Center"
41-
Background="{DynamicResource DateTimePickerSelectedItemBackground}"
41+
Background="{DynamicResource AccentButtonBackground}"
4242
CornerRadius="4"
4343
IsHitTestVisible="False"
4444
Margin="4,0" />
@@ -49,15 +49,15 @@
4949
</Style>
5050

5151
<!-- ═══════════════════════════════════════════════════════════════
52-
Internal flyout button (the clickable area)
52+
Internal flyout button (the clickable area) — Card appearance
5353
═══════════════════════════════════════════════════════════════ -->
5454
<Style x:Key="DateTimePickerFlyoutButtonStyle" TargetType="{x:Type Button}">
5555
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
5656
<Setter Property="OverridesDefaultStyle" Value="True" />
57-
<Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
58-
<Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonBorderBrush}" />
57+
<Setter Property="Background" Value="{DynamicResource CardBackgroundFillColorDefaultBrush}" />
58+
<Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultBrush}" />
5959
<Setter Property="BorderThickness" Value="1" />
60-
<Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
60+
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
6161
<Setter Property="MinHeight" Value="32" />
6262
<Setter Property="Padding" Value="0" />
6363
<Setter Property="Cursor" Value="Hand" />
@@ -77,12 +77,11 @@
7777
</Border>
7878
<ControlTemplate.Triggers>
7979
<Trigger Property="IsMouseOver" Value="True">
80-
<Setter TargetName="PART_Border" Property="Background" Value="{DynamicResource DateTimePickerButtonPointeroverBackground}" />
81-
<Setter TargetName="PART_Border" Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonPointeroverBorderBrush}" />
80+
<Setter TargetName="PART_Border" Property="Background" Value="{DynamicResource CardBackgroundFillColorSecondaryBrush}" />
8281
</Trigger>
8382
<Trigger Property="IsEnabled" Value="False">
84-
<Setter TargetName="PART_Border" Property="Background" Value="{DynamicResource DateTimePickerButtonDisabledBackground}" />
85-
<Setter TargetName="PART_Border" Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonDisabledBorderBrush}" />
83+
<Setter TargetName="PART_Border" Property="Background" Value="{DynamicResource ControlFillColorDisabledBrush}" />
84+
<Setter TargetName="PART_Border" Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" />
8685
</Trigger>
8786
</ControlTemplate.Triggers>
8887
</ControlTemplate>

‎src/Wpf.Ui.Violeta/Controls/DateTimePicker/DateTimePickerPanel.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ private void BuildItems()
222222
{
223223
Text = text,
224224
Height = ItemHeight,
225-
HorizontalAlignment = HorizontalAlignment.Center,
225+
HorizontalAlignment = HorizontalAlignment.Stretch,
226226
VerticalAlignment = VerticalAlignment.Center,
227227
TextAlignment = TextAlignment.Center,
228228
};

‎src/Wpf.Ui.Violeta/Controls/DateTimePicker/TimePicker.xaml‎

Lines changed: 8 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<ResourceDictionary
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
xmlns:local="clr-namespace:Wpf.Ui.Violeta.Controls">
4+
xmlns:local="clr-namespace:Wpf.Ui.Violeta.Controls"
5+
xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml">
56
<ResourceDictionary.MergedDictionaries>
67
<ResourceDictionary Source="pack://application:,,,/Wpf.Ui.Violeta;component/Controls/DateTimePicker/DateTimePicker.xaml" />
78
</ResourceDictionary.MergedDictionaries>
@@ -142,45 +143,6 @@
142143
</Grid>
143144
</Grid>
144145

145-
<!-- Column header labels -->
146-
<Grid
147-
Grid.Row="0"
148-
VerticalAlignment="Top"
149-
IsHitTestVisible="False">
150-
<Grid.ColumnDefinitions>
151-
<ColumnDefinition Width="*" />
152-
<ColumnDefinition Width="1" />
153-
<ColumnDefinition Width="*" />
154-
<ColumnDefinition Width="1" />
155-
<ColumnDefinition Width="Auto" MinWidth="0" />
156-
<ColumnDefinition Width="1" />
157-
<ColumnDefinition Width="Auto" MinWidth="0" />
158-
</Grid.ColumnDefinitions>
159-
<TextBlock
160-
Grid.Column="0"
161-
Padding="0,4"
162-
HorizontalAlignment="Center"
163-
FontSize="11"
164-
Foreground="{DynamicResource DateTimePickerHeaderForeground}"
165-
Text="{Binding HourText, RelativeSource={RelativeSource AncestorType={x:Type local:TimePickerPresenter}}}" />
166-
<TextBlock
167-
Grid.Column="2"
168-
Padding="0,4"
169-
HorizontalAlignment="Center"
170-
FontSize="11"
171-
Foreground="{DynamicResource DateTimePickerHeaderForeground}"
172-
Text="{Binding MinuteText, RelativeSource={RelativeSource AncestorType={x:Type local:TimePickerPresenter}}}" />
173-
<TextBlock
174-
x:Name="SecondHeaderText"
175-
Grid.Column="4"
176-
Padding="0,4"
177-
HorizontalAlignment="Center"
178-
FontSize="11"
179-
Foreground="{DynamicResource DateTimePickerHeaderForeground}"
180-
Text="{Binding SecondText, RelativeSource={RelativeSource AncestorType={x:Type local:TimePickerPresenter}}}"
181-
Visibility="Collapsed" />
182-
</Grid>
183-
184146
<!-- Accept / Dismiss row -->
185147
<Grid Grid.Row="1">
186148
<Grid.ColumnDefinitions>
@@ -239,7 +201,6 @@
239201
<DataTrigger Binding="{Binding UseSeconds, RelativeSource={RelativeSource Self}}" Value="True">
240202
<Setter TargetName="PART_SecondHost" Property="Visibility" Value="Visible" />
241203
<Setter TargetName="PART_SecondSpacer" Property="Visibility" Value="Visible" />
242-
<Setter TargetName="SecondHeaderText" Property="Visibility" Value="Visible" />
243204
</DataTrigger>
244205
<!-- Show AM/PM for 12h -->
245206
<DataTrigger Binding="{Binding ClockIdentifier, RelativeSource={RelativeSource Self}}" Value="12HourClock">
@@ -341,22 +302,14 @@
341302
Text="{TemplateBinding MinuteText}" />
342303

343304
<!-- Clock icon -->
344-
<Grid
305+
<ui:SymbolIcon
345306
Grid.Column="3"
346307
Width="32"
347-
HorizontalAlignment="Right"
348-
VerticalAlignment="Center">
349-
<Path
350-
Width="14"
351-
Height="14"
352-
HorizontalAlignment="Center"
353-
VerticalAlignment="Center"
354-
Data="M 7,1 A 6,6 0 1 1 6.99,1 Z M 7,4 L 7,7 L 10,9"
355-
Fill="Transparent"
356-
Stretch="Fill"
357-
Stroke="{DynamicResource DateTimePickerIconForeground}"
358-
StrokeThickness="1" />
359-
</Grid>
308+
HorizontalAlignment="Center"
309+
VerticalAlignment="Center"
310+
FontSize="16"
311+
Foreground="{DynamicResource DateTimePickerIconForeground}"
312+
Symbol="Clock24" />
360313
</Grid>
361314
</Button>
362315

‎src/Wpf.Ui.Violeta/Resources/Theme/Light.xaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<SolidColorBrush x:Key="DateTimePickerHeaderForeground" Color="#FF6E6E6E" />
3333
<SolidColorBrush x:Key="DateTimePickerSeparatorBackground" Color="#1A000000" />
3434
<SolidColorBrush x:Key="DateTimePickerSelectedItemBackground" Color="#1A0066FF" />
35-
<SolidColorBrush x:Key="DateTimePickerItemForeground" Color="#FF1C1C1C" />
35+
<SolidColorBrush x:Key="DateTimePickerItemForeground" Color="#FFFFFFFF" />
3636
<SolidColorBrush x:Key="DateTimePickerItemDimmedForeground" Color="#80808080" />
3737
<SolidColorBrush x:Key="DateTimePickerFlyoutButtonForeground" Color="#FF6E6E6E" />
3838
<SolidColorBrush x:Key="DateTimePickerFlyoutButtonPointeroverForeground" Color="#FF1C1C1C" />

0 commit comments

Comments
 (0)