ShrlAlgoToolkit/Melskin/Controls/TimePicker.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:assists="clr-namespace:Melskin.Assists"
    xmlns:controls="clr-namespace:Melskin.Controls">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Melskin;component/Controls/FlattenButton.xaml" />
    </ResourceDictionary.MergedDictionaries>
    <Style x:Key="TimePickerFlyoutListBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="Padding" Value="5,8" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border
                        x:Name="Bd"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}"
                        CornerRadius="4"
                        SnapsToDevicePixels="true">
                        <ContentPresenter
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{DynamicResource ControlBackgroundHoverBrush}" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{DynamicResource PrimaryNormalBrush}" />
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--  主 TimePicker 样式  -->
    <Style TargetType="{x:Type controls:TimePicker}">
        <Setter Property="Foreground" Value="{DynamicResource TextPrimaryBrush}" />
        <Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource BorderNormalBrush}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Padding" Value="10,4" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:TimePicker}">
                    <Grid x:Name="templateRoot">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Popup
                            x:Name="TimePickerPopup"
                            assists:BehaviorAssist.SimulateNativeBehavior="True"
                            AllowsTransparency="True"
                            Effect="{DynamicResource PopupShadow}"
                            IsOpen="{Binding IsChecked, ElementName=PART_ToggleButton, Mode=TwoWay}"
                            Placement="Bottom"
                            PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                            PopupAnimation="Fade"
                            StaysOpen="True">
                            <Border
                                MinWidth="{Binding ActualWidth, ElementName=templateRoot}"
                                Margin="10"
                                Background="{DynamicResource BackgroundFloatingBrush}"
                                CornerRadius="8"
                                Effect="{DynamicResource PopupShadow}">

                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <StackPanel
                                        Grid.Row="0"
                                        Margin="2"
                                        Orientation="Horizontal">
                                        <ListBox
                                            x:Name="HourSelector"
                                            Width="80"
                                            MaxHeight="240"
                                            Background="Transparent"
                                            BorderThickness="0"
                                            ItemContainerStyle="{StaticResource TimePickerFlyoutListBoxItemStyle}" />
                                        <ListBox
                                            x:Name="MinuteSelector"
                                            Width="80"
                                            MaxHeight="240"
                                            Background="Transparent"
                                            BorderThickness="0"
                                            ItemContainerStyle="{StaticResource TimePickerFlyoutListBoxItemStyle}" />
                                        <ListBox
                                            x:Name="PeriodSelector"
                                            Width="80"
                                            MaxHeight="240"
                                            Background="Transparent"
                                            BorderThickness="0"
                                            ItemContainerStyle="{StaticResource TimePickerFlyoutListBoxItemStyle}" />
                                    </StackPanel>
                                    <Border
                                        Grid.Row="1"
                                        Padding="5"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="0,1,0,0">
                                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                                            <Button
                                                x:Name="AcceptButton"
                                                Style="{StaticResource FlattenButtonStyle}"
                                                ToolTip="Accept">
                                                <controls:IconElement Symbol="Check" />
                                            </Button>
                                            <Button
                                                x:Name="DismissButton"
                                                Margin="5,0,0,0"
                                                Style="{StaticResource FlattenButtonStyle}"
                                                ToolTip="Dismiss">
                                                <controls:IconElement Symbol="Close" />
                                            </Button>
                                        </StackPanel>
                                    </Border>
                                </Grid>
                            </Border>
                        </Popup>
                        <!--  Header  -->
                        <ContentPresenter
                            Grid.Row="0"
                            Grid.Column="0"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="Center"
                            Content="{TemplateBinding Header}"
                            ContentSource="Header" />
                        <!--  使用ToggleButton作为点击触发器  -->
                        <ToggleButton
                            x:Name="PART_ToggleButton"
                            Grid.Column="1"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Cursor="Hand">
                            <!--  主显示区域  -->
                            <Border x:Name="ContentBorder" HorizontalAlignment="Center">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock
                                        x:Name="HourTextBlock"
                                        Padding="0,0,6,0"
                                        VerticalAlignment="Center"
                                        Text="--" />
                                    <TextBlock
                                        Margin="4,0"
                                        VerticalAlignment="Center"
                                        Text=":" />
                                    <TextBlock
                                        x:Name="MinuteTextBlock"
                                        Padding="6,0,0,0"
                                        VerticalAlignment="Center"
                                        Text="--" />
                                    <TextBlock
                                        x:Name="PeriodTextBlock"
                                        Margin="8,0"
                                        Text="AM" />
                                </StackPanel>
                            </Border>
                        </ToggleButton>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{DynamicResource ControlBackgroundHoverBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.5" />
                        </Trigger>
                        <Trigger Property="ClockIdentifier" Value="Clock24Hour">
                            <Setter TargetName="PeriodTextBlock" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="PeriodSelector" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>