Merge pull request #7308 from timunie/fix/CalendarDatePicker_ValidationIssue

Fix: CalendarDatePicker does not handle validation correctly

samples/ControlCatalog/Pages/CalendarDatePickerPage.xaml

@@ -1,5 +1,7 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:vm="clr-namespace:ControlCatalog.ViewModels"
+             x:DataType="vm:MainWindowViewModel"
              x:Class="ControlCatalog.Pages.CalendarDatePickerPage">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">A control for selecting dates with a calendar drop-down</TextBlock>
@@ -39,6 +41,9 @@
                 
         <TextBlock Text="Disabled"/>
         <CalendarDatePicker IsEnabled="False"/>
+        
+        <TextBlock Text="Validation Example"/>
+        <CalendarDatePicker SelectedDate="{CompiledBinding ValidatedDateExample, Mode=TwoWay}"/>
       </StackPanel>
 
     </StackPanel> 

samples/ControlCatalog/ViewModels/MainWindowViewModel.cs

@@ -5,6 +5,7 @@ using Avalonia.Controls.Notifications;
 using Avalonia.Dialogs;
 using Avalonia.Platform;
 using System;
+using System.ComponentModel.DataAnnotations;
 using MiniMvvm;
 
 namespace ControlCatalog.ViewModels
@@ -164,5 +165,17 @@ namespace ControlCatalog.ViewModels
         public MiniCommand ExitCommand { get; }
 
         public MiniCommand ToggleMenuItemCheckedCommand { get; }
+
+        private DateTime? _validatedDateExample;
+
+        /// <summary>
+        ///    A required DateTime which should demonstrate validation for the DateTimePicker
+        /// </summary>
+        [Required]
+        public DateTime? ValidatedDateExample
+        {
+            get => _validatedDateExample;
+            set => this.RaiseAndSetIfChanged(ref _validatedDateExample, value);
+        }
     }
 }

src/Avalonia.Controls/Calendar/CalendarDatePicker.cs

@@ -185,7 +185,8 @@ namespace Avalonia.Controls
             AvaloniaProperty.RegisterDirect<CalendarDatePicker, DateTime?>(
                 nameof(SelectedDate),
                 o => o.SelectedDate,
-                (o, v) => o.SelectedDate = v);
+                (o, v) => o.SelectedDate = v,
+                enableDataValidation: true);
 
         public static readonly StyledProperty<CalendarDatePickerFormat> SelectedDateFormatProperty =
             AvaloniaProperty.Register<CalendarDatePicker, CalendarDatePickerFormat>(
@@ -533,13 +534,11 @@ namespace Avalonia.Controls
             }
         }
 
-        protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
+        protected override void UpdateDataValidation<T>(AvaloniaProperty<T> property, BindingValue<T> value)
         {
-            base.OnPropertyChanged(change);
-
-            if (change.Property == SelectedDateProperty)
+            if (property == SelectedDateProperty)
             {
-                DataValidationErrors.SetError(this, change.NewValue.Error);
+                DataValidationErrors.SetError(this, value.Error);
             }
         }
 

src/Avalonia.Themes.Fluent/Controls/CalendarDatePicker.xaml

@@ -33,6 +33,7 @@
     
     <Setter Property="Template">
       <ControlTemplate>
+        <DataValidationErrors>
         <Grid ColumnDefinitions="*,Auto">
 
           <Grid.Styles>
@@ -107,7 +108,6 @@
                    Padding="{TemplateBinding Padding}"
                    Watermark="{TemplateBinding Watermark}"
                    UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
-                   DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    Grid.Column="0"/>
@@ -136,8 +136,12 @@
                       DisplayDateEnd="{TemplateBinding DisplayDateEnd}" />
           </Popup>
         </Grid>
+        </DataValidationErrors>
       </ControlTemplate>
     </Setter>
   </Style>
   
+  <Style Selector="CalendarDatePicker:error TextBox /template/ Border#PART_BorderElement">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
+  </Style>
 </Styles>