fix(controls): DatePicker focus

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

@@ -517,6 +517,47 @@
         </Setter>
     </Style>
 
+    <Style
+        x:Key="DefaultCalendarDropShadowStyle"
+        BasedOn="{StaticResource DefaultCalendarStyle}"
+        TargetType="{x:Type Calendar}">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Calendar}">
+                    <controls:EffectThicknessDecorator Thickness="30">
+                        <Border
+                            x:Name="PART_Root"
+                            Margin="0"
+                            Padding="0"
+                            Background="{DynamicResource CalendarViewBackground}"
+                            BorderBrush="{DynamicResource CalendarViewBorderBrush}"
+                            BorderThickness="1"
+                            CornerRadius="8">
+                            <Border.Effect>
+                                <DropShadowEffect
+                                    BlurRadius="20"
+                                    Direction="270"
+                                    Opacity="0.135"
+                                    ShadowDepth="10"
+                                    Color="#202020" />
+                            </Border.Effect>
+                            <CalendarItem
+                                x:Name="PART_CalendarItem"
+                                Margin="0"
+                                Padding="0"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{TemplateBinding Background}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                Style="{TemplateBinding CalendarItemStyle}" />
+                        </Border>
+                    </controls:EffectThicknessDecorator>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style BasedOn="{StaticResource DefaultCalendarStyle}" TargetType="{x:Type Calendar}" />
 
 </ResourceDictionary>

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

@@ -1,4 +1,4 @@
-<!--
+<!--
     This Source Code Form is subject to the terms of the MIT License.
     If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
     Copyright (C) Leszek Pomianowski and WPF UI Contributors.
@@ -12,17 +12,21 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="clr-namespace:Wpf.Ui.Controls"
+    xmlns:converters="clr-namespace:Wpf.Ui.Converters"
     xmlns:system="clr-namespace:System;assembly=mscorlib">
 
     <Thickness x:Key="DatePickerBorderThemeThickness">1,1,1,0</Thickness>
     <Thickness x:Key="DatePickerAccentBorderThemeThickness">0,0,0,1</Thickness>
     <Thickness x:Key="DatePickerLeftIconMargin">10,8,0,0</Thickness>
     <Thickness x:Key="DatePickerRightIconMargin">0,8,10,0</Thickness>
-    <Thickness x:Key="DatePickerCalendarButtonMargin">0,5,4,0</Thickness>
+    <Thickness x:Key="DatePickerCalendarButtonMargin">0,2,3,3</Thickness>
     <Thickness x:Key="DatePickerCalendarButtonPadding">0,0,0,0</Thickness>
     <system:Double x:Key="DatePickerCalendarButtonHeight">24</system:Double>
     <system:Double x:Key="DatePickerCalendarButtonIconSize">14</system:Double>
 
+    <converters:NegativeThicknessConverter x:Key="DatePickerNegativeThicknessConverter" />
+    <converters:DatePickerButtonPaddingConverter x:Key="DatePickerButtonPaddingConverter" />
+
     <Style x:Key="DefaultDatePickerTextBoxStyle" TargetType="{x:Type DatePickerTextBox}">
         <!--  Universal WPF UI focus  -->
         <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
@@ -56,14 +60,11 @@
     </Style>
 
     <Style x:Key="DefaultDatePickerStyle" TargetType="{x:Type DatePicker}">
-        <!--  Universal WPF UI focus  -->
-        <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
-        <!--  Universal WPF UI focus  -->
         <!--  Universal WPF UI ContextMenu  -->
         <Setter Property="ContextMenu" Value="{DynamicResource DefaultControlContextMenu}" />
         <!--  Universal WPF UI ContextMenu  -->
         <!--  Default WPF UI Calendar style  -->
-        <Setter Property="CalendarStyle" Value="{DynamicResource DefaultCalendarStyle}" />
+        <Setter Property="CalendarStyle" Value="{DynamicResource DefaultCalendarDropShadowStyle}" />
         <!--  Default WPF UI Calendar style  -->
         <Setter Property="Foreground">
             <Setter.Value>
@@ -88,6 +89,7 @@
         <Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="SnapsToDevicePixels" Value="True" />
         <Setter Property="OverridesDefaultStyle" Value="True" />
+        <Setter Property="KeyboardNavigation.TabNavigation" Value="Local" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type DatePicker}">
@@ -112,37 +114,39 @@
                                 BorderThickness="{TemplateBinding BorderThickness}"
                                 CornerRadius="{TemplateBinding Border.CornerRadius}">
                                 <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="*" />
-                                        <ColumnDefinition Width="Auto" />
-                                    </Grid.ColumnDefinitions>
-                                    <Grid Grid.Column="0">
-                                        <DatePickerTextBox
-                                            x:Name="PART_TextBox"
-                                            Margin="0"
-                                            Padding="{TemplateBinding Padding}"
-                                            HorizontalAlignment="Stretch"
-                                            VerticalAlignment="Stretch"
-                                            ContextMenu="{TemplateBinding ContextMenu}"
-                                            Focusable="{TemplateBinding Focusable}"
-                                            Foreground="{TemplateBinding Foreground}" />
-                                    </Grid>
+                                    <DatePickerTextBox
+                                        x:Name="PART_TextBox"
+                                        Margin="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=BorderThickness, Converter={StaticResource DatePickerNegativeThicknessConverter}}"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        ContextMenu="{TemplateBinding ContextMenu}"
+                                        Focusable="{TemplateBinding Focusable}"
+                                        Foreground="{TemplateBinding Foreground}"
+                                        KeyboardNavigation.TabIndex="0">
+                                        <DatePickerTextBox.Padding>
+                                            <MultiBinding Converter="{StaticResource DatePickerButtonPaddingConverter}">
+                                                <Binding Path="Padding" RelativeSource="{RelativeSource Mode=TemplatedParent}" />
+                                                <Binding Source="{StaticResource DatePickerCalendarButtonMargin}" />
+                                                <Binding Source="{StaticResource DatePickerCalendarButtonHeight}" />
+                                            </MultiBinding>
+                                        </DatePickerTextBox.Padding>
+                                    </DatePickerTextBox>
                                     <!--  Buttons and Icons have no padding from the main element to allow absolute positions if height is larger than the text entry zone  -->
                                     <controls:Button
                                         x:Name="PART_Button"
-                                        Grid.Column="1"
                                         Width="{StaticResource DatePickerCalendarButtonHeight}"
                                         Height="{StaticResource DatePickerCalendarButtonHeight}"
                                         Margin="{StaticResource DatePickerCalendarButtonMargin}"
                                         Padding="{StaticResource DatePickerCalendarButtonPadding}"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Top"
+                                        HorizontalAlignment="Right"
+                                        VerticalAlignment="Center"
                                         HorizontalContentAlignment="Center"
                                         VerticalContentAlignment="Center"
                                         Appearance="Secondary"
                                         Background="Transparent"
                                         BorderBrush="Transparent"
-                                        Cursor="Arrow">
+                                        Cursor="Arrow"
+                                        KeyboardNavigation.TabIndex="1">
                                         <!--  WPF overrides paddings for button  -->
                                         <controls:SymbolIcon
                                             Margin="{StaticResource DatePickerCalendarButtonPadding}"
@@ -172,7 +176,7 @@
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Top"
                             AllowsTransparency="True"
-                            Placement="Mouse"
+                            Placement="Bottom"
                             PlacementTarget="{Binding ElementName=PART_TextBox}"
                             StaysOpen="False" />
                     </Grid>

src/Wpf.Ui/Converters/DatePickerButtonPaddingConverter.cs

@@ -0,0 +1,32 @@
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+using System.Windows.Data;
+
+namespace Wpf.Ui.Converters;
+
+internal class DatePickerButtonPaddingConverter : IMultiValueConverter
+{
+    /// <inheritdoc />
+    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (values is [Thickness padding, Thickness buttonMargin, double buttonWidth])
+        {
+            return new Thickness(
+                                 padding.Left,
+                                 padding.Top,
+                                 padding.Right + buttonMargin.Left + buttonMargin.Right + buttonWidth,
+                                 padding.Bottom);
+        }
+
+        return default(Thickness);
+    }
+
+    /// <inheritdoc />
+    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

src/Wpf.Ui/Converters/NegativeThicknessConverter.cs

@@ -0,0 +1,28 @@
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+using System.Windows.Data;
+
+namespace Wpf.Ui.Converters;
+
+internal class NegativeThicknessConverter : IValueConverter
+{
+    /// <inheritdoc />
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is Thickness margin)
+        {
+            return new Thickness(-margin.Left, -margin.Top, -margin.Right, -margin.Bottom);
+        }
+
+        return null;
+    }
+
+    /// <inheritdoc />
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return null;
+    }
+}