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

<!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see https://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
-->

<ResourceDictionary xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="using:System">
  <Design.PreviewWith>
    <Border Padding="20" Height="500">
      <StackPanel Spacing="20" VerticalAlignment="Center">
        <DatePicker />
        <DatePicker CornerRadius="10" />
        <DatePicker IsEnabled="False" />
        <DatePicker>
          <DataValidationErrors.Error>
            <sys:Exception>
              <x:Arguments>
                <x:String>Error</x:String>
              </x:Arguments>
            </sys:Exception>
          </DataValidationErrors.Error>
        </DatePicker>
      </StackPanel>
    </Border>
  </Design.PreviewWith>

  <x:Double x:Key="DatePickerFlyoutPresenterHighlightHeight">40</x:Double>
  <x:Double x:Key="DatePickerFlyoutPresenterItemHeight">40</x:Double>
  <x:Double x:Key="DatePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
  <x:Double x:Key="DatePickerThemeMinWidth">296</x:Double>
  <x:Double x:Key="DatePickerThemeMaxWidth">456</x:Double>
  <Thickness x:Key="DatePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
  <Thickness x:Key="DatePickerFlyoutPresenterMonthPadding">9,3,0,6</Thickness>
  <Thickness x:Key="DatePickerHostPadding">0,3,0,6</Thickness>
  <Thickness x:Key="DatePickerHostMonthPadding">9,3,0,6</Thickness>
  <x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double>

  <ControlTheme x:Key="FluentDatePickerFlyoutButton" TargetType="Button">
    <Setter Property="RenderTransform" Value="none" />
    <Setter Property="Template">
      <ControlTemplate>
        <ContentPresenter Name="PART_ContentPresenter"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          Background="{TemplateBinding Background}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          Content="{TemplateBinding Content}"
                          Foreground="{TemplateBinding Foreground}"
                          HorizontalContentAlignment="Stretch"
                          VerticalContentAlignment="Stretch"
                          CornerRadius="{TemplateBinding CornerRadius}"/>
      </ControlTemplate>
    </Setter>
    
    <Style Selector="^:pressed">
      <Setter Property="RenderTransform" Value="scale(0.98)" />
    </Style>
    
    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundPressed}"/>
      <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundPressed}"/>
    </Style>

    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrushDisabled}"/>
      <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackgroundDisabled}"/>
      <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForegroundDisabled}"/>
    </Style>
  </ControlTheme>
  
  <ControlTheme x:Key="{x:Type DatePicker}" TargetType="DatePicker">
    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
    <Setter Property="Foreground" Value="{DynamicResource DatePickerButtonForeground}" />
    <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackground}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrush}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Template">
      <ControlTemplate>
        <DataValidationErrors>
          <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
            <Button Name="PART_FlyoutButton"
                    Theme="{StaticResource FluentDatePickerFlyoutButton}"
                    Foreground="{TemplateBinding Foreground}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    IsEnabled="{TemplateBinding IsEnabled}"
                    MinWidth="{DynamicResource DatePickerThemeMinWidth}"
                    MaxWidth="{DynamicResource DatePickerThemeMaxWidth}"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    TemplatedControl.IsTemplateFocusTarget="True">
              <Grid Name="PART_ButtonContentGrid" ColumnDefinitions="78*,Auto,132*,Auto,78*">
                <TextBlock Name="PART_DayTextBlock" Text="day" HorizontalAlignment="Center"
                           Padding="{DynamicResource DatePickerHostPadding}"
                           FontFamily="{TemplateBinding FontFamily}"
                           FontWeight="{TemplateBinding FontWeight}"
                           FontSize="{TemplateBinding FontSize}"/>
                <TextBlock Name="PART_MonthTextBlock" Text="month" TextAlignment="Left"
                           Padding="{DynamicResource DatePickerHostMonthPadding}"
                           FontFamily="{TemplateBinding FontFamily}"
                           FontWeight="{TemplateBinding FontWeight}"
                           FontSize="{TemplateBinding FontSize}"/>
                <TextBlock Name="PART_YearTextBlock" Text="year" HorizontalAlignment="Center"
                           Padding="{DynamicResource DatePickerHostPadding}"
                           FontFamily="{TemplateBinding FontFamily}"
                           FontWeight="{TemplateBinding FontWeight}"
                           FontSize="{TemplateBinding FontSize}"/>
                <Rectangle x:Name="PART_FirstSpacer"
                      Fill="{DynamicResource DatePickerSpacerFill}"
                      HorizontalAlignment="Center"
                      Width="1"
                      Grid.Column="1" />
                <Rectangle x:Name="PART_SecondSpacer"
                      Fill="{DynamicResource DatePickerSpacerFill}"
                      HorizontalAlignment="Center"
                      Width="1"
                      Grid.Column="3" />
              </Grid>
            </Button>

            <Popup Name="PART_Popup" WindowManagerAddShadowHint="False"
                   IsLightDismissEnabled="True" PlacementTarget="{TemplateBinding}"
                   Placement="Bottom">
              <DatePickerPresenter Name="PART_PickerPresenter" />
            </Popup>

          </Grid>
        </DataValidationErrors>
      </ControlTemplate>
    </Setter>

    <Style Selector="^:disabled /template/ Rectangle">
      <Setter Property="Fill" Value="{DynamicResource DatePickerSpacerFillDisabled}"/>
    </Style>

    <!-- Changes foreground for watermark text when SelectedDate is null-->
    <Style Selector="^:hasnodate /template/ Button#PART_FlyoutButton TextBlock">
      <Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForeground}"/>
    </Style>

    <Style Selector="^:error /template/ Button#PART_FlyoutButton">
      <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
    </Style>
  </ControlTheme>

  <!--WinUI: DatePickerFlyoutPresenter-->
  <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
    <Setter Property="Width" Value="296" />
    <Setter Property="MinWidth" Value="296" />
    <Setter Property="MaxHeight" Value="398" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="{DynamicResource DatePickerFlyoutPresenterBackground}" />
    <Setter Property="BorderBrush" Value="{DynamicResource DatePickerFlyoutPresenterBorderBrush}" />
    <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
    <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
    <Setter Property="Template">
      <ControlTemplate>
        <Border Name="Background" Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
                MaxHeight="398" CornerRadius="{TemplateBinding CornerRadius}">
          <Grid Name="ContentRoot" RowDefinitions="*,Auto">
            <Grid Name="PART_PickerContainer">
              <Grid.Styles>
                <Style Selector="DateTimePickerPanel > ListBoxItem">
                  <Setter Property="Theme" Value="{StaticResource FluentDateTimePickerItem}" />
                </Style>
              </Grid.Styles>
              <!--Column Definitions set in code, ignore here-->
              <Panel Name="PART_MonthHost">
                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                              VerticalScrollBarVisibility="Hidden">
                  <DateTimePickerPanel Name="PART_MonthSelector"
                                       PanelType="Month"
                                       ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
                                       ShouldLoop="True" />
                </ScrollViewer>
                <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
                <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
              </Panel>
              <Panel Name="PART_DayHost">
                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                              VerticalScrollBarVisibility="Hidden">
                  <DateTimePickerPanel Name="PART_DaySelector"
                                       PanelType="Day"
                                       ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
                                       ShouldLoop="True" />
                </ScrollViewer>
                <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
                <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
              </Panel>
              <Panel Name="PART_YearHost">
                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                              VerticalScrollBarVisibility="Hidden">
                  <DateTimePickerPanel Name="PART_YearSelector"
                                       PanelType="Year"
                                       ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
                                       ShouldLoop="False" />
                </ScrollViewer>
                <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
                <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
              </Panel>
              <Rectangle Name="HighlightRect" IsHitTestVisible="False" ZIndex="-1"
                         Fill="{DynamicResource DatePickerFlyoutPresenterHighlightFill}"
                         Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center"
                         Height="{DynamicResource DatePickerFlyoutPresenterHighlightHeight}" />
              <Rectangle Name="PART_FirstSpacer"
                         Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}"
                         HorizontalAlignment="Center"
                         Width="{DynamicResource DatePickerSpacerThemeWidth}"
                         Grid.Column="1" />
              <Rectangle Name="PART_SecondSpacer"
                         Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}"
                         HorizontalAlignment="Center"
                         Width="{DynamicResource DatePickerSpacerThemeWidth}"
                         Grid.Column="3" />
            </Grid>

            <Grid Name="AcceptDismissGrid"
                  Grid.Row="1"
                  ColumnDefinitions="*,*">
              <Rectangle Height="{DynamicResource DatePickerSpacerThemeWidth}" 
                         VerticalAlignment="Top"
                         Fill="{DynamicResource DatePickerFlyoutPresenterSpacerFill}"
                         Grid.ColumnSpan="2"/>
              <Button Name="PART_AcceptButton"
                      Grid.Column="0"
                      Theme="{StaticResource FluentDateTimePickerButton}"
                      Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch">
                <Path Stroke="{Binding $parent[Button].Foreground}"
                      StrokeLineCap="Round"
                      StrokeThickness="0.75"
                      Data="M0.5,8.5 5,13.5 15.5,3" />
              </Button>
              <Button Name="PART_DismissButton"
                      Grid.Column="1"
                      Theme="{StaticResource FluentDateTimePickerButton}"
                      Height="{DynamicResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}"
                      HorizontalAlignment="Stretch" 
                      VerticalAlignment="Stretch">
                <Path Stroke="{Binding $parent[Button].Foreground}" 
                      StrokeLineCap="Round"
                      StrokeThickness="0.75" 
                      Data="M2,2 14,14 M2,14 14 2" />
              </Button>
            </Grid>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter>

    <Style Selector="^ /template/ Panel">
      <Style Selector="^:pointerover RepeatButton">
        <Setter Property="IsVisible" Value="True" />
      </Style>
    </Style>
  </ControlTheme>


</ResourceDictionary>