How do I remove the Buttons from the UWP TimePicker

Question

I need to remove the bottom Buttons from the TimePicker-Controll Flyout. This style does it, but I can't see where the magic happens:

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

I would like to use this style, but the formating is messed up, so I'd like to start from a clean copy of the original template

EDIT: My Visual-Live-Tree

Answer 1

From the Live Visual Tree of Visual Studio, we can find that TimePicker use TimePickerFlyoutPresenter to show it in PopupRoot.

So we can edit its Style and Template to remove the Buttons. To find its Style, we can search TimePickerFlyoutPresenter in generic.xaml.

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

We can just comment out the Buttons in its template like following:

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

But after this, we can only use Enter to confirm the selected time. And customize this control is not easy as we don't know how this is implemented.

To achieve what you want, I'd like to create a new custom control. Here is a blog about 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 to implement your TimePicker.