TimePicker is a text field with a drop-down for picking a time. It is DateTimePicker without the calendar half — both derive from TimePickerBase and share one control template.

<mah:TimePicker Width="170" SelectedDateTime="{Binding Departure}" />

How it differs from DateTimePicker

Almost nothing separates the two, which is worth knowing because everything on the DateTimePicker page applies here as well.

The value

SelectedDateTime is a DateTime?, not a TimeSpan — the same property the DateTimePicker uses. When the user types a time, TimePicker parses it and keeps whatever date was there:

this.SetCurrentValue(SelectedDateTimeProperty,
                     this.SelectedDateTime.GetValueOrDefault().Date + timeSpan.TimeOfDay);

Format and culture

The default is Long, which is why an untouched picker already shows 2:30:00 PM rather than 2:30 PM.

With no Culture the control follows the thread's culture, and a Language set on it or passed down from further up wins over that. de-DE gives a twenty-four-hour clock and drops the AM/PM list from the drop-down.

A format of your own

SelectedDateTimeFormat takes a custom format string and is read back through the same format first, so a value the picker wrote always parses:

<mah:TimePicker SelectedDateTimeFormat="HH:mm" />

It sits on TimePickerBase, so both pickers take one, and DateTimePicker covers it in full. So does DateTimeValidationError, the event that says what was typed when the field holds something that is not a time — both are new on develop (#4644 and #4645).

The drop-down

TimePartVisibility is a flags enum — Hour, Minute, Second, plus the combinations HourMinute and All. Seconds are off in both places by default, so turning them on takes two properties:

<mah:TimePicker PickerVisibility="All" HandVisibility="All" />

SourceHours, SourceMinutes and SourceSeconds replace what the lists offer — this is how you build a picker that only offers quarter hours:

<mah:TimePicker SourceMinutes="{Binding QuarterHours}" />

Each has a matching HoursItemStringFormat, MinutesItemStringFormat and SecondsItemStringFormat.

The button under the lists puts the picker on the time of day in one press. It is the same one the DateTimePicker carries, described on its page along with the caption property and the note that it is new on develop.

Reaching into the drop-down

The clock face is a control of its own, AnalogClock, and the picker carries three properties that reach it and the popup around it.

ClockSize is the one the issue asked for. The face is drawn at its natural 120 and scaled to whatever size it is given, so one number takes the ring, the dots and the hands with it, and the drop-down grows to fit:

<mah:TimePicker ClockSize="200" />

ClockStyle is the look of that clock, anything an AnalogClock style can say. The size is not part of it: it comes from ClockSize, because the template hands that to the clock and what a template sets on one of its own elements beats what a style sets on it.

<mah:TimePicker>
    <mah:TimePicker.ClockStyle>
        <Style BasedOn="{StaticResource MahApps.Styles.AnalogClock}" TargetType="{x:Type mah:AnalogClock}">
            <Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Gray5}" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
    </mah:TimePicker.ClockStyle>
</mah:TimePicker>

PopupStyle is the drop-down: where it is placed, how far it is offset, how much room it may take. Stand your own on MahApps.Styles.Popup.TimePickerBase, which is what a popup needs to behave like a drop-down and used to sit on the element in the template:

<Style x:Key="DropUp" BasedOn="{StaticResource MahApps.Styles.Popup.TimePickerBase}" TargetType="{x:Type Popup}">
    <Setter Property="Placement" Value="Top" />
</Style>

Two nicer alternatives

On develop the two other style sets carry the pickers themselves, so there is nothing to download: merge Styles/Win10/Controls.xaml or Styles/WinUI/Controls.xaml instead of Styles/Controls.xaml and the TimePicker wears that set without another line (#4514). The keys are the same ones the drop-ins use, MahApps.Styles.TimePicker.Win10 and MahApps.Styles.TimePicker.WinUI, and both sets bring the field chrome of their text boxes along with the time selection described below.

In a released version they are the two drop-in dictionaries that restyle the DateTimePicker, one TimePicker style each.

The files are named for the DateTimePicker because they cover both controls. For a TimePicker you only need the one dictionary — the calendar dictionary the DateTimePicker page asks for is used by the DateTimePicker styles alone.

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="Styles/Controls.DateTimePicker.WinUI.xaml" />

<Style BasedOn="{StaticResource MahApps.Styles.TimePicker.WinUI}" TargetType="{x:Type mah:TimePicker}" />

What they change

Both switch the analogue clock off, because Fluent has no clock face — the three columns are the whole time selection there:

No chrome, no chevrons, just centred numbers. Open a column and the selected value is an accent-filled pill:

The Win10 variant is the same row; the two only part company inside the open list, where one pill is rounded and the other square. Set IsClockVisible="True" in a derived style to keep the clock.

Reaching those lists at all needs a trick, because they are plain ComboBoxes with no style of their own — see the DateTimePicker page for how Style.Resources scopes an implicit style to one control's drop-down.

Watermark and the clear button

The watermark and the clear button are ordinary TextBoxHelper values:

<mah:TimePicker mah:TextBoxHelper.Watermark="When?"
                mah:TextBoxHelper.UseFloatingWatermark="True"
                mah:TextBoxHelper.ClearTextButton="True" />

Related

DateTimePicker for date and time together — and for the properties both controls share. DatePicker for the date alone.