Avalonia/src/Avalonia.Themes.Fluent/Controls/TimePicker.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"
        x:ClassModifier="internal">
  <Design.PreviewWith>
    <Border Padding="20" Height="500">
      <StackPanel Spacing="20" VerticalAlignment="Center">
        <TimePicker />
        <TimePicker CornerRadius="10" />
        <TimePicker IsEnabled="False"/>
        <TimePicker>
          <DataValidationErrors.Error>
            <sys:Exception>
              <x:Arguments>
                <x:String>Error</x:String>
              </x:Arguments>
            </sys:Exception>
          </DataValidationErrors.Error>
        </TimePicker>
      </StackPanel>
    </Border>
  </Design.PreviewWith>

  <x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double>
  <x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double>
  <Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness>
  <x:Double x:Key="TimePickerFlyoutPresenterHighlightHeight">40</x:Double>
  <x:Double x:Key="TimePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
  <x:Double x:Key="TimePickerThemeMinWidth">242</x:Double>
  <x:Double x:Key="TimePickerThemeMaxWidth">456</x:Double>
  <Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
  <Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness>

  <ControlTheme x:Key="FluentTimePickerFlyoutButton" 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 TimePickerButtonBackgroundPressed}"/>
      <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}"/>
    </Style>

    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}"/>
      <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}"/>
      <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}"/>
    </Style>
  </ControlTheme>

  <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
    <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
    <Setter Property="Background" Value="{DynamicResource TimePickerButtonBackground}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrush}"/>
    <Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}"/>
    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="MinWidth" Value="{DynamicResource TimePickerThemeMinWidth}" />
    <Setter Property="MaxWidth" Value="{DynamicResource TimePickerThemeMaxWidth}" />
    <Setter Property="Template">
      <ControlTemplate>
        <DataValidationErrors>
          <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
            <Button x:Name="PART_FlyoutButton"
                    Theme="{StaticResource FluentTimePickerFlyoutButton}"
                    Foreground="{TemplateBinding Foreground}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    IsEnabled="{TemplateBinding IsEnabled}"
                    MinWidth="{TemplateBinding MinWidth}"
                    MaxWidth="{TemplateBinding MaxWidth}"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch">

              <Grid Name="PART_FlyoutButtonContentGrid">
                <!--Ignore col defs here, set in code-->
                <Border x:Name="PART_FirstPickerHost"
                        Grid.Column="0"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                  <TextBlock x:Name="PART_HourTextBlock"
                      Text="{DynamicResource StringTimePickerHourText}"
                      HorizontalAlignment="Center"
                      Padding="{DynamicResource TimePickerHostPadding}" />
                </Border>

                <Rectangle Name="PART_FirstColumnDivider"
                           Fill="{DynamicResource TimePickerSpacerFill}"
                           HorizontalAlignment="Center"
                           Width="{DynamicResource TimePickerSpacerThemeWidth}"
                           Grid.Column="1" />

                <Border x:Name="PART_SecondPickerHost"
                        Grid.Column="2"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                  <TextBlock x:Name="PART_MinuteTextBlock"
                             Text="{DynamicResource StringTimePickerMinuteText}"
                             HorizontalAlignment="Center"
                             Padding="{DynamicResource TimePickerHostPadding}"/>
                </Border>

                <Rectangle Name="PART_SecondColumnDivider"
                           Fill="{DynamicResource TimePickerSpacerFill}"
                           HorizontalAlignment="Center"
                           Width="{DynamicResource TimePickerSpacerThemeWidth}"
                           Grid.Column="3" />
                
                <Border x:Name="PART_ThirdPickerHost"
                        Grid.Column="4"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                  <TextBlock x:Name="PART_SecondTextBlock"
                             Text="{DynamicResource StringTimePickerSecondText}"
                             HorizontalAlignment="Center"
                             Padding="{DynamicResource TimePickerHostPadding}"/>
                </Border>

                <Rectangle Name="PART_ThirdColumnDivider"
                           Fill="{DynamicResource TimePickerSpacerFill}"
                           HorizontalAlignment="Center"
                           Width="{DynamicResource TimePickerSpacerThemeWidth}"
                           Grid.Column="5" />

                <Border x:Name="PART_FourthPickerHost"
                        Grid.Column="6"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                  <TextBlock x:Name="PART_PeriodTextBlock"
                             HorizontalAlignment="Center"
                             Padding="{DynamicResource TimePickerHostPadding}" />
                </Border>
              </Grid>
            </Button>

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

          </Grid>
        </DataValidationErrors>
      </ControlTemplate>
    </Setter>
    
    <Style Selector="^:disabled /template/ Rectangle">
      <Setter Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}"/>
    </Style>

    <Style Selector="^:hasnotime /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>

  <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
    <Setter Property="Width" Value="242" />
    <Setter Property="MinWidth" Value="242" />
    <Setter Property="MaxHeight" Value="398" />
    <Setter Property="Background" Value="{DynamicResource TimePickerFlyoutPresenterBackground}" />
    <Setter Property="BorderBrush" Value="{DynamicResource TimePickerFlyoutPresenterBorderBrush}" />
    <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}"
                CornerRadius="{TemplateBinding CornerRadius}"
                Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
                MaxHeight="398">
          <Grid Name="ContentPanel" RowDefinitions="*,Auto">
            <Grid Name="PART_PickerContainer">
              <!--Ignore col defs here, set in code-->
              <Panel Name="PART_HourHost" Grid.Column="0">
                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                              VerticalScrollBarVisibility="Hidden">
                  <DateTimePickerPanel Name="PART_HourSelector"
                                       PanelType="Hour"
                                       ShouldLoop="True"
                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
                </ScrollViewer>
                <RepeatButton Name="PART_HourUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
                <RepeatButton Name="PART_HourDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
              </Panel>

              <Panel Name="PART_MinuteHost" Grid.Column="2">
                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                              VerticalScrollBarVisibility="Hidden">
                  <DateTimePickerPanel Name="PART_MinuteSelector"
                                       PanelType="Minute"
                                       ShouldLoop="True"
                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
                </ScrollViewer>
                <RepeatButton Name="PART_MinuteUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
                <RepeatButton Name="PART_MinuteDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
              </Panel>
              
              <Panel Name="PART_SecondHost" Grid.Column="4">
                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                              VerticalScrollBarVisibility="Hidden">
                  <DateTimePickerPanel Name="PART_SecondSelector"
                                       PanelType="Second"
                                       ShouldLoop="True"
                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
                </ScrollViewer>
                <RepeatButton Name="PART_SecondUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
                <RepeatButton Name="PART_SecondDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
              </Panel>

              <Panel Name="PART_PeriodHost" Grid.Column="6">
                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                              VerticalScrollBarVisibility="Hidden">
                  <DateTimePickerPanel Name="PART_PeriodSelector"
                                       PanelType="TimePeriod"
                                       ShouldLoop="False"
                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"/>
                </ScrollViewer>
                <RepeatButton Name="PART_PeriodUpButton" Theme="{StaticResource FluentDateTimePickerUpButton}"/>
                <RepeatButton Name="PART_PeriodDownButton" Theme="{StaticResource FluentDateTimePickerDownButton}"/>
              </Panel>

              <Rectangle x:Name="HighlightRect" ZIndex="-1"
                         Fill="{DynamicResource TimePickerFlyoutPresenterHighlightFill}"
                         Grid.Column="0"
                         Grid.ColumnSpan="7"
                         VerticalAlignment="Center"
                         Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}" />
              <Rectangle Name="PART_FirstSpacer"
                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
                         HorizontalAlignment="Center"
                         Width="{DynamicResource TimePickerSpacerThemeWidth}"
                         Grid.Column="1" />
              <Rectangle Name="PART_SecondSpacer"
                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
                         HorizontalAlignment="Center"
                         Width="{DynamicResource TimePickerSpacerThemeWidth}"
                         Grid.Column="3" />
              <Rectangle Name="PART_ThirdSpacer"
                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
                         HorizontalAlignment="Center"
                         Width="{DynamicResource TimePickerSpacerThemeWidth}"
                         Grid.Column="5" />
            </Grid>

            <Grid Name="AcceptDismissGrid"
                  Grid.Row="1"
                  ColumnDefinitions="*,*">
              <Rectangle Height="{DynamicResource TimePickerSpacerThemeWidth}" 
                         VerticalAlignment="Top"
                         Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}"
                         Grid.ColumnSpan="2"/>
              <Button Name="PART_AcceptButton"
                      Grid.Column="0"
                      Theme="{StaticResource FluentDateTimePickerButton}"
                      Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
                      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 TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
                      FontSize="16" 
                      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>