リサイズはクリックかドラッグ

外観を変更する

このトピックでは、ドロップダウンカレンダーコントロールの外観のカスタマイズについて解説します。

カレンダーの構成要素

ドロップダウンカレンダーコントロールは、下図の要素から構成されています。

カレンダーの構成要素
（図）: カレンダーの構成要素
テーマの適用

InputMan for WPF に用意されているテーマテンプレートを使用することで、コントロールの外観のスタイルを変更することができます。

テーマの名前外観説明
GenericGeneric スタイル標準的なデザインのテーマです。
AeroAero スタイルAero の外観に似たデザインのテーマです。
Aero2Aero 2 スタイルAero2 の外観に似たデザインのテーマです。
AeroLiteAeroLite スタイルAeroLite の外観に似たデザインのテーマです。
BureauBlueBureauBlue スタイルOffice Blue の外観に似たデザインのテーマです。
BureauBlackBureauBlack スタイルOffice Black の外観に似たデザインのテーマです。
ClassicClassic スタイルClassic の外観に似たデザインのテーマです。
ExpressionDarkExpressionDark スタイルExpression Blend の外観に似たデザインのテーマです。
Luna（NormalColor）Luna（NormalColor） スタイルLuna NormalColor の外観に似たデザインのテーマです。
Luna（Homestead）Luna（Homestead） スタイルLuna Homestead の外観に似たデザインのテーマです。
Luna（Metallic）Luna（Metallic） スタイルLuna Metallic の外観に似たデザインのテーマです。
RoyaleRoyale スタイルRoyale の外観に似たデザインのテーマです。

テーマテンプレートに関する詳細については「テーマテンプレートを使用する」を参照してください。

マージンの設定

ドロップダウンカレンダーコントロールでは、InnerMargin プロパティを使用して、日付領域のマージン（下図の青色の領域）を設定できます。マージン幅は、上下左右それそれに対して指定可能です。

日付領域のマージン
（図）: 日付領域のマージン

以下のサンプルコードは、上下 10 ピクセル、左右５ピクセルでマージンを設定します。

コピー
// 日付領域のマージンをそれぞれ左右=5、上下=10に設定します。
GcDropDownCalendar1.InnerMargin = new Thickness(5, 10, 5, 10);
ヘッダ領域

ヘッダ領域には、現在表示している月や年などを示すヘッダテキストと、カレンダーを前後のページに切り替えるためのナビゲータで構成されています。ヘッダ領域については、以下の項目を設定できます。

  • Month カレンダーのヘッダテキストの書式（YearMonthFormat プロパティ）
  • Year カレンダーおよび Decade カレンダーのヘッダテキストの書式（YearFormat プロパティ）
メモ メモ

ヘッダ領域の描画スタイルを設定するには、CalendarHeaderButtonStyle プロパティを使用して、CalendarHeaderButton オブジェクトのプロパティを設定します。詳しくは「スタイルを設定する」を参照してください。

以下のサンプルコードは、各カレンダーモードのヘッダテキストを和暦で表示します。

コピー
gcDropDownCalendar1.YearMonthFormat = "ggg e年 M月";
gcDropDownCalendar1.YearFormat = "ggg e年";
隣接日領域

隣接日領域には、現在表示している月に隣接する月の一部の日が表示されます。隣接日領域については、次の項目を設定できます。

  • 隣接日の表示と非表示（ShowTrailing プロパティ）
  • 空白行の表示と非表示（EmptyRow プロパティ）
左：隣接日を表示　　右：隣接日を非表示
（図）: 左：隣接日を表示　　右：隣接日を非表示
左：空白行から開始　　右：空白行を非表示
（図）: 左：空白行から開始　　右：空白行を非表示
メモ メモ

隣接日領域の描画スタイルを設定するには、CalendarDayButtonStyleSelector プロパティを使用して、PropertyCondition オブジェクトにて IsTrailing = True の条件に対するスタイル設定を行います。詳しくは「スタイルを設定する」を参照してください。

以下のサンプルコードは、隣接日および空白行を非表示にします。

コピー
using GrapeCity.Windows.InputMan;

GcDropDownCalendar1.ShowTrailing = false;
GcDropDownCalendar1.EmptyRow = EmptyRow.AllAtEnd;
今日の日付

カレンダー上の今日の日付を強調表示させることができます。今日の日付については、次の項目を設定できます。

週番号領域

週番号領域には、通年で第何週に相当するかを示す番号（週番号）が表示されます。

週番号は既定では非表示となっています。週番号を表示するには、WeekNumberStyle プロパティを使用して、WeekNumber オブジェクトの Visibility プロパティを Visibility.Visible に設定する必要があります。

メモ メモ

週番号領域の描画スタイルを設定するには、WeekNumberStyle プロパティを使用して、WeekNumber オブジェクトのプロパティを設定します。詳しくは「スタイルを設定する」を参照してください。

以下のサンプルコードは、ドロップダウンカレンダー上に週番号を紫色で表示します。

コピー
using GrapeCity.Windows.InputMan.Primitives;

Style style = new Style(typeof(WeekNumber));
style.Setters.Add(new Setter() {Property = WeekNumber.VisibilityProperty, Value = "Visible"});
style.Setters.Add(new Setter() {Property = WeekNumber.ForegroundProperty, Value = "Magenta"});

GcDropDownCalendar1.WeekNumberStyle = style;
参照