[WPF] Calendar コントロール

スポンサーリンク

Calendar コントロールは、カレンダー機能を提供し、ユーザーが日付を選択できるようにするコントロールを表します。

基本的なプロパティや、イベント処理について説明をします。

Calendar を表示するには？

Calendar を表示するのは、かんたんです。XAML だと以下のタグのみで表示することができます。

XAMLの例

<Calendar />

C#の例

Calendar cal = new Calendar();
root.Children.Add(cal);
カレンダーの例

カレンダーの例

指定した日が含まれる月をカレンダーに表示するには？

指定した日が含まれる月をカレンダーに表示するには、以下の DisplayDate プロパティを使用します。

プロパティ 説明
DisplayDate カレンダーに表示する日付を取得または設定します

以下に例を示します。

この例では、DisplayDate に「2020年10月10日」を設定しています。カレンダーには「2020年10月10日」を含む月が表示されます。

XAMLの例

<Calendar DisplayDate="2020/10/10"/>

C#の例

Calendar cal = new Calendar();
cal.DisplayDate = new DateTime(2020, 10, 10);
root.Children.Add(cal);

実行例を以下に示します。

実行例

実行例

現在選択されている日付を取得または設定するには？

現在選択されている日付を取得または設定するには、以下の SelectedDate プロパティを使用します。

プロパティ 説明
SelectedDate カレンダーに表示する日付を取得または設定します

以下に例を示します。

この例では、2020年5月5日を SelectedDate に設定しており、表示上は水色になり、選択されている状態を表します。

ちなみに、グレーになっている 2020年5月10日 は「今日（アプリを実行した日）」を表して入ります。

XAMLの例

<Calendar SelectedDate="2020/5/5"/>

C#の例

Calendar cal = new Calendar();
cal.SelectedDate = new DateTime(2020, 5, 5);
root.Children.Add(cal);
SelectedDate プロパティの使用例

SelectedDate プロパティの使用例

※複数の日付を選択する場合は SelectedDates プロパティを使用します。詳しくは、以下の「日付の選択方法を変更するには？」を参照してください。

日付の選択方法を変更するには？

既定では、1日の日付のみを選択できるようになっているのですが、以下に示す SelectionMode プロパティの値を変更することで、選択方法を変えることができます。

プロパティ 説明
SelectionMode 日付の選択方法を取得または設定します

SelectionMode プロパティに設定できる値は、以下に示す CalendarSelectionMode 列挙型 の値です。

値 説明
MultipleRange 隣接していない複数の日付範囲を選択できます。後述する SelectedDates プロパティを使用すると、選択した日付を取得できます。
None 日付を選択することはできません。
SingleDate １つの日付のみを選択することができます。
SingleRange １つの日付範囲を選択することができます。複数の日付範囲を選択したい場合は MultipleRange を使用します。

以下に例を示します。

複数の日付範囲を選択する例

SelectionMode プロパティに MultipleRange を指定して、コードで複数の日付範囲を選択する例を示します。

この例では、2020年5月2日〜2020年5月7日、2020年5月13日〜2020年5月15日、2020年5月26日〜2020年5月29日を選択状態にします。

C#の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.MultipleRange;
cal.SelectedDates.AddRange(new DateTime(2020, 5, 2),
     new DateTime(2020, 5, 7));
cal.SelectedDates.AddRange(new DateTime(2020, 5, 13),
     new DateTime(2020, 5, 15));
cal.SelectedDates.AddRange(new DateTime(2020, 5, 26),
     new DateTime(2020, 5, 29));
root.Children.Add(cal);
実行例

実行例

XAML の場合は、SelectedDates プロパティを使用して連続した日付を選択することができません。ただし、単一の日を複数選択することは可能です。

以下は、2020年5月2日、2020年5月13日、2020年5月26日を選択します。

XAMLの例

<Calendar SelectionMode="MultipleRange">
    <Calendar.SelectedDates>
        <sys:DateTime>2020/5/2</sys:DateTime>
        <sys:DateTime>2020/5/13</sys:DateTime>
        <sys:DateTime>2020/5/26</sys:DateTime>
    </Calendar.SelectedDates>
</Calendar>
実行例

実行例

日付を選択できないようにする例

SelectionMode プロパティに None を指定して、日付を選択できないようにする例を示します。

C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.None;
root.Children.Add(cal);

XAML の例

<Calendar SelectionMode="None" />

実行してみるとわかりますが、日付を選択すると枠線がつきますが、水色で塗り潰しになっていないので、その日付は選択されていません。

実行例

実行例

1つの日付のみを選択する例

SelectionMode プロパティに SingleDate を指定して、1つの日付のみを選択できるようにする例を示します。
C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.SingleDate;
cal.SelectedDate = new DateTime(2020, 5, 26);
root.Children.Add(cal);

XAML の例

<Calendar SelectionMode="SingleDate"
    <Calendar.SelectedDate>
        <sys:DateTime>2020/5/26</sys:DateTime>
    </Calendar.SelectedDate>
</Calendar>

実行例を以下に示します。この例では2020年5月26日を選択しています。

実行例

実行例

1つの日付範囲を選択する例

SelectionMode プロパティに SingleRange を指定して、1つの日付範囲を選択できるようにする例を示します。 C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.SingleRange;
cal.SelectedDates.AddRange(
     new DateTime(2020, 5, 12), new DateTime(2020, 5, 15));
root.Children.Add(cal);

XAML では 1つの日付範囲を設定することができないようです。以下のように SelecgionMode を設定することはできます。

XAML の例

<Calendar SelectionMode="SingleRange" />

実行例を以下に示します。この例では 2020年5月12日 〜 2020年5月15日 を選択しています。

実行例

実行例

選択不可能な日を設定するには？

カレンダーで選択されると困る日がある場合は、以下に示す BlackoutDate プロパティを使用します。

プロパティ 説明
BlackoutDates 選択不可能日を取得または設定します。
SelectionMode プロパティが “None” 以外にする必要があります。

以下に例を示します。この例では 2020年5月1日 〜 2020年5月10日 と 2020年5月20日を選択不可能日に設定します。

C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.MultipleRange;
cal.BlackoutDates.Add(
    new CalendarDateRange(
        new DateTime(2020, 5, 1), new DateTime(2020, 5, 10)));
cal.BlackoutDates.Add(
     new CalendarDateRange(
        new DateTime(2020, 5, 20)));
root.Children.Add(cal);

XAML では 1つの日付範囲を設定することができないようです。以下のように SelecgionMode を設定することはできます。

XAML の例

<Calendar SelectionMode="SingleRange" />

実行例を以下に示します。

実行例

実行例

カレンダーの範囲を制限するには？

カレンダーの範囲を制限するには、以下に示す DisplayDateStart と DisplayDateEnd のプロパティを使用します。 ユーザーは、この範囲外の日付はスクロールや選択をすることはできません。

プロパティ 説明
DisplayDateStart 表示可能範囲の開始日を取得/設定する
DisplayDateEnd 表示可能範囲の終了日を取得/設定する

以下に例を示します。この例では カレンダーの範囲を 2020年5月10日 〜 2020年5月20日 に制限しています。

C# の例

Calendar cal = new Calendar();
cal.SelectionMode = CalendarSelectionMode.MultipleRange;
cal.DisplayDateStart = new DateTime(2020,5,10);
cal.DisplayDateEnd = new DateTime(2020, 5, 20);
root.Children.Add(cal);

XAML の例

<Calendar DisplayDateStart="2020/5/10" DisplayDateEnd="2020/5/20" />
実行例

実行例

「今日」を強調表示するかどうかを設定するには？

「今日」を強調表示するかどうかを設定するには、以下に示す IsTodayHighlighted プロパティを使用します。

プロパティ 説明
IsTodayHighlighted 「今日」を強調表示する場合は True、強調表示しない場合は False

以下に例を示します。この例では IsTodayHighlighted プロパティに False を設定し、「今日」が強調表示されないようにしています。

C# の例

Calendar cal = new Calendar();
cal.IsTodayHighlighted = false;
root.Children.Add(cal);

XAML の例

<Calendar IsTodayHighlighted="False" />

以下に実行例を示します。この例を実行した日は 2020年5月24日 なのですが、強調表示されていないことがわかります。

実行例

実行例

表示する期間を変更するには

Calendar コントロールは、既定で「１ヶ月分」を表示するようになっていますが、以下の DisplayMode プロパティを使用することで、カレンダーに表示する期間を「10年」「１ヶ月」「１年」に切り替えることができます。

プロパティ 説明
DisplayMode カレンダーに表示する期間を取得/設定する。
既定値は「Month（月）」。この他に「Decade（10年）」「Year（年）」を指定することができる。

以下に例を示します。

C# の例

Calendar cal = new Calendar();
cal.DisplayMode = CalendarMode.Month;   // 月
//cal.DisplayMode = CalendarMode.Decade;  // 10年
//cal.DisplayMode = CalendarMode.Year;    // 1年

root.Children.Add(cal);

XAML の例

<Grid x:Name="root">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0">
        <Calendar DisplayMode="Decade" />
        <TextBlock Text="DisplayMode = Decade" HorizontalAlignment="Center"/>
    </StackPanel>

    <StackPanel Grid.Column="1">
        <Calendar DisplayMode="Month" />
        <TextBlock Text="DisplayMode = Month" HorizontalAlignment="Center"/>
    </StackPanel>

    <StackPanel Grid.Column="2">
        <Calendar DisplayMode="Year" IsTodayHighlighted="False"/>
        <TextBlock Text="DisplayMode = Year" HorizontalAlignment="Center"/>
    </StackPanel>
</Grid>

実行例を以下に示します。

実行例

実行例

表示する日が変更されたことを知るには？

DisplayDate プロパティ使用することで、指定した日が含まれる月をカレンダーに表示することができました。

DisplayDateChanged イベントを使用すると、「表示する日が変更された」ということを検知することができます。

例えば DisplayDate プロパティに 2010年5月10日 を指定した場合、カレンダーを6月に変更すると DisplayDateChanged イベントが起動します。

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

<Calendar DisplayDate="2020/5/10" 
          DisplayDateChanged="Calendar_DisplayDateChanged"/>

C# の例

private void Calendar_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
{
    MessageBox.Show("DisplayDate プロパティが変更されました");
}

実行例を以下に示します。

実行例

実行例

表示期間が変更されたことを知るには？

DisplayModeChanged イベントを使用することで、表示期間（DisplayMode プロパティ）の変更を知ることができます。

例を以下に示します。この例では、コンストラクタで DisplayMode を “Decade” に変更しています。DisplayModeChanged イベントが発生し、「DisplayMode が変更されました」を表示します。

XAML の例

<Calendar x:Name="cal" DisplayMode="Month" DisplayModeChanged="Calendar_DisplayModeChanged" />

C# の例

public MainWindow()
{
    InitializeComponent();

    cal.DisplayMode = CalendarMode.Decade;
}

private void Calendar_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e)
{
    MessageBox.Show("DisplayMode が変更されました");
}
実行例

実行例

日付の選択方法が変更されたことを知るには？

SelectionModeChanged イベントを使用することで、日付の選択方法（SelectionMode プロパティ）の変更を知ることができます。

例を以下に示します。この例では、コンストラクタで SelectionMode を “None” に変更しています。SelectionModeChanged イベントが発生し、「SelectionMode が変更されました」を表示します。
XAML の例

<Calendar x:Name="cal" SelectionMode="SingleDate" SelectionModeChanged="Calendar_SelectionModeChanged" />

C# の例

public MainWindow()
{
    InitializeComponent();

    cal.SelectionMode = CalendarSelectionMode.None;
}

private void Calendar_SelectionModeChanged(object sender, EventArgs e)
{
    MessageBox.Show("SelectionMode が変更されました");
}

選択されている日付が変更されたことを知るには？

SelectedDatesChanged イベントを使用すると、選択されている日付が変更されたことを知ることができます。

例を以下に示します。この例では、コンストラクタで SelectionMode を “None” に変更しています。SelectionModeChanged イベントが発生し、「SelectionMode が変更されました」を表示します。
XAML の例

<Calendar x:Name="cal" SelectionMode="SingleDate" SelectedDatesChanged="cal_SelectedDatesChanged" />

C# の例

public MainWindow()
{
    InitializeComponent();

    cal.SelectedDate = new DateTime(2020, 5, 15);
}

private void cal_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
{
    MessageBox.Show($"{cal.SelectedDate}が選択されました。");
}
Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon
スポンサーリンク

コメント

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