如何从 UWP TimePicker 中删除按钮

Question

我需要从 TimePicker-Controll Flyout 中删除底部的按钮。这种风格做到了，但我看不出魔法在哪里发生：

<Style x:Key="TimePickerStyle1" TargetType="TimePicker">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TimePicker">
                <Border x:Name="LayoutRoot"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0">
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ContentPresenter x:Name="HeaderContentPresenter"
                                          Content="{TemplateBinding Header}"
                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                                          FlowDirection="{TemplateBinding FlowDirection}"
                                          FontWeight="{ThemeResource TimePickerHeaderThemeFontWeight}"
                                          Foreground="{ThemeResource TimePickerHeaderForegroundThemeBrush}" />
                        <StackPanel Grid.Row="1"
                                    Margin="0,0,47,0"
                                    Background="#FFFBFBFB"
                                    Orientation="Horizontal">
                            <Border x:Name="FirstPickerHost" BorderBrush="#FFFBFBFB">
                                <ComboBox x:Name="HourPicker"
                                          MinWidth="50"
                                          Background="#FFFBFBFB"
                                          FontFamily="{TemplateBinding FontFamily}"
                                          FontSize="{TemplateBinding FontSize}"
                                          FontWeight="{TemplateBinding FontWeight}"
                                          Foreground="{TemplateBinding Foreground}"
                                          Padding="4,0,0,0" />
                            </Border>

                            <Border x:Name="SecondPickerHost" BorderBrush="#FFFBFBFB">
                                <ComboBox x:Name="MinutePicker"
                                          MinWidth="50"
                                          Background="#FFFBFBFB"
                                          FontFamily="{TemplateBinding FontFamily}"
                                          FontSize="{TemplateBinding FontSize}"
                                          FontWeight="{TemplateBinding FontWeight}"
                                          Foreground="{TemplateBinding Foreground}"
                                          Padding="4,0,0,0" />
                            </Border>

                            <Border x:Name="ThirdPickerHost" BorderBrush="#FFFBFBFB">
                                <ComboBox x:Name="PeriodPicker"
                                          MinWidth="50"
                                          Background="#FFFBFBFB"
                                          FontFamily="{TemplateBinding FontFamily}"
                                          FontSize="{TemplateBinding FontSize}"
                                          FontWeight="{TemplateBinding FontWeight}"
                                          Foreground="{TemplateBinding Foreground}"
                                          Padding="0,0,0,0" />
                            </Border>
                        </StackPanel>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想使用这种样式，但是格式很乱，所以我想从原始模板的干净副本开始

编辑：我的视觉树

Answer 1

从Visual Studio的Live Visual Tree可以发现TimePicker使用TimePickerFlyoutPresenter在[=13=中显示].

因此我们可以编辑其 Style 和 Template 以删除 Button。要找到它的 Style，我们可以在 generic.xaml 中搜索 TimePickerFlyoutPresenter。

generic.xaml is available in the (Program Files)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP.0.10586.0\Generic folder from a Windows SDK installation.

我们可以像下面这样在它的模板中注释掉 Buttons:

<Style TargetType="TimePickerFlyoutPresenter">
    <Setter Property="Width" Value="242" />
    <Setter Property="MinWidth" Value="242" />
    <Setter Property="MaxHeight" Value="398" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
    <Setter Property="AutomationProperties.AutomationId" Value="TimePickerFlyoutPresenter" />
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TimePickerFlyoutPresenter">
                <Border x:Name="Background"
                        MaxHeight="398"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid x:Name="ContentPanel">
                        <!--<Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="45" />
                        </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="*" />
                            </Grid.ColumnDefinitions>

                            <Rectangle x:Name="HighlightRect"
                                       Grid.Column="0"
                                       Grid.ColumnSpan="5"
                                       Height="44"
                                       VerticalAlignment="Center"
                                       Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" />

                            <Border x:Name="FirstPickerHost" Grid.Column="0" />
                            <Rectangle x:Name="FirstPickerSpacing"
                                       Grid.Column="1"
                                       Width="2"
                                       HorizontalAlignment="Center"
                                       Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
                            <Border x:Name="SecondPickerHost" Grid.Column="2" />
                            <Rectangle x:Name="SecondPickerSpacing"
                                       Grid.Column="3"
                                       Width="2"
                                       HorizontalAlignment="Center"
                                       Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />
                            <Border x:Name="ThirdPickerHost" Grid.Column="4" />
                        </Grid>

                        <!--<Grid Grid.Row="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Rectangle Grid.ColumnSpan="2"
                                       Height="2"
                                       VerticalAlignment="Top"
                                       Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" />

                            <Button x:Name="AcceptButton"
                                    Grid.Column="0"
                                    Margin="0,2,0,0"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Content="&#xE8FB;"
                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                    FontSize="16"
                                    Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
                            <Button x:Name="DismissButton"
                                    Grid.Column="1"
                                    Margin="0,2,0,0"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Content="&#xE711;"
                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                    FontSize="16"
                                    Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
                        </Grid>-->
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

但在此之后，我们只能使用回车来确认选择的时间。自定义这个控件并不容易，因为我们不知道它是如何实现的。

为了实现你想要的，我想创建一个新的自定义控件。这是一篇关于 DatePicker calendar custom control for WinRT Xaml. Although this is a DatePicker control, but TimePicker is similar. You can refer to its source code on Codeplex 的博客，用于实现您的 TimePicker。

如何从 UWP TimePicker 中删除按钮

How do I remove the Buttons from the UWP TimePicker

c#

xaml

visual-studio

win-universal-app

uwp