add datavalidation to date and time pickers.

samples/ControlCatalog/Pages/DateTimePickerPage.xaml

@@ -2,6 +2,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:sys="clr-namespace:System;assembly=netstandard"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="ControlCatalog.Pages.DateTimePickerPage">
   <StackPanel Orientation="Vertical" Spacing="4" HorizontalAlignment="Stretch">
@@ -30,6 +31,16 @@
         </Panel>
       </StackPanel>
       
+      
+      <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+              BorderThickness="1" Padding="15">
+        <DatePicker Header="Pick a date">
+          <DataValidationErrors.Error>
+            <sys:Exception /> 
+          </DataValidationErrors.Error>
+        </DatePicker>
+      </Border>
+      
       <TextBlock FontSize="18">A DatePicker with day formatted and year hidden.</TextBlock>
       <StackPanel Orientation="Vertical">
         <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
@@ -66,6 +77,15 @@
           </TextBlock>
         </Panel>
       </StackPanel>
+      
+      <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+              BorderThickness="1" Padding="15">
+        <TimePicker Header="Pick a time">
+          <DataValidationErrors.Error>
+            <sys:Exception /> 
+          </DataValidationErrors.Error>
+        </TimePicker>
+      </Border>
 
       <TextBlock FontSize="18">A TimePicker with a header and minute increments specified.</TextBlock>
       <StackPanel Orientation="Vertical">

src/Avalonia.Themes.Fluent/DatePicker.xaml

@@ -125,77 +125,79 @@
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
-          <ContentPresenter Name="HeaderContentPresenter" Grid.Row="0"
-                            Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            Margin="{DynamicResource DatePickerTopHeaderMargin}"
-                            MaxWidth="{DynamicResource DatePickerThemeMaxWidth}"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Top"/>
+        <DataValidationErrors>
+          <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
+            <ContentPresenter Name="HeaderContentPresenter" Grid.Row="0"
+                              Content="{TemplateBinding Header}"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}"
+                              Margin="{DynamicResource DatePickerTopHeaderMargin}"
+                              MaxWidth="{DynamicResource DatePickerThemeMaxWidth}"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Top"/>
 
-          <Button Name="FlyoutButton" Grid.Row="1"
-                  Foreground="{TemplateBinding Foreground}"
-                  Background="{TemplateBinding Background}"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  BorderThickness="{TemplateBinding BorderThickness}"
-                  IsEnabled="{TemplateBinding IsEnabled}"
-                  MinWidth="{StaticResource DatePickerThemeMinWidth}"
-                  MaxWidth="{StaticResource DatePickerThemeMaxWidth}"
-                  HorizontalAlignment="Stretch"
-                  VerticalAlignment="Stretch"
-                  HorizontalContentAlignment="Stretch"
-                  VerticalContentAlignment="Stretch"
-                  TemplatedControl.IsTemplateFocusTarget="True">
-            <Button.Template>
-              <ControlTemplate>
-                <ContentPresenter Name="ContentPresenter"
-                                  BorderBrush="{TemplateBinding BorderBrush}"
-                                  Background="{TemplateBinding Background}"
-                                  BorderThickness="{TemplateBinding BorderThickness}"
-                                  Content="{TemplateBinding Content}"
-                                  TextBlock.Foreground="{TemplateBinding Foreground}"
-                                  HorizontalContentAlignment="Stretch"
-                                  VerticalContentAlignment="Stretch"
-                                  CornerRadius="{DynamicResource ControlCornerRadius}"/>
-              </ControlTemplate>
-            </Button.Template>
-            <Grid Name="ButtonContentGrid" ColumnDefinitions="78*,Auto,132*,Auto,78*">
-              <TextBlock Name="DayText" Text="day" HorizontalAlignment="Center"
-                         Padding="{DynamicResource DatePickerHostPadding}"
-                         FontFamily="{TemplateBinding FontFamily}"
-                         FontWeight="{TemplateBinding FontWeight}"
-                         FontSize="{TemplateBinding FontSize}"/>
-              <TextBlock Name="MonthText" Text="month" TextAlignment="Left"
-                         Padding="{DynamicResource DatePickerHostMonthPadding}"
-                         FontFamily="{TemplateBinding FontFamily}"
-                         FontWeight="{TemplateBinding FontWeight}"
-                         FontSize="{TemplateBinding FontSize}"/>
-              <TextBlock Name="YearText" Text="year" HorizontalAlignment="Center"
-                         Padding="{DynamicResource DatePickerHostPadding}"
-                         FontFamily="{TemplateBinding FontFamily}"
-                         FontWeight="{TemplateBinding FontWeight}"
-                         FontSize="{TemplateBinding FontSize}"/>
-              <Rectangle x:Name="FirstSpacer"
-                    Fill="{DynamicResource DatePickerSpacerFill}"
-                    HorizontalAlignment="Center"
-                    Width="1"
-                    Grid.Column="1" />
-              <Rectangle x:Name="SecondSpacer"
-                    Fill="{DynamicResource DatePickerSpacerFill}"
-                    HorizontalAlignment="Center"
-                    Width="1"
-                    Grid.Column="3" />
-            </Grid>
-          </Button>
+            <Button Name="FlyoutButton" Grid.Row="1"
+                    Foreground="{TemplateBinding Foreground}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    IsEnabled="{TemplateBinding IsEnabled}"
+                    MinWidth="{StaticResource DatePickerThemeMinWidth}"
+                    MaxWidth="{StaticResource DatePickerThemeMaxWidth}"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    TemplatedControl.IsTemplateFocusTarget="True">
+              <Button.Template>
+                <ControlTemplate>
+                  <ContentPresenter Name="ContentPresenter"
+                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    Background="{TemplateBinding Background}"
+                                    BorderThickness="{TemplateBinding BorderThickness}"
+                                    Content="{TemplateBinding Content}"
+                                    TextBlock.Foreground="{TemplateBinding Foreground}"
+                                    HorizontalContentAlignment="Stretch"
+                                    VerticalContentAlignment="Stretch"
+                                    CornerRadius="{DynamicResource ControlCornerRadius}"/>
+                </ControlTemplate>
+              </Button.Template>
+              <Grid Name="ButtonContentGrid" ColumnDefinitions="78*,Auto,132*,Auto,78*">
+                <TextBlock Name="DayText" Text="day" HorizontalAlignment="Center"
+                           Padding="{DynamicResource DatePickerHostPadding}"
+                           FontFamily="{TemplateBinding FontFamily}"
+                           FontWeight="{TemplateBinding FontWeight}"
+                           FontSize="{TemplateBinding FontSize}"/>
+                <TextBlock Name="MonthText" Text="month" TextAlignment="Left"
+                           Padding="{DynamicResource DatePickerHostMonthPadding}"
+                           FontFamily="{TemplateBinding FontFamily}"
+                           FontWeight="{TemplateBinding FontWeight}"
+                           FontSize="{TemplateBinding FontSize}"/>
+                <TextBlock Name="YearText" Text="year" HorizontalAlignment="Center"
+                           Padding="{DynamicResource DatePickerHostPadding}"
+                           FontFamily="{TemplateBinding FontFamily}"
+                           FontWeight="{TemplateBinding FontWeight}"
+                           FontSize="{TemplateBinding FontSize}"/>
+                <Rectangle x:Name="FirstSpacer"
+                      Fill="{DynamicResource DatePickerSpacerFill}"
+                      HorizontalAlignment="Center"
+                      Width="1"
+                      Grid.Column="1" />
+                <Rectangle x:Name="SecondSpacer"
+                      Fill="{DynamicResource DatePickerSpacerFill}"
+                      HorizontalAlignment="Center"
+                      Width="1"
+                      Grid.Column="3" />
+              </Grid>
+            </Button>
 
-          <Popup Name="Popup" WindowManagerAddShadowHint="False"
-                 IsLightDismissEnabled="True" PlacementTarget="{TemplateBinding}"
-                 PlacementMode="Bottom">
-            <DatePickerPresenter Name="PickerPresenter" />
-          </Popup>
+            <Popup Name="Popup" WindowManagerAddShadowHint="False"
+                   IsLightDismissEnabled="True" PlacementTarget="{TemplateBinding}"
+                   PlacementMode="Bottom">
+              <DatePickerPresenter Name="PickerPresenter" />
+            </Popup>
 
-        </Grid>
+          </Grid>
+        </DataValidationErrors>
       </ControlTemplate>
     </Setter>
   </Style>
@@ -228,6 +230,11 @@
   <Style Selector="DatePicker:hasnodate /template/ Button#FlyoutButton TextBlock">
     <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
   </Style>
+  
+  <Style Selector="DatePicker:error /template/ Button#FlyoutButton /template/ ContentPresenter">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
+  </Style>
+  
 
   <!--WinUI: DatePickerFlyoutPresenter-->
   <Style Selector="DatePickerPresenter">

src/Avalonia.Themes.Fluent/TimePicker.xaml

@@ -41,94 +41,96 @@
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
-          <ContentPresenter x:Name="HeaderContentPresenter"
-                 Grid.Row="0"
-                 Content="{TemplateBinding Header}"
-                 ContentTemplate="{TemplateBinding HeaderTemplate}"
-                 Margin="{DynamicResource TimePickerTopHeaderMargin}"
-                 MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
-                 TextBlock.Foreground="{DynamicResource TimePickerHeaderForeground}"
-                 HorizontalAlignment="Stretch"
-                 VerticalAlignment="Top" />
+        <DataValidationErrors>
+          <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}" RowDefinitions="Auto,*">
+            <ContentPresenter x:Name="HeaderContentPresenter"
+                   Grid.Row="0"
+                   Content="{TemplateBinding Header}"
+                   ContentTemplate="{TemplateBinding HeaderTemplate}"
+                   Margin="{DynamicResource TimePickerTopHeaderMargin}"
+                   MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
+                   TextBlock.Foreground="{DynamicResource TimePickerHeaderForeground}"
+                   HorizontalAlignment="Stretch"
+                   VerticalAlignment="Top" />
 
-          <Button x:Name="FlyoutButton"
-                  Grid.Row="1"
-                  Foreground="{TemplateBinding Foreground}"
-                  Background="{TemplateBinding Background}"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  BorderThickness="{TemplateBinding BorderThickness}"
-                  IsEnabled="{TemplateBinding IsEnabled}"
-                  MinWidth="{StaticResource TimePickerThemeMinWidth}"
-                  MaxWidth="{StaticResource TimePickerThemeMaxWidth}"
-                  HorizontalAlignment="Stretch"
-                  HorizontalContentAlignment="Stretch"
-                  VerticalAlignment="Top"
-                  VerticalContentAlignment="Stretch">
-            <Button.Template>
-              <ControlTemplate>
-                <ContentPresenter Name="ContentPresenter"
-                                BorderBrush="{TemplateBinding BorderBrush}"
-                                Background="{TemplateBinding Background}"
-                                BorderThickness="{TemplateBinding BorderThickness}"
-                                Content="{TemplateBinding Content}"
-                                TextBlock.Foreground="{TemplateBinding Foreground}"
-                                HorizontalContentAlignment="Stretch"
-                                VerticalContentAlignment="Stretch"
-                                CornerRadius="{DynamicResource ControlCornerRadius}" />
-              </ControlTemplate>
-            </Button.Template>
+            <Button x:Name="FlyoutButton"
+                    Grid.Row="1"
+                    Foreground="{TemplateBinding Foreground}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    IsEnabled="{TemplateBinding IsEnabled}"
+                    MinWidth="{StaticResource TimePickerThemeMinWidth}"
+                    MaxWidth="{StaticResource TimePickerThemeMaxWidth}"
+                    HorizontalAlignment="Stretch"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalAlignment="Top"
+                    VerticalContentAlignment="Stretch">
+              <Button.Template>
+                <ControlTemplate>
+                  <ContentPresenter Name="ContentPresenter"
+                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                  Background="{TemplateBinding Background}"
+                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                  Content="{TemplateBinding Content}"
+                                  TextBlock.Foreground="{TemplateBinding Foreground}"
+                                  HorizontalContentAlignment="Stretch"
+                                  VerticalContentAlignment="Stretch"
+                                  CornerRadius="{DynamicResource ControlCornerRadius}" />
+                </ControlTemplate>
+              </Button.Template>
 
-            <Grid Name="FlyoutButtonContentGrid">
-              <!--Ignore col defs here, set in code-->
-              <Border x:Name="FirstPickerHost" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                <TextBlock x:Name="HourTextBlock"
-                    HorizontalAlignment="Center"
-                    Padding="{DynamicResource TimePickerHostPadding}"
-                    FontFamily="{TemplateBinding FontFamily}"
-                    FontWeight="{TemplateBinding FontWeight}"
-                    FontSize="{TemplateBinding FontSize}" />
-              </Border>
+              <Grid Name="FlyoutButtonContentGrid">
+                <!--Ignore col defs here, set in code-->
+                <Border x:Name="FirstPickerHost" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                  <TextBlock x:Name="HourTextBlock"
+                      HorizontalAlignment="Center"
+                      Padding="{DynamicResource TimePickerHostPadding}"
+                      FontFamily="{TemplateBinding FontFamily}"
+                      FontWeight="{TemplateBinding FontWeight}"
+                      FontSize="{TemplateBinding FontSize}" />
+                </Border>
 
-              <Rectangle Name="FirstColumnDivider"
-                  Fill="{DynamicResource TimePickerSpacerFill}"
-                  HorizontalAlignment="Center"
-                  Width="{DynamicResource TimePickerSpacerThemeWidth}"
-                  Grid.Column="1" />
-
-              <Border x:Name="SecondPickerHost" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                <TextBlock x:Name="MinuteTextBlock"
+                <Rectangle Name="FirstColumnDivider"
+                    Fill="{DynamicResource TimePickerSpacerFill}"
                     HorizontalAlignment="Center"
-                    Padding="{DynamicResource TimePickerHostPadding}"
-                    FontFamily="{TemplateBinding FontFamily}"
-                    FontWeight="{TemplateBinding FontWeight}"
-                    FontSize="{TemplateBinding FontSize}"/>
-              </Border>
+                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                    Grid.Column="1" />
 
-              <Rectangle Name="SecondColumnDivider"
-                  Fill="{DynamicResource TimePickerSpacerFill}"
-                  HorizontalAlignment="Center"
-                  Width="{DynamicResource TimePickerSpacerThemeWidth}"
-                  Grid.Column="3" />
+                <Border x:Name="SecondPickerHost" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                  <TextBlock x:Name="MinuteTextBlock"
+                      HorizontalAlignment="Center"
+                      Padding="{DynamicResource TimePickerHostPadding}"
+                      FontFamily="{TemplateBinding FontFamily}"
+                      FontWeight="{TemplateBinding FontWeight}"
+                      FontSize="{TemplateBinding FontSize}"/>
+                </Border>
 
-              <Border x:Name="ThirdPickerHost" Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                <TextBlock x:Name="PeriodTextBlock"
+                <Rectangle Name="SecondColumnDivider"
+                    Fill="{DynamicResource TimePickerSpacerFill}"
                     HorizontalAlignment="Center"
-                    Padding="{DynamicResource TimePickerHostPadding}"
-                    FontFamily="{TemplateBinding FontFamily}"
-                    FontWeight="{TemplateBinding FontWeight}"
-                    FontSize="{TemplateBinding FontSize}" />
-              </Border>
-            </Grid>
-          </Button>
+                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                    Grid.Column="3" />
+
+                <Border x:Name="ThirdPickerHost" Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                  <TextBlock x:Name="PeriodTextBlock"
+                      HorizontalAlignment="Center"
+                      Padding="{DynamicResource TimePickerHostPadding}"
+                      FontFamily="{TemplateBinding FontFamily}"
+                      FontWeight="{TemplateBinding FontWeight}"
+                      FontSize="{TemplateBinding FontSize}" />
+                </Border>
+              </Grid>
+            </Button>
 
-          <Popup Name="Popup" WindowManagerAddShadowHint="False"
-                 IsLightDismissEnabled="True" PlacementTarget="{TemplateBinding}"
-                 PlacementMode="Bottom">
-            <TimePickerPresenter Name="PickerPresenter" />
-          </Popup>
+            <Popup Name="Popup" WindowManagerAddShadowHint="False"
+                   IsLightDismissEnabled="True" PlacementTarget="{TemplateBinding}"
+                   PlacementMode="Bottom">
+              <TimePickerPresenter Name="PickerPresenter" />
+            </Popup>
 
-        </Grid>
+          </Grid>
+        </DataValidationErrors>
       </ControlTemplate>
     </Setter>
   </Style>
@@ -161,6 +163,10 @@
   <Style Selector="TimePicker:hasnotime /template/ Button#FlyoutButton TextBlock">
     <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
   </Style>
+  
+  <Style Selector="TimePicker:error /template/ Button#FlyoutButton /template/ ContentPresenter">
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
+  </Style>
 
   <Style Selector="TimePickerPresenter">
     <Setter Property="Width" Value="242" />