Shrlalgo.RvKits/Melskin/Controls/TimePicker.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:assists="clr-namespace:Melskin.Assists"
    xmlns:controls="clr-namespace:Melskin.Controls"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Melskin;component/Controls/FlattenButton.xaml" />
    </ResourceDictionary.MergedDictionaries>
    <Style TargetType="ListBoxItem" x:Key="TimePickerFlyoutListBoxItemStyle">
        <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
                        Background="{TemplateBinding Background}"
                        CornerRadius="4"
                        Padding="{TemplateBinding Padding}"
                        SnapsToDevicePixels="true"
                        x:Name="Bd">
                        <ContentPresenter
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource ControlBackgroundHoverBrush}" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" TargetName="Bd" 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
                            AllowsTransparency="True"
                            Effect="{DynamicResource PopupShadow}"
                            IsOpen="{Binding IsChecked, ElementName=PART_ToggleButton, Mode=TwoWay}"
                            Placement="Bottom"
                            PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                            PopupAnimation="Fade"
                            StaysOpen="True"
                            assists:BehaviorAssist.SimulateNativeBehavior="True"
                            x:Name="TimePickerPopup">
                            <Border
                                Background="{DynamicResource BackgroundFloatingBrush}"
                                CornerRadius="8"
                                Effect="{DynamicResource PopupShadow}"
                                Margin="10"
                                MinWidth="{Binding ActualWidth, ElementName=templateRoot}">

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

</ResourceDictionary>