[WinUI 3][TimePicker] 12時間制と24時間制の表示を切り替える

本記事では、TimePicker で12時間制と24時間制の表示を切り替える方法について説明します。

環境

12時間制と24時間制の表示を切り替える

TimePickerの12時間制と24時間制の表示は ClockIdentifier プロパティで変更することができます。

ClockIdentifier プロパティには、以下のどちらかを文字列で指定します。

以下は、TimePicker の表示を12時間制に設定する例です。12時間制にすると、「午前」や「午後」も選択できるようになります。

XMAL のコード例は以下の通りです。

<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:DatePickerSample"
    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">
        <TimePicker x:Name="myTimePicker" ClockIdentifier="12HourClock" "/>
    </StackPanel>
</Window>

C# のコード例は以下の通りです。

public MainWindow()
{
    this.InitializeComponent();
    myTimePicker.ClockIdentifier = "12HourClock";
}

TimePicker に12時間制を設定する例

12時間制表示での時刻取得

12時間制表示になったからといって、現在選択されている時刻の取得方法が変わることはありません。SelectedTimeプロパティ で参照することができます。

以下に12時間制表示にした時の、時刻の取得例を示します。

この例では、TimePicker を12時間制にし、Button がクリックされた時に SelectedTimeプロパティを値を取得して TextBlock に表示します。実行してみるとわかりますが、Timeプロパティの値は24時間制になります。

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:DatePickerSample"
    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" ClockIdentifier="12HourClock" />
            <Button x:Name="myButton" Content="時刻を取得" Click="myButton_Click" />
            <TextBlock x:Name="myTextBlock" />
        </StackPanel>
    </StackPanel>
</Window>

C#

public MainWindow()
public MainWindow()
{
    this.InitializeComponent();
    myTimePicker.Header = "時刻を選択";
    myTimePicker.ClockIdentifier = "12HourClock";
}

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

12時間制での時刻取得例

Please follow and like us: