![](https://marunaka-blog.com/wp-content/uploads/2021/04/6a0f96fa975cc64c18fa90be906602e6.png)
WPF の DataPicker を使いたい。。。
WPF のコントロールの1つである DataPicker について、WEB サイト上にまとめてある記事が無かったので基本的な使い方(プロパティやイベント処理)を紹介します。
何かのお役に立てば幸いです。
![](https://marunaka-blog.com/wp-content/uploads/2021/11/1f376bb9c724abce01920d783552b69c-300x200.jpg)
オススメの参考書
C#の使い方が丁寧に解説しており、「基礎からしっかりと学びたい」という初心者の方にオススメの一冊です。サンプルコードも記載してあり、各章の最後に復習問題があるので理解度を確認しながら読み進めることができます。新しい C# のバージョンにも対応している書籍です。
WPFで日付の選択
![](https://marunaka-blog.com/wp-content/uploads/2022/03/091184bcda645b76415dad025b422929.jpg)
WPF で日付の選択をするコントロールには、DatePicker コントロールというものがあります。
このコントロールは、ユーザーが日付の選択ができるように画面に配置します。
XAML のCalender
タグを記述すると簡単に表示できます。
<Calendar />
![](https://marunaka-blog.com/wp-content/uploads/2022/05/e7caefc9edb81f98cc1d3c46a0d838c0.jpg)
コントロールの右側にボタンがあるのでクリックすると、カレンダーが表示されるので、日付の選択を行えます。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/7624dd5e1ecceeae58e433e3406eac60.jpg)
DatePickerの使い方
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2ba5cbb657d2e1599edd30d8fa258ed4-1024x358.jpg)
日付を指定して表示する
DatePicker にデフォルト値をテキストに表示するには、SelectedDate
プロパティを使用します。
このプロパティはカレンダーで選択された日付を取得する場合にも使用します。
プロパティ名 | 内容 |
---|---|
SelectedDate | 現在選択されている日付を取得または設定します。 |
では、2022年5月3日を DatePicker のテキストに表示してみます。
<DatePicker
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedDate="2022/5/3" />
実行すると次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/0b6a0aab6615705adeefc53ab40042f7.jpg)
カレンダーを表示すると、選択された日付が水色の背景になっています。背景が灰色になっている日付は現在の日付を意味します。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/eaba01ef9c942387efd5cc846bef2c5c.jpg)
現在の日付を指定する
XAML 上で DatePicker のText
プロパティに現在に日付を指定して表示する場合は、SelectedDate
プロパティを使用して次にように記述します。
名前空間 System を XAML で参照できるように、下記コードの1行目を XAML のヘッダーに追加します。これがないとSelectDate
プロパティでバインディングしている DateTime のToday
プロパティを参照することができません。
xmlns:System="clr-namespace:System;assembly=mscorlib"
<DatePicker
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedDate="{Binding Mode=OneTime, Source={x:Static System:DateTime.Today}}"/>
実行すると次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/0b6a0aab6615705adeefc53ab40042f7.jpg)
表示形式を指定して表示する
DatePicker のテキストに表示される日付の形式を変更するには、DatePickerFormat
プロパティを使用します。
プロパティ名 | 内容 |
---|---|
DatePickerFormat | 選択した日付を表示するために使用される形式を取得または設定します。 |
このプロパティは DatePickerFormat 列挙型に定義されている Long または Short から指定します。デフォルト値は Long になっています。
- Long:年月日を省略しない形式で日付を表示する。
- Short:年月日を省略する形式で日付を表示する。
<DatePicker
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedDate="2022/5/3"
SelectedDateFormat="Long" />
それぞれのフォーマットで実行した結果が次のようになります。
DatePickerFormat.Long
![](https://marunaka-blog.com/wp-content/uploads/2022/05/datePicker-Long.jpg)
DatePickerFormat.Short
![](https://marunaka-blog.com/wp-content/uploads/2022/05/datePicker-Short.jpg)
カレンダーの日付を指定する
カレンダーが表示された時の日付を指定する場合は、DisplayDate プロパティを使用します。
プロパティ名 | 内容 |
---|---|
DisplayDate | 表示する日付を取得または設定します。 |
SelectedDate
プロパティとは違い、あくまでカレンダーに表示する日付を指定するのでテキストの表示まで指定することはできません。
DatePicker のテキストに5月3日を表示し、カレンダーには1月1日を表示してみます。
<DatePicker
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedDate="2022/5/3"
DisplayDate="2022/1/1" />
実行すると次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/DatePicker.gif)
選択不可な日付を設定する
カレンダーの日付で選択させたくない日付がある場合は、BlackoutDate
プロパティを使用します。
プロパティ名 | 内容 |
---|---|
BlackoutDate | 選択不可としてマークされている日付のコレクションを取得または設定します。 |
プロパティ値は CalendarBlackoutDatesCollection という日付のコレクションなので、選択できない日付を複数個所設定することができます。
例として5月4日と5月9日~5月13日の日付を選択不可にします。
<DatePicker
Name="datePicker"
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedDate="2022/5/3" />
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
//選択不可にする日付をBlackoutDatesに追加
datePicker.BlackoutDates.Add(new CalendarDateRange(new DateTime(2022, 5, 4), new DateTime(2022, 5, 4)));
datePicker.BlackoutDates.Add(new CalendarDateRange(new DateTime(2022, 5, 9), new DateTime(2022, 5, 13)));
}
}
実行すると次のような結果になります。
選択不可の日付には×マークが表示され、選択ができないようになります。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/bf2839eddd3cc5d411229e2e3f3400ad.jpg)
選択範囲を限定する
ユーザーがカレンダーで選択できる日付の範囲を制限するには、DisplayDateStart
プロパティと DisplayDateEnd
プロパティを使用します。
プロパティ名 | 内容 |
---|---|
DisplayDateStart | 表示する最初の日付を取得または設定します。 |
DisplayDateEnd | 表示する最後の日付を取得または設定します。 |
例として5月3日~5月13日の日付までを選択可能にします。
<DatePicker
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
DisplayDateStart="2022/5/3"
DisplayDateEnd="2022/5/13"
SelectedDate="2022/5/3" />
実行すると次のような結果になります。
指定した範囲以外の日付は全て非表示の状態になり、ユーザーは指定された範囲以外の日付は選択ができません。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/b607f4196560fbfed47117531e79098d.jpg)
カレンダーの週の始まりを変更する
カレンダーの週の始まりはデフォルトでは日曜日です。他の曜日から始まるように変更する場合は、FirstDayOfWeek
プロパティを使用します。
プロパティ名 | 内容 |
---|---|
FirstDayOfWeek | 週の始まりと見なされる曜日を取得または設定します。 |
例として週の始まりを月曜日に変更します。
<DatePicker
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FirstDayOfWeek="Monday"
SelectedDate="2022/5/3" />
実行すると次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/54ad1929ae62a98960b0a14e4bb791d4.jpg)
現在の日付を強調しない
カレンダーを開いたときに現在の日付を強調しないようにするには、IsTodayHighlighted
プロパティを使用します。
プロパティ名 | 内容 |
---|---|
IsTodayHighlighted | 現在の日付が強調表示されるかどうかを示す値を取得または設定します。 |
次のようなコードを記述します。
<DatePicker
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsTodayHighlighted="False"
SelectedDate="2022/5/3" />
実行すると現在の日付が強調されなくなりました。
青背景はSelectdDate
プロパティで選択している日付です。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/6b0e41ebab8a6633744b8cd39edab9a8.jpg)
カレンダーを動的に表示する
コードで DatePicker のカレンダーを表示・非表示にするには、IsDropDownOpen
プロパティを使用します。
プロパティ名 | 内容 |
---|---|
IsDropDownOpen | ドロップダウン Calendar が開いているか閉じているかを示す値を取得または設定します。 |
例としてアプリケーションを起動した時に DatePicker のカレンダーが表示されるようにします。
<DatePicker
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsDropDownOpen="True"
SelectedDate="2022/5/3" />
実行すると次のような結果になります。
動かしていないので分かりにくいですが、カレンダーが開いた状態でアプリケーションが起動します。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/54ad1929ae62a98960b0a14e4bb791d4.jpg)
日付が変更されたらイベントを発生させる
DatePicker のカレンダーで日付を選択した時に 日付の変更通知のイベントを発生させるには、SelectedDateChanged
イベントを使用します。
イベント名 | 内容 |
---|---|
SelectedDateChanged | SelectedDate プロパティが変更されると発生します。 |
次のように XAMLとコードビハインドに記述します。
<DatePicker
Name="datePicker"
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedDate="2022/5/3"
SelectedDateChanged="datePicker_SelectedDateChanged"/>
private void datePicker_SelectedDateChanged(object sender, SelectionChangedEventArgs e)
{
//Textプロパティで変更した値を取得
var text = (sender as DatePicker)?.Text;
MessageBox.Show($"DatePickerのテキストが{text}に変更されました。");
}
実行すると次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/ca0a019083f75c8bcfa006297ff02b89.jpg)
テキストに入力されたらイベントを発生させる
DatePicker のテキストに文字が入力されたことをイベントで通知させるには、KeyUp
イベントを使用します。キーボードのキーが離れたらイベントを発生させる方法になります。
イベント | 内容 |
---|---|
KeyUp | この要素にフォーカスがあるときにキーが離されると発生します。 |
次のように XAML とコードビハインドに記述します。
<DatePicker
Name="datePicker"
Margin="20,10,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
SelectedDate="2022/5/3"
KeyUp="datePicker_KeyUp" />
private void datePicker_KeyUp(object sender, KeyEventArgs e)
{
//制御キーは戻す
if (e.Key != Key.D0 && e.Key != Key.D1 && e.Key != Key.D2 && e.Key != Key.D3 && e.Key != Key.D4 &&
e.Key != Key.D5 && e.Key != Key.D6 && e.Key != Key.D7 && e.Key != Key.D8 && e.Key != Key.D9) return;
//Textプロパティで変更した値を取得
var text = (sender as DatePicker)?.Text;
//日付として正しく入力されているか確認
if (!DateTime.TryParse(text, out DateTime dateTime)) return;
MessageBox.Show($"DatePickerのテキストが{text}に変更されました。");
}
実行すると次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2022/05/7312ccd4aa39769a1da6b3eb53c57fdf.gif)
まとめ
![](https://marunaka-blog.com/wp-content/uploads/2023/04/c35f903f10ed2371757ca77d9f41dce9-1024x358.png)
この記事では WPF の DatePicker の使い方についてサンプルコードと画像を用いて解説をしました。
画面で日付カレンダーを利用する際の参考になれば幸いです。
![](https://marunaka-blog.com/wp-content/uploads/2022/11/5b06ffe152bc8aa87073943cbcb585ca-300x200.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2f5a8ba6b1682610f773da3b2f1516f9-300x169.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/09/1c0278efd52188a8154c18b8b21f1be2-300x169.jpg)
以上、最後まで読んで頂きありがとうございました。