如何从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用法.TimePickerFlyoutPresenterPopupRoot

所以我们可以编辑它Style并Template删除它Button.要找到它Style,我们可以TimePickerFlyoutPresenter在generic.xaml中搜索.

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

我们可以Button在其模板中注释掉s,如下所示:

<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用来确认选定的时间.并且自定义此控件并不容易,因为我们不知道如何实现它.

为了达到你想要的效果,我想创建一个新的自定义控件.这是一个关于WinRT Xaml的DatePicker日历自定义控件的博客.虽然这是一个DatePicker控件,但TimePicker是类似的.您可以在Codeplex上参考其源代码来实现TimePicker.