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的实时视觉树，我们可以发现TimePicker使用TimePickerFlyoutPresenter在PopupRoot中显示它。

因此，我们可以修改其Style和Template以删除Button。要查找其Style，我们可以在 generic.xaml 中搜索TimePickerFlyoutPresenter。

generic.xaml在（Program Files）\ Windows中可用套装\ 10 \设计时\ CommonConfiguration \中性\ UAP \ 10.0.10586.0 \通用 Windows SDK安装中的文件夹。

我们可以在其模板中注释掉Button，如下所示：

<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。

如何从UWP TimePicker中删除按钮

1 个答案: