Commencez par créer un projet de bibliothèque de contrôles utilisateur WPF (WPF User Control Library) que vous nommerez par exemple HorlogeSaisie. Ce projet conteindra le contrôle personnalisé d’édition du temps.

Le fichier XAML du contrôle, SaisieTemps.xaml, se présente comme suit. On utilise un Border et une Grid pour organiser trois zones de saisie (heures, minutes, secondes) séparées par des deux-points.

<UserControl x:Class="HorlogeSaisie.SaisieTemps"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d">
    <Border BorderBrush="#FFABADB3" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" Text="{Binding Heure, StringFormat={}{0:00}}" 
                     FontSize="{Binding TaillePolice}" BorderThickness="0" 
                     HorizontalAlignment="Center" VerticalAlignment="Stretch" />
            <TextBlock Grid.Column="1" Text=" : " FontSize="{Binding TaillePolice}" 
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <TextBox Grid.Column="2" Text="{Binding Minute, StringFormat={}{0:00}}" 
                     FontSize="{Binding TaillePolice}" BorderThickness="0" 
                     HorizontalAlignment="Center" VerticalAlignment="Center" />
            <TextBlock Grid.Column="3" Text=" : " FontSize="{Binding TaillePolice}" 
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <TextBox Grid.Column="4" Text="{Binding Seconde, StringFormat={}{0:00}}" 
                     FontSize="{Binding TaillePolice}" BorderThickness="0" 
                     HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </Border>
</UserControl>

Le code-behind associé (SaisieTemps.xaml.cs) expose les propriétés Heure, Minute, Seconde et TaillePolice en implémentant INotifyPropertyChanged. Le DataContext est positionné sur l’instance du contrôle.

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Controls;

namespace HorlogeSaisie
{
    public partial class SaisieTemps : UserControl, INotifyPropertyChanged
    {
        public SaisieTemps()
        {
            InitializeComponent();
            DataContext = this;
        }

        private int _taillePolice = 12;
        public int TaillePolice
        {
            get => _taillePolice;
            set { _taillePolice = value; NotifierChangement(); }
        }

        private int _heure = 0;
        public int Heure
        {
            get => _heure;
            set { _heure = value; NotifierChangement(); }
        }

        private int _minute = 0;
        public int Minute
        {
            get => _minute;
            set { _minute = value; NotifierChangement(); }
        }

        private int _seconde = 0;
        public int Seconde
        {
            get => _seconde;
            set { _seconde = value; NotifierChangement(); }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifierChangement([CallerMemberName] string propriete = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propriete));
        }
    }
}

Compilez la bibliothèque. Vous obtenez la DLL HorlogeSaisie.dll qui contient le contrôle utilisateur.

Créez manitenant une application WPF de test, par exemple TestSaisieTemps. Ajoutez une référence à la DLL HorlogeSaisie.dll dans les dépendances du projet. Une fois la référence ajoutée, le contrôle SaisieTemps apparaît dans la boîte à outils et peut être glissé dans la fenêtre principale.

Le fichier MainWindow.xaml de l’application de test déclare l’espace de noms ctrl pointant vers l’assemb et utilise le contrôle avec une taille de police de 30.

<Window x:Class="TestSaisieTemps.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ctrl="clr-namespace:HorlogeSaisie;assembly=HorlogeSaisie"
        Title="Test saisie horaire" Height="200" Width="400">
    <StackPanel Margin="20">
        <ctrl:SaisieTemps x:Name="editeurTemps" TaillePolice="30"/>
        <Button Content="Lire l’heure" Click="BtnLireHeure_Click" Margin="0,10,0,0"/>
    </StackPanel>
</Window>

Le code-behind MainWindow.xaml.cs récupère les valeurs saisies et les affiche dans une boîte de dialogue.

using System.Windows;

namespace TestSaisieTemps
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void BtnLireHeure_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(
                $"Heure lue : {editeurTemps.Heure:00} : {editeurTemps.Minute:00} : {editeurTemps.Seconde:00}");
        }
    }
}

L’exécution de l’application affiche une fenêtre contenant le contrôle de saisie avec trois champs éditables et un bouton. Après avoir modifié les valeurs, un clic sur le bouton présente l’heure complète formatée.