ShrlAlgoToolkit/NeuWPF/NeoUI/Controls/TimePicker.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:controls="clr-namespace:NeoUI.Controls"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--  WinUI3 Style ListBoxItem for TimePicker  -->
    <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="#1A000000" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource SystemAccentColorLight1}" />
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--  WinUI3 Style Button for Flyout  -->
    <Style TargetType="Button" x:Key="FlyoutButtonStyle">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="#1A000000" />
        <Setter Property="FontFamily" Value="Segoe Fluent Icons" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="Padding" Value="12,6" />
        <Setter Property="Width" Value="40" />
        <Setter Property="Height" Value="40" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="4"
                        x:Name="Root">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="Root" Value="#1A000000" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="Root" Value="#33000000" />
                            <Setter Property="BorderBrush" TargetName="Root" Value="Transparent" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--  主 TimePicker 样式  -->
    <Style TargetType="{x:Type controls:TimePicker}">
        <!--  ... (大部分属性与上一版相同) ...  -->
        <Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
        <Setter Property="Background" Value="Transparent" />
        <!--  ToggleButton背景设为透明  -->
        <Setter Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefault}" />
        <Setter Property="BorderThickness" Value="0,0,0,1" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Padding" Value="12,8" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:TimePicker}">
                    <Grid>
                        <!--  Popup Flyout (位置已修改)  -->
                        <Popup
                            AllowsTransparency="True"
                            IsOpen="{Binding IsChecked, ElementName=PART_ToggleButton, Mode=TwoWay}"
                            Placement="Bottom"
                            PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                            PopupAnimation="Fade"
                            StaysOpen="False"
                            x:Name="TimePickerPopup">
                            <!--  ... (Popup内部结构与上一版相同) ...  -->
                            <Border
                                Background="{DynamicResource SmokeFillColorDefault}"
                                BorderBrush="{DynamicResource ControlElevationBorder}"
                                BorderThickness="1"
                                CornerRadius="8"
                                Margin="10">
                                <Border.Effect>
                                    <DropShadowEffect
                                        BlurRadius="8"
                                        Color="#80000000"
                                        Opacity="0.2"
                                        ShadowDepth="2" />
                                </Border.Effect>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <StackPanel
                                        Grid.Row="0"
                                        Margin="5"
                                        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}"
                                            Margin="5,0"
                                            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="{DynamicResource ControlStrokeColorDefault}"
                                        BorderThickness="0,1,0,0"
                                        Grid.Row="1"
                                        Padding="5">
                                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                                            <Button
                                                Content="&#xE8FB;"
                                                Style="{StaticResource FlyoutButtonStyle}"
                                                ToolTip="Accept"
                                                x:Name="AcceptButton" />
                                            <Button
                                                Content="&#xE711;"
                                                Margin="5,0,0,0"
                                                Style="{StaticResource FlyoutButtonStyle}"
                                                ToolTip="Dismiss"
                                                x:Name="DismissButton" />
                                        </StackPanel>
                                    </Border>
                                </Grid>
                            </Border>
                        </Popup>

                        <!--  使用ToggleButton作为点击触发器  -->
                        <ToggleButton
                            Background="{TemplateBinding Background}"
                            BorderThickness="0"
                            Cursor="Hand"
                            x:Name="PART_ToggleButton">
                            <ToggleButton.Style>
                                <Style TargetType="ToggleButton">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="ToggleButton">
                                                <Border
                                                    Background="{TemplateBinding Background}"
                                                    BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="{TemplateBinding BorderThickness}">
                                                    <ContentPresenter />
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ToggleButton.Style>

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

                                <!--  Header  -->
                                <ContentPresenter
                                    Content="{TemplateBinding Header}"
                                    ContentSource="Header"
                                    Grid.Row="0"
                                    Margin="0,0,0,4"
                                    Opacity="0.8" />

                                <!--  主显示区域  -->
                                <Border
                                    Background="{DynamicResource ControlFillColorDefault}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Grid.Row="1"
                                    Padding="{TemplateBinding Padding}"
                                    x:Name="ContentBorder">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock
                                            MinWidth="20"
                                            Text="--"
                                            TextAlignment="Center"
                                            x:Name="HourTextBlock" />
                                        <TextBlock Margin="4,0" Text=":" />
                                        <TextBlock
                                            MinWidth="24"
                                            Text="--"
                                            x:Name="MinuteTextBlock" />
                                        <TextBlock
                                            Margin="8,0"
                                            Text="AM"
                                            x:Name="PeriodTextBlock" />
                                    </StackPanel>
                                </Border>

                                <!--  底部高亮边框  -->
                                <Border
                                    Background="{DynamicResource SystemAccentColorLight1}"
                                    Grid.Row="1"
                                    Height="2"
                                    Opacity="0"
                                    VerticalAlignment="Bottom"
                                    x:Name="BottomHighlight" />
                            </Grid>
                        </ToggleButton>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <!--  将触发器目标指向ToggleButton或其内部元素  -->
                        <Trigger Property="IsMouseOver" SourceName="PART_ToggleButton" Value="True">
                            <Setter Property="Background" TargetName="ContentBorder" Value="{DynamicResource ControlFillColorSecondary}" />
                            <Setter Property="Opacity" TargetName="BottomHighlight" Value="0.7" />
                        </Trigger>
                        <Trigger Property="IsChecked" SourceName="PART_ToggleButton" Value="True">
                            <Setter Property="Background" TargetName="ContentBorder" Value="{DynamicResource ControlFillColorSecondary}" />
                            <Setter Property="Opacity" TargetName="BottomHighlight" Value="1" />
                        </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>
    <!--  You might need to define these brushes or link to a resource dictionary that has them  -->
    <SolidColorBrush Color="#E4000000" x:Key="TextControlForeground" />
    <SolidColorBrush Color="#80FFFFFF" x:Key="ControlFillColorDefault" />
    <SolidColorBrush Color="#40F9F9F9" x:Key="ControlFillColorSecondary" />
    <SolidColorBrush Color="#1A000000" x:Key="ControlStrokeColorDefault" />
    <Color x:Key="SystemAccentColor">#FF0078D4</Color>
    <SolidColorBrush Color="{StaticResource SystemAccentColor}" x:Key="SystemAccentColorLight1" />
    <SolidColorBrush Color="#F8F8F8" x:Key="SmokeFillColorDefault" />
    <SolidColorBrush Color="#1A000000" x:Key="ControlElevationBorder" />

</ResourceDictionary>