Fix issue: DatePicker adds the ButtonPosition setting to determine the left and right position of the icon （#223 ） 💯

Author: yanjinhuagood

src/WPFDevelopers.Shared/Core/Converts/ButtonPositionToColumnConverter.cs

@@ -0,0 +1,39 @@
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+using WPFDevelopers.Controls;
+
+namespace WPFDevelopers.Converts
+{
+    
+    public class ButtonPositionToHorizontalAlignmentConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            var position = (Position)value;
+            return position == Position.Left ? HorizontalAlignment.Left : HorizontalAlignment.Right;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+            => throw new NotImplementedException();
+    }
+
+    public class ButtonPositionToBooleanConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value == null || parameter == null)
+                return false;
+
+            var position = (Position)value;
+            var targetPosition = (Position)parameter;
+
+            return position == targetPosition;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+            => throw new NotImplementedException();
+    }
+
+}

src/WPFDevelopers.Shared/Core/Helpers/DatePickerHelper.cs

@@ -58,6 +58,29 @@ public class DatePickerHelper
                 FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
                 OnSelectedDateTimeChanged));
 
+        public static readonly DependencyProperty ButtonPositionProperty =
+        DependencyProperty.RegisterAttached(
+            "ButtonPosition",
+            typeof(Position),
+            typeof(DatePickerHelper),
+            new PropertyMetadata(Position.Right, OnButtonPositionChanged));
+
+        private static void OnButtonPositionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is DatePicker datePicker)
+            {
+                datePicker.Loaded += (s, args) =>
+                {
+                    if (datePicker.Template.FindName("PART_TextBoxContainer", datePicker) is FrameworkElement container)
+                    {
+                        var position = (Position)e.NewValue;
+                        container.Margin = position == Position.Left
+                            ? new Thickness(24, 0, 0, 0)
+                            : new Thickness(1, 0, 0, 0);
+                    }
+                };
+            }
+        }
 
         public static object GetWatermark(DependencyObject obj)
         {
@@ -125,6 +148,16 @@ public static void SetSelectedDateTime(DependencyObject obj, DateTime? value)
             obj.SetValue(SelectedDateTimeProperty, value);
         }
 
+        public static void SetButtonPosition(UIElement element, Position value)
+        {
+            element.SetValue(ButtonPositionProperty, value);
+        }
+
+        public static Position GetButtonPosition(UIElement element)
+        {
+            return (Position)element.GetValue(ButtonPositionProperty);
+        }
+
         private static void OnWatermarkChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             if (d is DatePicker datePicker)
@@ -169,7 +202,10 @@ private static void SetDatePickerTextBoxWatermark(DatePickerTextBox d, object va
             {
                 var watermarkControl = d.Template.FindName("PART_Watermark", d) as ContentControl;
                 if (watermarkControl != null)
+                {
+                    watermarkControl.Margin = new Thickness(1, 0, 0, 0);
                     watermarkControl.Content = value;
+                }
             }
         }
 
@@ -180,7 +216,10 @@ private static void SetWatermarkInternal(DatePicker d, object value)
             {
                 var watermarkControl = textBox.Template.FindName("PART_Watermark", textBox) as ContentControl;
                 if (watermarkControl != null)
+                {
+                    watermarkControl.Margin = new Thickness(1, 0, 0, 0);
                     watermarkControl.Content = value;
+                }
             }
         }
 

src/WPFDevelopers.Shared/Styles/Styles.DatePicker.xaml

@@ -2,11 +2,14 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="clr-namespace:WPFDevelopers.Controls"
+    xmlns:converts="clr-namespace:WPFDevelopers.Converts"
     xmlns:helpers="clr-namespace:WPFDevelopers.Helpers">
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml" />
         <ResourceDictionary Source="../Themes/Basic/Animations.xaml" />
     </ResourceDictionary.MergedDictionaries>
+    <converts:ButtonPositionToBooleanConverter x:Key="WD.ButtonPositionToBooleanConverter" />
+    <converts:ButtonPositionToHorizontalAlignmentConverter x:Key="WD.ButtonPositionToHorizontalAlignmentConverter" />
     <Style
         x:Key="WD.CalendarDayButtonStyle"
         BasedOn="{StaticResource WD.ControlBasicStyle}"
@@ -487,112 +490,20 @@
     </Style>
 
     <Style
-        x:Key="WD.DropDownButtonStyle"
+        x:Key="WD.DatePickerDropDownButtonStyle"
         BasedOn="{StaticResource WD.ControlBasicStyle}"
         TargetType="Button">
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Button}">
-                    <Grid>
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="30" />
-                            <ColumnDefinition />
-                        </Grid.ColumnDefinitions>
-                        <Border
-                            x:Name="Border"
-                            Grid.ColumnSpan="2"
-                            Background="{DynamicResource WD.BackgroundBrush}" />
-                        <Grid
-                            Width="19"
-                            Height="18"
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            FlowDirection="LeftToRight">
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="20*" />
-                                <ColumnDefinition Width="20*" />
-                                <ColumnDefinition Width="20*" />
-                                <ColumnDefinition Width="20*" />
-                            </Grid.ColumnDefinitions>
-                            <Grid.RowDefinitions>
-                                <RowDefinition Height="23*" />
-                                <RowDefinition Height="19*" />
-                                <RowDefinition Height="19*" />
-                                <RowDefinition Height="19*" />
-                            </Grid.RowDefinitions>
-                            <Border
-                                x:Name="Highlight"
-                                Grid.Row="0"
-                                Grid.RowSpan="4"
-                                Grid.ColumnSpan="4"
-                                Margin="-1"
-                                BorderBrush="{DynamicResource WD.RegularTextBrush}"
-                                BorderThickness="1"
-                                CornerRadius="0,0,1,1"
-                                Opacity="1" />
-                            <Border
-                                x:Name="Background"
-                                Grid.Row="1"
-                                Grid.RowSpan="3"
-                                Grid.ColumnSpan="4"
-                                Margin="0,-1,0,0"
-                                Background="{DynamicResource WD.BackgroundBrush}"
-                                BorderBrush="{DynamicResource WD.RegularTextBrush}"
-                                BorderThickness="1"
-                                CornerRadius=".5"
-                                Opacity="1" />
-                            <Border
-                                x:Name="BackgroundGradient"
-                                Grid.Row="1"
-                                Grid.RowSpan="3"
-                                Grid.ColumnSpan="4"
-                                Margin="0,-1,0,0"
-                                Background="{DynamicResource WD.BackgroundBrush}"
-                                BorderBrush="{DynamicResource WD.RegularTextBrush}"
-                                BorderThickness="1"
-                                CornerRadius=".5"
-                                Opacity="1" />
-                            <Rectangle
-                                Grid.RowSpan="1"
-                                Grid.ColumnSpan="4"
-                                Fill="{DynamicResource WD.RegularTextBrush}"
-                                Stroke="{DynamicResource WD.RegularTextBrush}"
-                                StrokeThickness="1" />
-                            <Path
-                                Grid.Row="1"
-                                Grid.RowSpan="3"
-                                Grid.Column="0"
-                                Grid.ColumnSpan="4"
-                                Margin="4,3,4,3"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Data="{StaticResource WD.DatePickerGeometry}"
-                                Fill="{DynamicResource WD.RegularTextBrush}"
-                                RenderTransformOrigin="0.5,0.5"
-                                Stretch="Fill" />
-                            <Ellipse
-                                Grid.ColumnSpan="4"
-                                Width="3"
-                                Height="3"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Fill="{DynamicResource WD.BackgroundBrush}"
-                                StrokeThickness="0" />
-                            <Border
-                                x:Name="DisabledVisual"
-                                Grid.Row="0"
-                                Grid.RowSpan="4"
-                                Grid.ColumnSpan="4"
-                                BorderBrush="{DynamicResource WD.BackgroundBrush}"
-                                BorderThickness="1"
-                                CornerRadius="0,0,.5,.5"
-                                Opacity="0" />
-                        </Grid>
-                    </Grid>
+                    <Border Background="{DynamicResource WD.BackgroundBrush}">
+                        <ContentPresenter />
+                    </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
+
     <Style
         x:Key="WD.DefaultDatePickerTextBox"
         BasedOn="{StaticResource WD.ControlBasicStyle}"
@@ -677,19 +588,28 @@
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <Button
                                 x:Name="PART_Button"
+                                Content=""
                                 Focusable="False"
                                 Foreground="{TemplateBinding Foreground}"
-                                Style="{StaticResource WD.DropDownButtonStyle}" />
-                            <DatePickerTextBox
-                                x:Name="PART_TextBox"
-                                Width="Auto"
-                                Margin="28,0,0,0"
-                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                Background="Transparent"
-                                Focusable="True"
+                                Style="{StaticResource WD.DatePickerDropDownButtonStyle}" />
+
+                            <controls:PathIcon
+                                Width="19"
+                                Height="18"
+                                HorizontalAlignment="{Binding Path=(helpers:DatePickerHelper.ButtonPosition), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource WD.ButtonPositionToHorizontalAlignmentConverter}}"
                                 Foreground="{TemplateBinding Foreground}"
-                                SelectionBrush="{DynamicResource WD.WindowBorderBrush}" />
+                                Kind="DatePicker" />
+                            <Border x:Name="PART_TextBoxContainer" Margin="1,0">
+                                <DatePickerTextBox
+                                    x:Name="PART_TextBox"
+                                    Width="Auto"
+                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    Background="Transparent"
+                                    Focusable="True"
+                                    Foreground="{TemplateBinding Foreground}"
+                                    SelectionBrush="{DynamicResource WD.WindowBorderBrush}" />
+                            </Border>
                             <Popup
                                 x:Name="PART_Popup"
                                 AllowsTransparency="True"

src/WPFDevelopers.Shared/Themes/Basic/Geometrys.xaml

@@ -18,30 +18,7 @@
     <Geometry x:Key="WD.PreviousGeometry" po:Freeze="True">M658 316l-196 196 196 196-60 60-256-256 256-256z</Geometry>
     <Geometry x:Key="WD.NextGeometry" po:Freeze="True">M426 256l256 256-256 256-60-60 196-196-196-196z</Geometry>
     <Geometry x:Key="WD.DatePickerGeometry" po:Freeze="True">
-        M11.426758,8.4305077 L11.749023,8.4305077
-        L11.749023,16.331387 L10.674805,16.331387
-        L10.674805,10.299648 L9.0742188,11.298672
-        L9.0742188,10.294277 C9.4788408,10.090176
-        9.9094238,9.8090878 10.365967,9.4510155
-        C10.82251,9.0929432 11.176106,8.7527733
-        11.426758,8.4305077 z M14.65086,8.4305077
-        L18.566387,8.4305077 L18.566387,9.3435936
-        L15.671368,9.3435936 L15.671368,11.255703
-        C15.936341,11.058764 16.27293,10.960293
-        16.681133,10.960293 C17.411602,10.960293
-        17.969301,11.178717 18.354229,11.615566
-        C18.739157,12.052416 18.931622,12.673672
-        18.931622,13.479336 C18.931622,15.452317
-        18.052553,16.438808 16.294415,16.438808
-        C15.560365,16.438808 14.951641,16.234707
-        14.468243,15.826504 L14.881817,14.929531
-        C15.368796,15.326992 15.837872,15.525723
-        16.289043,15.525723 C17.298809,15.525723
-        17.803692,14.895514 17.803692,13.635098
-        C17.803692,12.460618 17.305971,11.873379
-        16.310528,11.873379 C15.83071,11.873379
-        15.399232,12.079271 15.016094,12.491055
-        L14.65086,12.238613 z
+        M12,19a1,1,0,1,0-1-1A1,1,0,0,0,12,19Zm5,0a1,1,0,1,0-1-1A1,1,0,0,0,17,19Zm0-4a1,1,0,1,0-1-1A1,1,0,0,0,17,15Zm-5,0a1,1,0,1,0-1-1A1,1,0,0,0,12,15ZM19,3H18V2a1,1,0,0,0-2,0V3H8V2A1,1,0,0,0,6,2V3H5A3,3,0,0,0,2,6V20a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V6A3,3,0,0,0,19,3Zm1,17a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V11H20ZM20,9H4V6A1,1,0,0,1,5,5H6V6A1,1,0,0,0,8,6V5h8V6a1,1,0,0,0,2,0V5h1a1,1,0,0,1,1,1ZM7,15a1,1,0,1,0-1-1A1,1,0,0,0,7,15Zm0,4a1,1,0,1,0-1-1A1,1,0,0,0,7,19Z
     </Geometry>
 
     <Geometry x:Key="WD.ChevronRightGeometry" po:Freeze="True">M678.4 512l-365.619-379.904c-13.722-13.824-13.722-36.198 0-50.125 13.722-13.824 35.891-13.824 49.613 0l400.896 404.89c13.722 13.875 13.722 36.301 0 50.125l-400.896 404.89c-13.722 13.875-35.891 13.824-49.613 0-13.722-13.773-13.722-36.198 0-50.125l365.619-379.75z</Geometry>