How to style the BlackoutDates from WPF calendar

Question

I want to style the the BlackoutDates of the WPF calendar. The default visualisation is a gray cross above the date numeral. How to only gray them out for example?

Answer 1

Here you go

<Calendar>
    <Calendar.CalendarDayButtonStyle>
        <Style TargetType="CalendarDayButton" BasedOn="{StaticResource {x:Type CalendarDayButton}}">
            <Style.Triggers>
                <Trigger Property="IsBlackedOut" Value="True">
                    <Setter Property="Background" Value="LightGray"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Calendar.CalendarDayButtonStyle>
    <Calendar.BlackoutDates>
        <CalendarDateRange Start="24-June-2014" End="25-June-2014"/>
    </Calendar.BlackoutDates>
</Calendar>

I have specified a custom style for CalendarDayButtonStyle and in that style I defined a trigger on IsBlackedOut and set the Background to LightGray

result

you can choose to manipulate other properties as per your needs

Remove existing blackout

to remove existing blackout you have options of defining a custom template for the calendar day button, but the drawback is that you'll have to maintain it for every theme eg Luna, Classic etc

I am going to propose a solution which will help you utilize the existing template so no need to worry for such issues

I used Attached properties for same

class CalenderHelper

namespace CSharpWPF
{
    class CalenderHelper : DependencyObject
    {
        public static bool GetIsBlackOutDisabled(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsBlackOutDisabledProperty);
        }

        public static void SetIsBlackOutDisabled(DependencyObject obj, bool value)
        {
            obj.SetValue(IsBlackOutDisabledProperty, value);
        }

        // Using a DependencyProperty as the backing store for IsBlackOutDisabled.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsBlackOutDisabledProperty =
            DependencyProperty.RegisterAttached("IsBlackOutDisabled", typeof(bool), typeof(CalenderHelper), new PropertyMetadata(false, OnIsBlackOutDisabledChanged));

        private static void OnIsBlackOutDisabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            CalendarDayButton dayButton = d as CalendarDayButton;
            if (dayButton.IsLoaded)
            {
                SetBlackout(dayButton, (bool)e.NewValue);
            }
            else
            {
                dayButton.Loaded += (s, ee) =>
                {
                    SetBlackout(dayButton, (bool)e.NewValue);
                };
            }
        }

        static void SetBlackout(CalendarDayButton dayButton, bool collapsed)
        {
            ControlTemplate template = dayButton.Template;
            Path blackoutPath = template.FindName("Blackout", dayButton) as Path;
            if (collapsed)
                blackoutPath.Visibility = System.Windows.Visibility.Collapsed;
            else
                blackoutPath.Visibility = System.Windows.Visibility.Visible;
        }
    }
}

I have created a class CalenderHelper with an attached property IsBlackOutDisabled which will hide the blackout element in the existing template

xaml

<Calendar x:Name="cal" xmlns:l="clr-namespace:CSharpWPF">
    <Calendar.CalendarDayButtonStyle>
        <Style TargetType="CalendarDayButton" BasedOn="{StaticResource {x:Type CalendarDayButton}}">
            <Style.Triggers>
                <Trigger Property="IsBlackedOut" Value="True">
                    <Setter Property="Background" Value="LightGray"/>
                    <Setter Property="l:CalenderHelper.IsBlackOutDisabled" Value="True"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Calendar.CalendarDayButtonStyle>
    <Calendar.BlackoutDates>
        <CalendarDateRange Start="24-June-2014" End="25-June-2014"/>
    </Calendar.BlackoutDates>
</Calendar>

I have enabled my newly created property l:CalenderHelper.IsBlackOutDisabled in the trigger, which in turn will hide the default blackout visual

result

this approach make it flexible for many purpose, you may code it for other sophisticate functions which are not easily doable via simple xaml