[WinUI 3][CalendarDatePicker] 日付の表示と取得

CalendarDatePicker は日付入力をするためのコントロールです。

今回は、カレンダーに任意の日付を表示する方法と、カレンダーで選択した日付を取得する方法について説明します。

環境

カレンダーを表示する

はじめに、カレンダーを表示する方法について説明します。

カレンダーを表示するには、CalendarDatePicker コントロールを使用します。

PlaceHolderText プロパティを使用すると、日付が未選択時のプレースホルダ文字列を設定することができます。また Header プロパティを使用するとカレンダーコントロールにヘッダー文字列を表示することができます。

以下に XAML の例を示します。

この例ではプレースホルダに「日付を選択」を表示し、ヘッダーに「カレンダー」を表示します。日付が選択された場合は、プレースホルダの文字が消えて選択された日付が表示されます。

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

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10">
            <CalendarDatePicker PlaceholderText="日付を選択" Header="カレンダー" />
        </StackPanel>
    </StackPanel>
</Window>

上記をコードで実装する場合は以下になります。

public MainWindow()
{
    this.InitializeComponent();
    myCalendar.PlaceholderText = "日付を選択";
    myCalendar.Header = "カレンダー";
}

カレンダー表示前

カレンダー表示例

任意の日付を選択状態にする

選んだ日付を取得または設定するには、Date プロパティを使います。 既定では、Date プロパティには null が設定されています。 ユーザーがカレンダーで日付を選択すると、このプロパティが更新されます。

以下にコード例を示します。この例では 2021/9/30 を選択した状態にします。

public MainWindow()
{
    this.InitializeComponent();
    myCalendar.Date = new DateTime(2021, 9, 30);
}

このときのXAMLは以下の通り。

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

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10">
            <CalendarDatePicker x:Name="myCalendar" />
        </StackPanel>
    </StackPanel>
</Window>

任意の日付を選択する例

選択された日付を取得する

選択された日を取得する場合も、先程と同様に Date プロパティを使用します。

以下に例を示します。

この例では、ボタンがクリックされた時に現在選択されている日をダイアログに表示します。

private async void myButton_Click(object sender, RoutedEventArgs e)
{
    ContentDialog myDialog = new ContentDialog 
    { 
        Title = "選択された日付", 
        Content = myCalendar.Date.ToString(), 
        CloseButtonText = "OK" 
    };
    myDialog.XamlRoot = this.Content.XamlRoot; 
    ContentDialogResult result = await myDialog.ShowAsync();
}

XAMLは以下の通り。

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

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10">
            <CalendarDatePicker x:Name="myCalendar" />
            <Button x:Name="myButton" Content="日付の取得" Click="myButton_Click"/>
        </StackPanel>
    </StackPanel>
</Window>

選択された日付を取得する例

WinUI 3 Tips一覧

WinUI 3 のTips 一覧はこちら

Please follow and like us: