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

スポンサーリンク

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

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

環境

開発環境 Microsoft Visual Studio Professional 2019 Preview
Version 16.11.0 Preview 3.0
Framework Microsoft .NET Framework Version 4.8.04084
その他 Microsoft.Project Reunion 0.8.0-preview
Microsoft.ProjectReunion.Foundation 0.8.0-preview
Microsoft.ProjectReunion.WinUI 0.8.0-preview
Microsoft.UI.Xaml 2.6.1

任意の時刻を表示する

任意の時刻を表示するには、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 に任意の時刻を表示する

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:

コメント

タイトルとURLをコピーしました