.png

XamDateTimeEditor で表示されるカレンダーの土曜、日曜の背景色および文字色をカスタマイズ方法をご紹介します。

実装方法

XamDateTimeEditor のカレンダー部分の日付コントロールは CalendarDay コントロールにより、表現しています。

土曜、日曜の表現方法をカスタマイズするために、CalendarDay の背景色(Background)および文字色(Foreground)を設定します。

<igEditors:XamDateTimeEditor >
    <igEditors:XamDateTimeEditor.Resources>
        <Style TargetType="{x:Type igEditors:CalendarDay}">
            <!-- 背景色を変更するコンバーター、土曜は背景色:青。日曜は背景色:赤に変換 -->
            <Setter Property="Background" 
                    Value="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource WeekendToBackgroundConverter}}" />
            <!-- 背景色を変更するコンバーター、土曜、日曜は文字色:白に変換 -->
            <Setter Property="Foreground" 
                    Value="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource WeekendToForegroundConverter}}" />
        </Style>
    </igEditors:XamDateTimeEditor.Resources>
</igEditors:XamDateTimeEditor>

また、土曜、日曜の判定には、コンバーターにて判定を行います。

/// <summary>
/// カレンダー日付から、土曜、日曜の背景色を変換するコンバーター
/// </summary>
public class WeekendToBackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        // 土曜
        if ((value as CalendarDay).StartDate.DayOfWeek == DayOfWeek.Saturday)
        {
            return Brushes.Blue;
        }
        // 日曜
        else if ((value as CalendarDay).StartDate.DayOfWeek == DayOfWeek.Sunday)
        {
            return Brushes.Red;
        }

        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

製品について

Ultimate UI for WPF