TimePicker.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:iNKORE.UI.WPF.Modern.Controls"
    xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
    xmlns:common="clr-namespace:iNKORE.UI.WPF.Modern.Common;assembly=iNKORE.UI.WPF.Modern" 
    xmlns:sys="clr-namespace:System;assembly=System.Runtime">

    <sys:Double x:Key="LoopingSelectorUpDownButtonScalePressed">0.800</sys:Double>

    <Style x:Key="DateTimePickerFlyoutLoopingSelectorNavigationButtonStyle" TargetType="ButtonBase">
        <Setter Property="Height" Value="{DynamicResource LoopingSelectorUpDownButtonHeight}"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="{DynamicResource LoopingSelectorUpDownButtonMargin}"/>
        <Setter Property="Background" Value="{DynamicResource LoopingSelectorUpDownButtonBackground}" />
        <Setter Property="Foreground" Value="{DynamicResource LoopingSelectorUpDownButtonForeground}" />
        <Setter Property="FontFamily" Value="{DynamicResource SymbolThemeFontFamily}"/>
        <Setter Property="FontSize" Value="8"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ButtonBase">
                    <Grid Background="{TemplateBinding Background}">
                        <Border x:Name="RootBorder" Padding="{TemplateBinding Padding}">
                            <TextBlock x:Name="Content" 
                                       Foreground="{TemplateBinding Foreground}" 
                                       FontSize="{TemplateBinding FontSize}" 
                                       FontFamily="{TemplateBinding FontFamily}" 
                                       Text="{TemplateBinding Content}" 
                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                       RenderTransformOrigin="0.5, 0.5">
                                <TextBlock.RenderTransform>
                                    <ScaleTransform x:Name="ScaleTransform" ScaleY="1" ScaleX="1" />
                                </TextBlock.RenderTransform>
                            </TextBlock>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="RootBorder" Property="Background" Value="{DynamicResource LoopingSelectorUpDownButtonBackgroundPointerOver}" />
                            <Setter TargetName="Content" Property="Foreground" Value="{DynamicResource LoopingSelectorUpDownButtonForegroundPointerOver}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Trigger.Setters>
                                <Setter TargetName="RootBorder" Property="Background" Value="{DynamicResource LoopingSelectorUpDownButtonBackgroundPressed}"/>
                                <Setter TargetName="Content" Property="Foreground" Value="{DynamicResource LoopingSelectorUpDownButtonForegroundPressed}" />
                            </Trigger.Setters>
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="PressedStoryboard">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX" RepeatBehavior="Forever">
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016" Value="{StaticResource LoopingSelectorUpDownButtonScalePressed}" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30" Value="{StaticResource LoopingSelectorUpDownButtonScalePressed}" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY" RepeatBehavior="Forever">
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.016" Value="{StaticResource LoopingSelectorUpDownButtonScalePressed}" />
                                            <DiscreteDoubleKeyFrame KeyTime="0:0:30" Value="{StaticResource LoopingSelectorUpDownButtonScalePressed}" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>

                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="PressedStoryboard"/>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style TargetType="local:DateTimeComponentSelector">
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
        <Setter Property="ScrollViewer.PanningMode" Value="VerticalOnly" />
        <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
        <Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
        <Setter Property="UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" />
        <Setter Property="ui:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="MaxHeight" Value="{DynamicResource LoopingSelectorMaxHeight}"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <local:DateTimeComponentSelectorPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Control">
                    <Grid SnapsToDevicePixels="True" VerticalAlignment="Stretch">
                        <ScrollViewer
                            x:Name="ScrollViewer"
                            Focusable="false"
                            HorizontalScrollBarVisibility="Disabled"
                            VerticalScrollBarVisibility="Hidden">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="0,-3,0,0"/>
                        </ScrollViewer>
                        <RepeatButton
                            x:Name="UpButton"
                            Content="&#xEDDB;"
                            Style="{StaticResource DateTimePickerFlyoutLoopingSelectorNavigationButtonStyle}"
                            VerticalAlignment="Top"
                            Visibility="Collapsed" />
                        <RepeatButton
                            x:Name="DownButton"
                            Content="&#xEDDC;"
                            Style="{StaticResource DateTimePickerFlyoutLoopingSelectorNavigationButtonStyle}"
                            VerticalAlignment="Bottom"
                            Visibility="Collapsed" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="UpButton" Property="Visibility" Value="Visible" />
                            <Setter TargetName="DownButton" Property="Visibility" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:DateTimeComponentSelectorItem">
        <Setter Property="Height" Value="{DynamicResource TimePickerFlyoutPresenterItemHeight}" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Foreground" Value="{DynamicResource LoopingSelectorItemForeground}" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="ui:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:DateTimeComponentSelectorItem">
                    <Border
                        x:Name="Root"
                        ui:PressHelper.IsEnabled="True"
                        Background="Transparent"
                        Margin="{DynamicResource LoopingSelectorItemMargin}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                        CornerRadius="{TemplateBinding ui:ControlHelper.CornerRadius}">
                        <ContentPresenter
                            x:Name="ContentPresenter"
                            Margin="2,0,2,0"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            TextElement.Foreground="{TemplateBinding Foreground}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True" />
                                <Condition Binding="{Binding SuppressItemMouseOver, RelativeSource={RelativeSource AncestorType={x:Type local:DateTimeComponentSelector}}}" Value="False" />
                            </MultiDataTrigger.Conditions>
                            <Setter TargetName="Root" Property="Background" Value="{DynamicResource LoopingSelectorItemBackgroundPointerOver}" />
                            <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource LoopingSelectorItemForegroundPointerOver}" />
                        </MultiDataTrigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Root" Property="Background" Value="{DynamicResource LoopingSelectorItemBackgroundSelected}" />
                            <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource TimePickerFlyoutPresenterHighlightForegroundBrush}" />
                        </Trigger>
                        <Trigger SourceName="Root" Property="ui:PressHelper.IsPressed" Value="True">
                            <Setter TargetName="Root" Property="Background" Value="{DynamicResource LoopingSelectorItemBackgroundPressed}" />
                            <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource LoopingSelectorItemForegroundPressed}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:TimePicker">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="{DynamicResource DatePickerButtonBackground}" />
        <Setter Property="BorderBrush" Value="{DynamicResource DatePickerButtonBorderBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource TimePickerButtonForeground}" />
        <Setter Property="BorderThickness" Value="{DynamicResource DatePickerBorderThemeThickness}" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="UseSystemFocusVisuals" Value="{DynamicResource IsApplicationFocusVisualKindReveal}" />
        <Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
        <Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="-3" />
        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
        <Setter Property="PickerVisibility" Value="HourMinute" />
        <Setter Property="MinutesItemStringFormat" Value="D2" />
        <Setter Property="SecondsItemStringFormat" Value="D2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:TimePicker">
                    <Grid
                        x:Name="LayoutRoot"
                        Margin="{TemplateBinding Padding}"
                        SnapsToDevicePixels="True">

                        <Grid.Resources>
                            <Style x:Key="TimePickerFlyoutButtonStyle" TargetType="Button">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Grid Background="{TemplateBinding Background}">
                                                <ui:ElevationBorder
                                                    x:Name="Border"
                                                    Background="{TemplateBinding Background}"
                                                    BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="{TemplateBinding BorderThickness}"
                                                    CornerRadius="{TemplateBinding ui:ControlHelper.CornerRadius}">
                                                    <ContentPresenter
                                                        x:Name="ContentPresenter"
                                                        HorizontalAlignment="Stretch"
                                                        VerticalAlignment="Stretch"
                                                        TextElement.Foreground="{TemplateBinding Foreground}" />
                                                </ui:ElevationBorder>
                                            </Grid>

                                            <ControlTemplate.Triggers>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPointerOver}" />
                                                    <Setter TargetName="Border" Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPointerOver}" />
                                                    <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource TimePickerButtonForegroundPointerOver}" />
                                                </Trigger>
                                                <Trigger Property="IsPressed" Value="True">
                                                    <Setter TargetName="Border" Property="Background" Value="{DynamicResource TimePickerButtonBackgroundPressed}" />
                                                    <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushPressed}" />
                                                    <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource TimePickerButtonForegroundPressed}" />
                                                </Trigger>
                                                <Trigger Property="IsEnabled" Value="False">
                                                    <Setter TargetName="Border" Property="Background" Value="{DynamicResource TimePickerButtonBackgroundDisabled}" />
                                                    <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource TimePickerButtonBorderBrushDisabled}" />
                                                    <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource TimePickerButtonForegroundDisabled}" />
                                                </Trigger>
                                            </ControlTemplate.Triggers>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                            <local:DateTimeComponentSelectorItemsConverter x:Key="ItemsConverter" />
                        </Grid.Resources>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <ui:ContentPresenterEx
                            x:Name="HeaderContentPresenter"
                            Grid.Row="0"
                            MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
                            Margin="{DynamicResource TimePickerTopHeaderMargin}"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Top"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            Foreground="{DynamicResource TimePickerHeaderForeground}"
                            TextWrapping="Wrap"
                            Visibility="{TemplateBinding ui:ControlHelper.HeaderVisibility}" />
                        <Button
                            x:Name="PART_Button"
                            Grid.Row="1"
                            MinWidth="{DynamicResource TimePickerThemeMinWidth}"
                            MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Top"
                            HorizontalContentAlignment="Stretch"
                            ui:ControlHelper.CornerRadius="{TemplateBinding CornerRadius}"
                            ui:FocusVisualHelper.UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
                            ui:FocusVisualHelper.FocusVisualMargin="{TemplateBinding ui:FocusVisualHelper.FocusVisualMargin}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            FocusVisualStyle="{TemplateBinding FocusVisualStyle}"
                            Foreground="{TemplateBinding Foreground}"
                            IsEnabled="{TemplateBinding IsEnabled}"
                            Style="{StaticResource TimePickerFlyoutButtonStyle}">
                            <Grid x:Name="FlyoutButtonContentGrid">

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="FirstTextBlockColumn" Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition x:Name="SecondTextBlockColumn" Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition x:Name="ThirdTextBlockColumn" Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition x:Name="FourthTextBlockColumn" Width="*" />
                                </Grid.ColumnDefinitions>
                                <Border x:Name="FirstPickerHost" Grid.Column="0">
                                    <TextBlock
                                        x:Name="HourTextBlock"
                                        Padding="{DynamicResource TimePickerHostPadding}"
                                        FontFamily="{TemplateBinding FontFamily}"
                                        FontSize="{TemplateBinding FontSize}"
                                        FontWeight="{TemplateBinding FontWeight}"
                                        TextAlignment="Center" />
                                </Border>
                                <Rectangle
                                    x:Name="FirstColumnDivider"
                                    Grid.Column="1"
                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
                                    HorizontalAlignment="Center"
                                    Fill="{DynamicResource TimePickerSpacerFill}" />
                                <Border x:Name="SecondPickerHost" Grid.Column="2">
                                    <TextBlock
                                        x:Name="MinuteTextBlock"
                                        Padding="{DynamicResource TimePickerHostPadding}"
                                        FontFamily="{TemplateBinding FontFamily}"
                                        FontSize="{TemplateBinding FontSize}"
                                        FontWeight="{TemplateBinding FontWeight}"
                                        TextAlignment="Center" />
                                </Border>
                                <Rectangle
                                    x:Name="SecondColumnDivider"
                                    Grid.Column="3"
                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
                                    HorizontalAlignment="Center"
                                    Fill="{DynamicResource TimePickerSpacerFill}" />
                                <Border x:Name="ThirdPickerHost" Grid.Column="4">
                                    <TextBlock
                                        x:Name="SecondTextBlock"
                                        Padding="{DynamicResource TimePickerHostPadding}"
                                        FontFamily="{TemplateBinding FontFamily}"
                                        FontSize="{TemplateBinding FontSize}"
                                        FontWeight="{TemplateBinding FontWeight}"
                                        TextAlignment="Center" />
                                </Border>
                                <Rectangle
                                    x:Name="ThirdColumnDivider"
                                    Grid.Column="5"
                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
                                    HorizontalAlignment="Center"
                                    Fill="{DynamicResource TimePickerSpacerFill}" />
                                <Border x:Name="FourthPickerHost" Grid.Column="6">
                                    <TextBlock
                                        x:Name="PeriodTextBlock"
                                        Padding="{DynamicResource TimePickerHostPadding}"
                                        FontFamily="{TemplateBinding FontFamily}"
                                        FontSize="{TemplateBinding FontSize}"
                                        FontWeight="{TemplateBinding FontWeight}"
                                        TextAlignment="Center" />
                                </Border>
                            </Grid>
                        </Button>

                        <Popup
                            x:Name="PART_Popup"
                            Grid.Row="1"
                            AllowsTransparency="True"
                            CacheMode="{Binding RelativeSource={RelativeSource Self}, Path=(common:ShadowAssist.CacheMode)}"
                            Focusable="False"
                            Placement="Center"
                            PlacementTarget="{Binding ElementName=PART_Button}"
                            PopupAnimation="None"
                            StaysOpen="False"
                            VerticalOffset="{DynamicResource TimePickerPopupVerticalOffset}">
                            <ui:ThemeShadowChrome
                                MinWidth="{Binding ActualWidth, ElementName=PART_Button}"
                                CornerRadius="{DynamicResource ControlCornerRadius}"
                                IsShadowEnabled="{DynamicResource {x:Static SystemParameters.DropShadowKey}}">
                                <Border
                                    x:Name="Background"
                                    Width="242"
                                    MinWidth="242"
                                    MinHeight="{DynamicResource TimePickerFlyoutPresenterHeight}"
                                    MaxHeight="{DynamicResource TimePickerFlyoutPresenterHeight}"
                                    Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
                                    Background="{DynamicResource TimePickerFlyoutPresenterBackground}"
                                    BorderBrush="{DynamicResource TimePickerFlyoutPresenterBorderBrush}"
                                    BorderThickness="{DynamicResource DateTimeFlyoutBorderThickness}"
                                    CornerRadius="{DynamicResource ControlCornerRadius}">
                                    <Grid x:Name="ContentPanel" >
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition x:Name="FirstPickerHostColumn" Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition x:Name="SecondPickerHostColumn" Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition x:Name="ThirdPickerHostColumn" Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition x:Name="FourthPickerHostColumn" Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Border
                                                x:Name="HighlightRect"
                                                Grid.Column="0"
                                                Grid.ColumnSpan="7"
                                                Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}"
                                                IsHitTestVisible="False"
                                                Margin="4,2,4,2"
                                                VerticalAlignment="Center"
                                                BorderThickness="0"
                                                CornerRadius="{TemplateBinding CornerRadius}"
                                                Background="{DynamicResource TimePickerFlyoutPresenterHighlightFill}" />
                                            
                                            <local:DateTimeComponentSelector
                                                    x:Name="PART_HourPicker"
                                                    Grid.Column="0"
                                                    ItemStringFormat="{TemplateBinding HoursItemStringFormat}"
                                                    ItemsSource="{TemplateBinding SourceHours,
                                                                                  Converter={StaticResource ItemsConverter}}" />
                                            
                                            <Rectangle
                                                    x:Name="FirstPickerSpacing"
                                                    Grid.Column="1"
                                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
                                                    HorizontalAlignment="Center"
                                                    Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
                                            
                                            <local:DateTimeComponentSelector
                                                    x:Name="PART_MinutePicker"
                                                    Grid.Column="2"
                                                    ItemStringFormat="{TemplateBinding MinutesItemStringFormat}"
                                                    ItemsSource="{TemplateBinding SourceMinutes,
                                                                                  Converter={StaticResource ItemsConverter}}" />
                                            <Rectangle
                                                    x:Name="SecondPickerSpacing"
                                                    Grid.Column="3"
                                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
                                                    HorizontalAlignment="Center"
                                                    Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
                                            
                                            <local:DateTimeComponentSelector
                                                    x:Name="PART_SecondPicker"
                                                    Grid.Column="4"
                                                    ItemStringFormat="{TemplateBinding SecondsItemStringFormat}"
                                                    ItemsSource="{TemplateBinding SourceSeconds,
                                                                                  Converter={StaticResource ItemsConverter}}" />
                                            <Rectangle
                                                    x:Name="ThirdPickerSpacing"
                                                    Grid.Column="5"
                                                    Width="{DynamicResource TimePickerSpacerThemeWidth}"
                                                    HorizontalAlignment="Center"
                                                    Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
                                            <local:DateTimeComponentSelector x:Name="PART_AmPmSwitcher" Grid.Column="6" />
                                        </Grid>
                                        <Grid
                                                x:Name="AcceptDismissHostGrid"
                                                Grid.Row="1"
                                                Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Rectangle
                                                    Grid.ColumnSpan="2"
                                                    Height="{DynamicResource TimePickerSpacerThemeWidth}"
                                                    VerticalAlignment="Top"
                                                    Fill="{DynamicResource TimePickerFlyoutPresenterSpacerFill}" />
                                            <Button
                                                x:Name="AcceptButton"
                                                Grid.Column="0"
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch"
                                                Content="&#xE8FB;"
                                                Padding="4"
                                                Margin="{DynamicResource DatePickerFlyoutPresenterDismissMargin}" 
                                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                                FontSize="16"
                                                IsDefault="True"
                                                Style="{DynamicResource DateTimePickerFlyoutButtonStyle}" />
                                            <Button
                                                x:Name="DismissButton"
                                                Grid.Column="1"
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch"
                                                Padding="4"
                                                Margin="{DynamicResource DatePickerFlyoutPresenterDismissMargin}" 
                                                Content="&#xE711;"
                                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                                FontSize="16"
                                                IsCancel="True"
                                                Style="{DynamicResource DateTimePickerFlyoutButtonStyle}" />
                                        </Grid>
                                    </Grid>
                                </Border>
                            </ui:ThemeShadowChrome>
                        </Popup>
                        
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="HeaderContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource TimePickerHeaderForegroundDisabled}" />
                            <Setter TargetName="FirstColumnDivider" Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}" />
                            <Setter TargetName="SecondColumnDivider" Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}" />
                            <Setter TargetName="ThirdColumnDivider" Property="Fill" Value="{DynamicResource TimePickerSpacerFillDisabled}" />
                        </Trigger>
                        <!--  HasNoTime  -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition  Property="SelectedDateTime" Value="{x:Null}"/>
                                <Condition  Property="IsMouseOver" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Button" Property="Foreground" Value="{DynamicResource TimePickerButtonForegroundDefault}" />
                        </MultiTrigger>
                        <Trigger SourceName="PART_HourPicker" Property="Visibility" Value="Collapsed">
                            <Setter TargetName="FirstTextBlockColumn" Property="Width" Value="Auto" />
                            <Setter TargetName="FirstColumnDivider" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="FirstPickerHost" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="FirstPickerHostColumn" Property="Width" Value="Auto" />
                            <Setter TargetName="FirstPickerSpacing" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger SourceName="PART_MinutePicker" Property="Visibility" Value="Collapsed">
                            <Setter TargetName="SecondTextBlockColumn" Property="Width" Value="Auto" />
                            <Setter TargetName="FirstColumnDivider" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="SecondPickerHost" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="SecondPickerHostColumn" Property="Width" Value="Auto" />
                            <Setter TargetName="FirstPickerSpacing" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger SourceName="PART_SecondPicker" Property="Visibility" Value="Collapsed">
                            <Setter TargetName="ThirdTextBlockColumn" Property="Width" Value="Auto" />
                            <Setter TargetName="SecondColumnDivider" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="ThirdPickerHost" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="ThirdPickerHostColumn" Property="Width" Value="Auto" />
                            <Setter TargetName="SecondPickerSpacing" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger SourceName="PART_AmPmSwitcher" Property="Visibility" Value="Collapsed">
                            <Setter TargetName="FourthTextBlockColumn" Property="Width" Value="Auto" />
                            <Setter TargetName="ThirdColumnDivider" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="FourthPickerHost" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="FourthPickerHostColumn" Property="Width" Value="Auto" />
                            <Setter TargetName="ThirdPickerSpacing" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>