How do I write a custom picker control in UWP?

Question

I have been fine-combing the web for any guidance, discussions or experience on this and I think I can safely say there’s nothing to be found.

We are developing a set of controls for UWP which we plan to open source and make available for free. One of the controls we are building is a TimeSpanPicker control, which will essentially look and behave like the TimePicker control, but instead of being limited to a time of day (i.e. 24 hour interval) it will allow the user to edit an arbitrary TimeSpan.

From what I have been able to piece together from the visible metadata of the Windows Runtime API, using the built-in TimePicker control for reference, I am realizing the following types of components are involved:

• The TimePicker control itself which inherits from Control
• The TimePickerFlyout class which inherits from PickerFlyoutBase
• The TimePickerFlyoutPresenter control, which inherits from Control

I realize I need to mimic this pattern and write these three components for our picker control, but I can find no information about how these pieces fit together, and from the API surfaces alone I don’t think it’s possible to figure it out.

Specifically, the primary things I’d like to understand are:

• How is the TimePickerFlyout incorporated into the TimePicker class? I can see no reference to a flyout anywhere within the default template of the picker control.
• What role does the TimePickerFlyoutPresenter control play, and how is it incorporated into the TimePickerFlyout class? The TimePickerFlyout class has no template – so how does it instantiate and communicate with the TimePickerFlyoutPresenter control?
• What are the basic steps to mimic this pattern?
• What is the intended use of the ShouldShowConfirmationButtons and OnConfirmed virtual methods on PickerFlyoutBase? When I override them in my concrete implementation, they are never called.

I’d be very thankful for any guidance!

Answer 1

I had the same prob, but after work around, I did the following to change the TimePickerFlyout's background color and the size of the buttons on its footer and other style as I needed.

Navigate to C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic

(Note this may change depending on your SDK version)

Open the generic.xaml file

Copy the TargetType="TimePickerFlyoutPresenter" section to your App.xaml, and make changes whatever you want, All the Flyouts will be changed accordingly.

OR

Copy this style and put it in App.xaml.

<!-- Default style for Windows.UI.Xaml.Controls.TimePickerFlyoutPresenter -->
<Style TargetType="TimePickerFlyoutPresenter">
    <Setter Property="Width" Value="242" />
    <Setter Property="MinWidth" Value="242" />
    <Setter Property="MaxHeight" Value="0" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
    <Setter Property="AutomationProperties.AutomationId" Value="TimePickerFlyoutPresenter" />
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TimePickerFlyoutPresenter">
                <Border x:Name="Background"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        MaxHeight="396">
                    <Grid x:Name="ContentPanel">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="44" />
                        </Grid.RowDefinitions>

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" x:Name="FirstPickerHostColumn" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" x:Name="SecondPickerHostColumn" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" x:Name="ThirdPickerHostColumn" />
                            </Grid.ColumnDefinitions>

                            <Rectangle x:Name="HighlightRect" Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" Height="44" />

                            <Border x:Name="FirstPickerHost" Grid.Column="0" />
                            <Rectangle x:Name="FirstPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="1" />
                            <Border x:Name="SecondPickerHost" Grid.Column="2" />
                            <Rectangle x:Name="SecondPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="3" />
                            <Border x:Name="ThirdPickerHost" Grid.Column="4" />
                        </Grid>

                        <Grid Grid.Row="1" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Rectangle Height="2" VerticalAlignment="Top" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" 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>

Answer 2

So, since a couple of folks asked me to follow up on this, I was actually eventually able to figure all this stuff out, with some help from Jim Walker (MSFT). It's been a long time coming, but I now decided to revisit this and finally finish those TimeSpanPicker and TimeSpanEditor controls I was working on.

https://github.com/IDeliverable/UwpControls

Run the TestHost project to see both controls in action.

The repository contains a few other controls as well; the part containing the TimeSpanPicker and TimeSpanEditor controls is here:

https://github.com/IDeliverable/UwpControls/tree/master/src/IDeliverable.Controls.Uwp.TimeSpanPicker

The code should hopefully serve as a really good sample for anyone interested in how to build a custom picker control, but the controls should also be useful for anyone needing to add TimeSpan editing functionality to their app. I really went to town with these controls, sweating the details and non-obvious things like accessibility, support for multiple input modes (touch, keyboard, mouse), system theme compliance, full templating support, etc.

Documentation for these two controls is work in progress at the moment.

I plan on packaging these controls up as NuGet packages soon, but for now, you'll have to consume them as source code. I'm also going to check if there's any interest incorporating them into the Window Community Toolkit.