TimePicker

<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.TimePickerVorfuehrung"
            Spacing="8">
  <TextBlock Text="24 Stunden" FontWeight="SemiBold" />
  <!-- 24 Stunden, wie das Format der Sprache es vorgibt; die Vorgabe der Galerie ist 14:30. -->
  <TimePicker x:Name="Vierundzwanzig" Width="160" HorizontalAlignment="Left" SelectedTime="14:30" SelectedTimeChanged="Vierundzwanzig_SelectedTimeChanged" />
  <TextBlock x:Name="VierundzwanzigWert" Text="Gewählt: 14:30:00" />
  <TextBlock Text="12 Stunden" FontWeight="SemiBold" />
  <!-- 12 Stunden mit Tageszeit (im Deutschen ohne eigene Namen: AM und PM). -->
  <TimePicker x:Name="Zwoelf" Width="160" HorizontalAlignment="Left" ClockIdentifier="12HourClock" SelectedTime="14:30" SelectedTimeChanged="Zwoelf_SelectedTimeChanged" />
  <TextBlock x:Name="ZwoelfWert" Text="Gewählt: 14:30:00" />
  <TextBlock Text="Minutenschritt 15" FontWeight="SemiBold" />
  <!-- Minutenschritt 15: die Minutenwalze zeigt 00, 15, 30, 45. -->
  <TimePicker x:Name="Viertel" Width="160" HorizontalAlignment="Left" MinuteIncrement="15" SelectedTime="09:15" SelectedTimeChanged="Viertel_SelectedTimeChanged" />
  <TextBlock x:Name="ViertelWert" Text="Gewählt: 09:15:00" />
  <TextBlock Text="Mit Sekunden" FontWeight="SemiBold" />
  <TimePicker x:Name="Sekunden" Width="160" HorizontalAlignment="Left" UseSeconds="True" SelectedTime="08:05:30" SelectedTimeChanged="Sekunden_SelectedTimeChanged" />
  <TextBlock x:Name="SekundenWert" Text="Gewählt: 08:05:30" />
  <TextBlock Text="Leer" FontWeight="SemiBold" />
  <!-- Leer: Striche, bis eine Zeit getippt oder gewählt wird. -->
  <TimePicker x:Name="Leer" Width="160" HorizontalAlignment="Left" PlaceholderText="Beginn" SelectedTimeChanged="Leer_SelectedTimeChanged" />
  <TextBlock x:Name="LeerWert" Text="Gewählt: –" />
  <TimePicker Width="160" HorizontalAlignment="Left" IsEnabled="False" SelectedTime="12:00" />
</StackPanel>

using Kuonen.UI;
using Kuonen.UI.Controls;

namespace Kuonen.UI.Galerie.Seiten;

public sealed partial class TimePickerSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new TimePickerVorfuehrung();
}

/// <summary>KXAML-Fassung der TimePicker-Seite: der Baum steht in TimePickerSeite.kxaml, hier nur das Verhalten.</summary>
public sealed partial class TimePickerVorfuehrung
{
    public TimePickerVorfuehrung() => InitializeComponent();

    private static string Text(TimePickerSelectedValueChangedEventArgs e) => "Gewählt: " + TimePickerSeite.Zeit(e.NewTime);

    private void Vierundzwanzig_SelectedTimeChanged(object? sender, TimePickerSelectedValueChangedEventArgs e) => VierundzwanzigWert.Text = Text(e);

    private void Zwoelf_SelectedTimeChanged(object? sender, TimePickerSelectedValueChangedEventArgs e) => ZwoelfWert.Text = Text(e);

    private void Viertel_SelectedTimeChanged(object? sender, TimePickerSelectedValueChangedEventArgs e) => ViertelWert.Text = Text(e);

    private void Sekunden_SelectedTimeChanged(object? sender, TimePickerSelectedValueChangedEventArgs e) => SekundenWert.Text = Text(e);

    private void Leer_SelectedTimeChanged(object? sender, TimePickerSelectedValueChangedEventArgs e) => LeerWert.Text = Text(e);
}

using System.Globalization;
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: <see cref="TimePicker"/>.</summary>
public sealed partial class TimePickerSeite : GalerieSeite
{
    public override string Titel => "TimePicker";

    public override string Beschreibung =>
        "Ein Zeitfeld: Stunde und Minute direkt tippen (Ziffern springen ins nächste Segment), mit den Pfeilen drehen, mit Links und Rechts wechseln. Knopf, Alt+Pfeil runter "
        + "oder F4 öffnen die Walzen; drehen mit Pfeilen, Rad, Ziehen oder Klick, übernehmen mit ✓ oder der Eingabetaste, Esc und ✗ brechen ab.";

    public override string Stichworte => "Zeit Uhrzeit Zeitfeld TimePicker Walze Klappe 12 24 Stunden AM PM Minutenschritt Sekunden SelectedTime ClockIdentifier MinuteIncrement";

    public override string Datei => nameof(TimePickerSeite);

    internal static string Zeit(TimeSpan? zeit) => zeit is { } z ? z.ToString(@"hh\:mm\:ss", CultureInfo.InvariantCulture) : "–";

    public override UIElement Baue()
    {
        // Meldet jede Wahl unter dem Feld.
        static TextBlock Ausgabe(TimePicker feld)
        {
            var ausgabe = new TextBlock { Text = "Gewählt: " + Zeit(feld.SelectedTime) };
            feld.SelectedTimeChanged += (_, e) => ausgabe.Text = "Gewählt: " + Zeit(e.NewTime);
            return ausgabe;
        }

        // 24 Stunden, wie das Format der Sprache es vorgibt; die Vorgabe der Galerie ist 14:30.
        var vierundzwanzig = new TimePicker { Width = 160, HorizontalAlignment = HorizontalAlignment.Left, SelectedTime = new TimeSpan(14, 30, 0) };
        // 12 Stunden mit Tageszeit (im Deutschen ohne eigene Namen: AM und PM).
        var zwoelf = new TimePicker { Width = 160, HorizontalAlignment = HorizontalAlignment.Left, ClockIdentifier = TimePicker.Zwoelfstunden, SelectedTime = new TimeSpan(14, 30, 0) };
        // Minutenschritt 15: die Minutenwalze zeigt 00, 15, 30, 45.
        var viertel = new TimePicker { Width = 160, HorizontalAlignment = HorizontalAlignment.Left, MinuteIncrement = 15, SelectedTime = new TimeSpan(9, 15, 0) };
        // Mit Sekunden.
        var sekunden = new TimePicker { Width = 160, HorizontalAlignment = HorizontalAlignment.Left, UseSeconds = true, SelectedTime = new TimeSpan(8, 5, 30) };
        // Leer: Striche, bis eine Zeit getippt oder gewählt wird.
        var leer = new TimePicker { Width = 160, HorizontalAlignment = HorizontalAlignment.Left, PlaceholderText = "Beginn" };

        var seite = new StackPanel { Spacing = 8 };
        void Zeile(string titel, TimePicker feld)
        {
            seite.Children.Add(new TextBlock { Text = titel, FontWeight = 600 });
            seite.Children.Add(feld);
            seite.Children.Add(Ausgabe(feld));
        }
        Zeile("24 Stunden", vierundzwanzig);
        Zeile("12 Stunden", zwoelf);
        Zeile("Minutenschritt 15", viertel);
        Zeile("Mit Sekunden", sekunden);
        Zeile("Leer", leer);
        seite.Children.Add(new TimePicker { Width = 160, HorizontalAlignment = HorizontalAlignment.Left, IsEnabled = false, SelectedTime = new TimeSpan(12, 0, 0) });
        return seite;
    }
}