如何从 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在PopupRoot中显示。

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

generic.xaml 位于 (Program Files)\Windows 套件\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic 来自 Windows SDK 安装的文件夹。

我们可以在其模板中注释掉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>

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

为了实现您想要的，我想创建一个新的自定义控件。这是关于DatePicker calendar custom control for WinRT Xaml 的博客。虽然这是一个 DatePicker 控件，但 TimePicker 是类似的。你可以参考它的source code on Codeplex 来实现你的TimePicker。