syncfusion-wpf-datepicker

Syncfusion WPF DatePicker（SfDatePicker）の実装

SfDatePicker コントロールを使用すると、カスタマイズ可能なドロップダウン式の日付セレクターで、タッチ操作に適した方法で日付を選択できます。このスキルでは、基本的な設定から高度なカスタマイズやスタイル設定までを扱います。

このスキルを使用する場面

• 基本的な日付選択 – WPF アプリケーションに DatePicker コントロールを追加する
• 日付の書式設定 – さまざまな形式（短い日付、長い日付、月のみなど）で日付を表示する
• 日付セレクターのカスタマイズ – ドロップダウンセレクターのセルテンプレート、サイズ、間隔を変更する
• スタイルと外観 – 色、背景、テーマ、フロー方向（RTL サポート）を変更する
• 日付値の管理 – 日付範囲の設定、検証、制限や、日付変更イベントの処理を行う
• 高度な操作 – インライン編集、透かし文字、フォーカスに基づく更新、キーボード入力に対応する
• 使いやすい UX – null 値、透かしテキスト、画面上のキーボードのサポートを実装する

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet のインストールとアセンブリ参照
• デザイナー、XAML、または C# コードを使用したコントロールの追加
• 初期日付値の設定
• 日付変更イベント（ValueChanged）の処理
• 基本的な設定と初期化

日付の書式設定

📄 参照： references/date-formatting.md

• FormatString プロパティを使用した表示形式の設定
• SelectorFormatString を使用したセレクターの書式設定
• よく使用する書式指定子と例
• さまざまな形式での日付表示

日付セレクターのカスタマイズ

📄 参照： references/date-selector-customization.md

• SfDateSelector の構造を理解する
• セルテンプレート（日、月、年）のカスタマイズ
• セルのサイズと間隔の調整
• スタイルベースのカスタマイズ
• ビジュアルテンプレートの例

外観とスタイル設定

📄 参照： references/appearance-and-styling.md

• 前景色と背景色の変更
• アクセントカラーと選択項目のスタイル設定
• 右から左（RTL）へのフロー方向
• 組み込みテーマ（SfSkinManager、ThemeStudio）
• 透かしテキストとテンプレート

値と日付の管理

📄 参照： references/value-and-date-management.md

• プログラムによる日付値の設定
• null 値の処理
• 透かしとプレースホルダーテキスト
• インライン編集とキーボード入力
• 最小／最大日付範囲の制限
• フォーカスに基づく値の更新

機能と操作

📄 参照： references/features-and-interaction.md

• インライン編集モード
• 画面上のキーボード入力スコープ
• 日付範囲の検証
• ローカライズのサポート
• 一般的なワークフローとベストプラクティス

クイックスタート

XAML での基本的な DatePicker

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="DatePicker Sample">
    <Grid>
        <syncfusion:SfDatePicker x:Name="sfDatePicker" 
                                 Width="200"
                                 Value="3/19/2026"/>
    </Grid>
</Window>

C# での基本的な DatePicker

using Syncfusion.Windows.Controls.Input;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.Value = new DateTime(2026, 3, 19);
sfDatePicker.Width = 200;
this.Content = sfDatePicker;

日付選択の処理

sfDatePicker.ValueChanged += (d, e) => 
{
    DateTime oldDate = (DateTime)e.OldValue;
    DateTime newDate = (DateTime)e.NewValue;
    Console.WriteLine($"Date changed from {oldDate:d} to {newDate:d}");
};

よくあるパターン

パターン 1：日付形式の設定

<syncfusion:SfDatePicker FormatString="M" x:Name="sfDatePicker"/>

パターン 2：日付範囲の制限

sfDatePicker.MinDate = new DateTime(2026, 1, 1);
sfDatePicker.MaxDate = new DateTime(2026, 12, 31);

パターン 3：透かしを表示して null を許可

<syncfusion:SfDatePicker AllowNull="True" 
                         Value="{x:Null}"
                         Watermark="Select a date"
                         x:Name="sfDatePicker"/>

パターン 4：検証付きインライン編集

<syncfusion:SfDatePicker AllowInlineEditing="True" 
                         InputScope="Number"
                         x:Name="sfDatePicker"/>

パターン 5：色を使用したカスタムスタイル設定

<syncfusion:SfDatePicker Foreground="Blue"
                         Background="LightGray"
                         AccentBrush="Green"
                         x:Name="sfDatePicker"/>

主要なプロパティのリファレンス

プロパティ	型	デフォルト	用途
Value	DateTime?	現在の日付	選択した日付
FormatString	string	"d"	日付の表示形式
SelectorFormatString	string	"M/d/yyyy"	ドロップダウンセレクターの形式
AllowNull	bool	false	null 値を許可します
Watermark	string	null	プレースホルダーテキスト
MinDate	DateTime	最小値	選択可能な最も早い日付
MaxDate	DateTime	最大値	選択可能な最も遅い日付
AllowInlineEditing	bool	false	インラインの日付編集を有効にします
ShowDropDownButton	bool	true	ドロップダウンボタンの表示／非表示
DropDownHeight	double	Auto	ドロップダウンポップアップの高さ
Foreground	Brush	Black	テキストの色
Background	Brush	White	コントロールの背景色
AccentBrush	Brush	Blue	選択項目のハイライト