[WinUI 3][TimePicker] 時刻の表示と取得

TimePicker は、マウスやキーボードで時刻を入力をするためのコントロールです。

今回は、TimePicker に任意の時刻を表示する方法と、選択した時刻を取得する方法について説明します。

環境

任意の時刻を表示する

任意の時刻を表示するには、Time プロパティに日付を設定します。

以下に例を示します。

画面デザインは以下の XAML の通りです。

XAML

<Window
    x:Class="TimePickerSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TimePickerSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
        <TimePicker x:Name="myTimePicker" />
    </StackPanel>
</Window>

日付の表示はコードビハインド（C#）で行います。

以下のように Time プロパティに TimeSpan 型 の値（表示する時刻）を設定します。

C#

public MainWindow()
{
    this.InitializeComponent();
    myTimePicker.Time = new TimeSpan(15, 24, 00);
}

TimePicker に任意の時刻を表示する

選択された時刻を取得する

選択された時刻を取得する場合は Time プロパティを参照します。

以下の例では、Button コントロールをクリックすると、現在 TimePicker に設定されている時刻を取得して、TextBlock コントロールに表示します。

XAML

<Window
    x:Class="TimePickerSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TimePickerSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
        
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
            <TimePicker x:Name="myTimePicker"/>
            <Button x:Name="myButton" Content="時刻を取得" Click="myButton_Click" />
            <TextBlock x:Name="myTextBlock" />
        </StackPanel>
    </StackPanel>
</Window>

C#

private void myButton_Click(object sender, RoutedEventArgs e)
{
     myTextBlock.Text = myTimePicker.Time.ToString();
}

時刻を取得する例

Please follow and like us: