UWP - DatePicker and TimePicker customization

To customize the flyout, we can edit the styles and templates of DatePickerFlyoutPresenter and TimePickerFlyoutPresenter. And we can find these styles in generic.xaml which is available in the \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic folder from a Windows SDK installation. For different SDK version, the path is different and the styles and resources might have different values. Using the default style for DatePickerFlyoutPresenter in 14393 for example:

<!-- Default style for Windows.UI.Xaml.Controls.DatePickerFlyoutPresenter -->
<Style TargetType="DatePickerFlyoutPresenter">
    <Setter Property="Width" Value="296" />
    <Setter Property="MinWidth" Value="296" />
    <Setter Property="MaxHeight" Value="398" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="{ThemeResource DatePickerFlyoutPresenterBackground}" />
    <Setter Property="AutomationProperties.AutomationId" Value="DatePickerFlyoutPresenter" />
    <Setter Property="BorderBrush" Value="{ThemeResource DatePickerFlyoutPresenterBorderBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DatePickerFlyoutPresenter">
                <Border x:Name="Background"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    MaxHeight="398">
                    <Grid x:Name="ContentPanel">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid x:Name="PickerHostGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="78*" x:Name="DayColumn" />
                                <ColumnDefinition Width="Auto" x:Name="FirstSpacerColumn" />
                                <ColumnDefinition Width="132*" x:Name="MonthColumn" />
                                <ColumnDefinition Width="Auto" x:Name="SecondSpacerColumn" />
                                <ColumnDefinition Width="78*" x:Name="YearColumn" />
                            </Grid.ColumnDefinitions>
                            <Rectangle x:Name="HighlightRect"
                                Fill="{ThemeResource DatePickerFlyoutPresenterHighlightFill}"
                                Grid.Column="0"
                                Grid.ColumnSpan="5"
                                VerticalAlignment="Center"
                                Height="44" />
                            <Rectangle x:Name="FirstPickerSpacing"
                                Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}"
                                HorizontalAlignment="Center"
                                Width="2"
                                Grid.Column="1" />
                            <Rectangle x:Name="SecondPickerSpacing"
                                Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}"
                                HorizontalAlignment="Center"
                                Width="2"
                                Grid.Column="3" />
                        </Grid>
                        <Grid Grid.Row="1" Height="45" x:Name="AcceptDismissHostGrid">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Rectangle Height="2"
                                VerticalAlignment="Top"
                                Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}"
                                Grid.ColumnSpan="2" />
                            <Button x:Name="AcceptButton"
                                Grid.Column="0"
                                Content="&#xE8FB;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="16"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
                                Margin="0,2,0,0" />
                            <Button x:Name="DismissButton"
                                Grid.Column="1"
                                Content="&#xE711;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="16"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
                                Margin="0,2,0,0" />
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

We can change the Grid.ColumnDefinitions to reduce the width.

But please note that although, there are Width and MinWidth properties in DatePickerFlyoutPresenter, but change them has no effect. DatePickerFlyoutPresenter's width is determined by DatePicker. They have the same width. If we changed DatePicker's width, the flyout will automatically adjust its width.

Besides, in DatePickerFlyoutPresenter, we can't change ColumnDefinition's width to Auto like what you've done in DatePicker's style. Because in DatePickerFlyoutPresenter, "DayColumn", "MonthColumn" and "YearColumn" are populated with LoopingSelector, which uses a panel like Canvas inside. If we set the column's width to Auto, LoopingSelector's width will be zero and users can't see anything.

So there may be not so much things we can customize, and we'd better set a fixed width for DatePicker like following to make sure users can see complete elements in the picker or in the picker's flyout.

<DatePicker Width="200" MinWidth="0" />

TimePicker is the same like DatePicker. If you want more flexibility, I'd suggest using a new custom control. Here is a blog about DatePicker calendar custom control for WinRT Xaml. You can refer to the blog and the source code on Codeplex to implement your own.