Merge pull request #25 from AlexanderBlackman/main

Fixed DateTimePicker, and made names more intuitive

dev/DevWinUI.Controls/Controls/Date/CalendarWithClock/CalendarWithClock.Property.cs

@@ -57,13 +57,13 @@ private static void OnSelectedTimeChanged(DependencyObject d, DependencyProperty
         }
     }
 
-    public DateTimeOffset SelectedDate
+    public DateTimeOffset SelectedDateTime
     {
-        get { return (DateTimeOffset)GetValue(SelectedDateProperty); }
-        set { SetValue(SelectedDateProperty, value); }
+        get { return (DateTimeOffset)GetValue(SelectedDateTimeProperty); }
+        set { SetValue(SelectedDateTimeProperty, value); }
     }
-    public static readonly DependencyProperty SelectedDateProperty =
-        DependencyProperty.Register(nameof(SelectedDate), typeof(DateTimeOffset), typeof(CalendarWithClock), new PropertyMetadata(DateTimeOffset.Now, OnSelectedDateChanged));
+    public static readonly DependencyProperty SelectedDateTimeProperty =
+        DependencyProperty.Register(nameof(SelectedDateTime), typeof(DateTimeOffset), typeof(CalendarWithClock), new PropertyMetadata(DateTimeOffset.Now, OnSelectedDateChanged));
     private static void OnSelectedDateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
         if (d is CalendarWithClock ctl && !ctl.isUpdating)

dev/DevWinUI.Controls/Controls/Date/CalendarWithClock/CalendarWithClock.cs

@@ -25,10 +25,10 @@ public string SelectedDateFormatted
     {
         get
         {
-            return SelectedDate.ToString("dd/MM/yyyy");
+            return SelectedDateTime.ToString("dd/MM/yyyy");
         }
     }
-    public string SelectedDateTime
+    public string SelectedDateTimeString
     {
         get
         {
@@ -91,13 +91,13 @@ private void OnClockSelectedTimeChanged(object sender, DateTime e)
                 // Update SelectedTime
                 SelectedTime = new TimeSpan(selectedTime.Hour, selectedTime.Minute, selectedTime.Second);
 
-                // Update SelectedDate with new time while preserving the date and time zone offset
-                SelectedDate = new DateTimeOffset(
-                    SelectedDate.Year, SelectedDate.Month, SelectedDate.Day,
+                // Update SelectedDateTime with new time while preserving the date and time zone offset
+                SelectedDateTime = new DateTimeOffset(
+                    SelectedDateTime.Year, SelectedDateTime.Month, SelectedDateTime.Day,
                     selectedTime.Hour, selectedTime.Minute, selectedTime.Second,
-                    SelectedDate.Offset);
+                    SelectedDateTime.Offset);
 
-                SelectedTimeChanged?.Invoke(this, SelectedDate);
+                SelectedTimeChanged?.Invoke(this, SelectedDateTime);
             }
             finally
             {
@@ -113,12 +113,12 @@ private void OnCalendarViewSelectedDatesChanged(CalendarView sender, CalendarVie
             try
             {
                 isUpdating = true;
-                SelectedDate = new DateTimeOffset(
+                SelectedDateTime = new DateTimeOffset(
                     selectedDate.Year, selectedDate.Month, selectedDate.Day,
                     SelectedTime?.Hours ?? 0, SelectedTime?.Minutes ?? 0, SelectedTime?.Seconds ?? 0,
                     selectedDate.Offset);
 
-                SelectedTimeChanged?.Invoke(this, SelectedDate);
+                SelectedTimeChanged?.Invoke(this, SelectedDateTime);
             }
             finally
             {
@@ -138,13 +138,13 @@ private void OnTimePickerSelectedTimeChanged(TimePicker sender, TimePickerSelect
                 // Update SelectedTime
                 SelectedTime = selectedTime;
 
-                // Update SelectedDate with new time while preserving the date and time zone offset
-                SelectedDate = new DateTimeOffset(
-                    SelectedDate.Year, SelectedDate.Month, SelectedDate.Day,
+                // Update SelectedDateTime with new time while preserving the date and time zone offset
+                SelectedDateTime = new DateTimeOffset(
+                    SelectedDateTime.Year, SelectedDateTime.Month, SelectedDateTime.Day,
                     selectedTime.Hours, selectedTime.Minutes, selectedTime.Seconds,
-                    SelectedDate.Offset);
+                    SelectedDateTime.Offset);
 
-                SelectedTimeChanged?.Invoke(this, SelectedDate);
+                SelectedTimeChanged?.Invoke(this, SelectedDateTime);
             }
             finally
             {
@@ -160,8 +160,8 @@ private void UpdateCalendarView()
             {
                 isUpdating = true;
                 calendarView.SelectedDates.Clear();
-                calendarView.SelectedDates.Add(SelectedDate);
-                calendarView.SetDisplayDate(SelectedDate);
+                calendarView.SelectedDates.Add(SelectedDateTime);
+                calendarView.SetDisplayDate(SelectedDateTime);
             }
             finally
             {
@@ -176,10 +176,10 @@ private void UpdateDateTimeOffset()
             try
             {
                 isUpdating = true;
-                SelectedDate = new DateTimeOffset(
-                    SelectedDate.Year, SelectedDate.Month, SelectedDate.Day,
+                SelectedDateTime = new DateTimeOffset(
+                    SelectedDateTime.Year, SelectedDateTime.Month, SelectedDateTime.Day,
                     SelectedTime.Value.Hours, SelectedTime.Value.Minutes, SelectedTime.Value.Seconds,
-                    SelectedDate.Offset);
+                    SelectedDateTime.Offset);
             }
             finally
             {

dev/DevWinUI.Controls/Controls/Date/DateTimePicker/DateTimePicker.Property.cs

@@ -46,13 +46,13 @@ private static void OnClockModeChanged(DependencyObject d, DependencyPropertyCha
         }
     }
 
-    public DateTimeOffset SelectedDate
+    public DateTimeOffset SelectedDateTime
     {
-        get { return (DateTimeOffset)GetValue(SelectedDateProperty); }
-        set { SetValue(SelectedDateProperty, value); }
+        get { return (DateTimeOffset)GetValue(SelectedDateTimeProperty); }
+        set { SetValue(SelectedDateTimeProperty, value); }
     }
-    public static readonly DependencyProperty SelectedDateProperty =
-        DependencyProperty.Register(nameof(SelectedDate), typeof(DateTimeOffset), typeof(DateTimePicker), new PropertyMetadata(DateTimeOffset.Now, OnSelectedDateChanged));
+    public static readonly DependencyProperty SelectedDateTimeProperty =
+        DependencyProperty.Register(nameof(SelectedDateTime), typeof(DateTimeOffset), typeof(DateTimePicker), new PropertyMetadata(DateTimeOffset.Now, OnSelectedDateChanged));
 
     private static void OnSelectedDateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {

dev/DevWinUI.Controls/Controls/Date/DateTimePicker/DateTimePicker.cs

@@ -24,6 +24,7 @@ public partial class DateTimePicker : DateTimeBase
     private Grid rootGrid;
     private Button confirmButton;
     private CalendarWithClock calendarWithClock;
+    private bool isUpdating;
 
     public DateTimePicker()
     {
@@ -63,18 +64,39 @@ protected override void OnApplyTemplate()
 
         if (calendarWithClock != null)
         {
-            calendarWithClock.SelectedTime = SelectedTime;
-            calendarWithClock.SelectedDate = SelectedDate;
-            calendarWithClock.SelectedTimeChanged -= CalendarWithClock_SelectedTimeChanged;
-            calendarWithClock.SelectedTimeChanged += CalendarWithClock_SelectedTimeChanged;
+            try
+            {
+                isUpdating = true;
+                calendarWithClock.SelectedTime = SelectedTime;
+                calendarWithClock.SelectedDateTime = SelectedDateTime;
+            }
+            finally
+            {
+                calendarWithClock.SelectedTimeChanged -= CalendarWithClock_SelectedTimeChanged;
+                calendarWithClock.SelectedTimeChanged += CalendarWithClock_SelectedTimeChanged;
+                isUpdating = false;
+            }
         }
 
         UpdateTemplate();
     }
 
     private void CalendarWithClock_SelectedTimeChanged(object sender, DateTimeOffset e)
     {
-        SelectedTimeChanged?.Invoke(this, e);
+        if (!isUpdating && calendarWithClock != null)
+        {
+            try
+            {
+                isUpdating = true;
+                SelectedDateTime = e;
+                SelectedTime = e.TimeOfDay;
+                SelectedTimeChanged?.Invoke(this, e);
+            }
+            finally
+            {
+                isUpdating = false;
+            }
+        }
     }
 
     private void OnConfirmButton(object sender, RoutedEventArgs e)
@@ -121,19 +143,40 @@ private void OnPointerExited(object sender, PointerRoutedEventArgs e)
 
     private void UpdateSelectedTime()
     {
-        calendarWithClock.SelectedTime = SelectedTime;
-        UpdatePlaceholder();
+        if (!isUpdating && calendarWithClock != null)
+        {
+            try
+            {
+                isUpdating = true;
+                calendarWithClock.SelectedTime = SelectedTime;
+                UpdatePlaceholder();
+            }
+            finally
+            {
+                isUpdating = false;
+            }
+        }
     }
-
     private void UpdateSelectedDate()
     {
-        calendarWithClock.SelectedDate = SelectedDate;
-        UpdatePlaceholder();
+        if (!isUpdating && calendarWithClock != null)
+        {
+            try
+            {
+                isUpdating = true;
+                calendarWithClock.SelectedDateTime = SelectedDateTime;
+                UpdatePlaceholder();
+            }
+            finally
+            {
+                isUpdating = false;
+            }
+        }
     }
 
     private void UpdatePlaceholder()
     {
-        PlaceholderText = $"{calendarWithClock.SelectedDateTime}";
+        PlaceholderText = $"{calendarWithClock.SelectedDateTimeString}";
     }
 
     private void UpdateHeaderVisibility()

dev/DevWinUI.Controls/Themes/Generic.xaml

@@ -497,8 +497,8 @@ Themes\Styles\Win2D\Watermark.xaml
                   <Ellipse Width="{TemplateBinding CenterPointWidth}" Height="{TemplateBinding CenterPointHeight}" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{TemplateBinding CenterPointFill}" Stroke="{TemplateBinding CenterPointStroke}" StrokeThickness="2" />
                 </Grid>
               </Viewbox>
-              <local:ClockRadioButton x:Name="PART_ButtonAm" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="35" Height="35" Margin="-30,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Am" IsChecked="True" />
-              <local:ClockRadioButton x:Name="PART_ButtonPm" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="35" Height="35" Margin="0,0,-30,10" HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="Pm" />
+              <local:ClockRadioButton x:Name="PART_ButtonAm" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="35" Height="35" Margin="-30,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="am" IsChecked="True" />
+              <local:ClockRadioButton x:Name="PART_ButtonPm" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="35" Height="35" Margin="0,0,-30,10" HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="pm" />
             </Grid>
           </Grid>
         </ControlTemplate>
@@ -3689,7 +3689,7 @@ Themes\Styles\Win2D\Watermark.xaml
   <ControlTemplate x:Key="CalendarWithAnalogClockTemplate" TargetType="local:CalendarWithClock">
     <Grid x:Name="PART_Root">
       <Grid.ColumnDefinitions>
-        <ColumnDefinition />
+        <ColumnDefinition MinWidth="300" />
         <ColumnDefinition />
       </Grid.ColumnDefinitions>
       <VisualStateManager.VisualStateGroups>
@@ -3754,7 +3754,7 @@ Themes\Styles\Win2D\Watermark.xaml
         </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
       <Border x:Name="Background" Grid.Column="0" Grid.ColumnSpan="2" MinHeight="32" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Control.IsTemplateFocusTarget="True" CornerRadius="{TemplateBinding CornerRadius}" />
-      <CalendarView x:Name="PART_CalendarView" Grid.Column="0" Margin="{TemplateBinding CalendarViewMargin}" BorderThickness="{TemplateBinding CalendarViewBorderThickness}" CalendarIdentifier="{TemplateBinding CalendarIdentifier}" CornerRadius="{TemplateBinding CalendarViewCornerRadius}" DayOfWeekFormat="{TemplateBinding DayOfWeekFormat}" DisplayMode="{TemplateBinding DisplayMode}" FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}" IsGroupLabelVisible="{TemplateBinding IsGroupLabelVisible}" IsOutOfScopeEnabled="{TemplateBinding IsOutOfScopeEnabled}" IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" MaxDate="{TemplateBinding MaxDate}" MinDate="{TemplateBinding MinDate}" Style="{TemplateBinding CalendarViewStyle}" />
+      <CalendarView x:Name="PART_CalendarView" Grid.Column="0" Margin="{TemplateBinding CalendarViewMargin}" BorderThickness="{TemplateBinding CalendarViewBorderThickness}" CalendarIdentifier="{TemplateBinding CalendarIdentifier}" CornerRadius="{TemplateBinding CalendarViewCornerRadius}" DayOfWeekFormat="{TemplateBinding DayOfWeekFormat}" DisplayMode="{TemplateBinding DisplayMode}" FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}" IsGroupLabelVisible="{TemplateBinding IsGroupLabelVisible}" IsOutOfScopeEnabled="{TemplateBinding IsOutOfScopeEnabled}" IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" MaxDate="{TemplateBinding MaxDate}" MinDate="{TemplateBinding MinDate}" Style="{TemplateBinding CalendarViewStyle}" MinWidth="300" />
       <local:Clock x:Name="PART_Clock" Grid.Column="1" Margin="{TemplateBinding ClockMargin}" BorderThickness="{TemplateBinding ClockBorderThickness}" ClockCornerRadius="{TemplateBinding ClockCornerRadius}" />
     </Grid>
   </ControlTemplate>

dev/DevWinUI.Controls/Themes/Styles/Controls/CalendarWithClockStyle.xaml

@@ -35,7 +35,7 @@
                      TargetType="local:CalendarWithClock">
         <Grid x:Name="PART_Root">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition />
+                <ColumnDefinition MinWidth="300"/>
                 <ColumnDefinition />
             </Grid.ColumnDefinitions>
             <VisualStateManager.VisualStateGroups>
@@ -138,7 +138,8 @@
                           IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
                           MaxDate="{TemplateBinding MaxDate}"
                           MinDate="{TemplateBinding MinDate}"
-                          Style="{TemplateBinding CalendarViewStyle}" />
+                          Style="{TemplateBinding CalendarViewStyle}"
+                          MinWidth="300"/>
             <local:Clock x:Name="PART_Clock"
                          Grid.Column="1"
                          Margin="{TemplateBinding ClockMargin}"

dev/DevWinUI.Controls/Themes/Styles/Controls/Clock.xaml

@@ -140,7 +140,7 @@
                                                     Margin="-30,0,0,10"
                                                     HorizontalAlignment="Left"
                                                     VerticalAlignment="Bottom"
-                                                    Content="Am"
+                                                    Content="am"
                                                     IsChecked="True" />
                             <local:ClockRadioButton x:Name="PART_ButtonPm"
                                                     Grid.RowSpan="3"
@@ -150,7 +150,7 @@
                                                     Margin="0,0,-30,10"
                                                     HorizontalAlignment="Right"
                                                     VerticalAlignment="Bottom"
-                                                    Content="Pm" />
+                                                    Content="pm" />
                         </Grid>
                     </Grid>
                 </ControlTemplate>

dev/DevWinUI.Gallery/Views/Pages/Features/CalendarWithClockPage.xaml.cs

@@ -9,7 +9,7 @@ public CalendarWithClockPage()
 
     private void Button_Click(object sender, RoutedEventArgs e)
     {
-        TxtDateTime.Text = CalendarWithClockSample.SelectedDateTime;
+        TxtDateTime.Text = CalendarWithClockSample.SelectedDateTimeString;
     }
 
     private void RadioButton_Checked(object sender, RoutedEventArgs e)
@@ -21,6 +21,6 @@ private void RadioButton_Checked(object sender, RoutedEventArgs e)
 
     private void Button_Click_1(object sender, RoutedEventArgs e)
     {
-        TxtDateTime2.Text = CalendarWithClockSample2.SelectedDateTime;
+        TxtDateTime2.Text = CalendarWithClockSample2.SelectedDateTimeString;
     }
 }

dev/DevWinUI.Gallery/Views/Pages/Features/DateTimePickerPage.xaml

@@ -29,6 +29,9 @@
                                  Header="Confirm Button Content"
                                  PlaceholderText="Confirm"
                                  Text="Confirm" />
+                        <Button Click="ShowDateTimeForOne"
+        Content="Show Selected DateTime" />
+                        <TextBlock x:Name="TxtDateTime1" />
                     </StackPanel>
                 </local:ControlExample.Pane>
                 <dev:DateTimePicker x:Name="DateTimePickerSample"
@@ -74,6 +77,9 @@
                                  Header="Confirm Button Content"
                                  PlaceholderText="Confirm"
                                  Text="Confirm" />
+                        <Button Click="ShowDateTimeForTwo"
+        Content="Show selected DateTime" />
+                        <TextBlock x:Name="TxtDateTime2" />
                     </StackPanel>
                 </local:ControlExample.Pane>
                 <dev:DateTimePicker x:Name="DateTimePickerSample2"

dev/DevWinUI.Gallery/Views/Pages/Features/DateTimePickerPage.xaml.cs

@@ -13,4 +13,16 @@ private void RadioButton_Checked(object sender, RoutedEventArgs e)
         var displayMode = GeneralHelper.GetEnum<TimePickerDisplayMode>(tag?.ToString());
         DateTimePickerSample2.TimePickerDisplayMode = displayMode;
     }
+
+    private void ShowDateTimeForOne(object sender, RoutedEventArgs e)
+    {
+        var outputString = DateTimePickerSample.SelectedDateTime.ToString();
+        TxtDateTime1.Text = outputString;
+    }
+
+    private void ShowDateTimeForTwo(object sender, RoutedEventArgs e)
+    {
+        var outputString = DateTimePickerSample2.SelectedDateTime.ToString();
+        TxtDateTime2.Text = outputString;
+    }
 }