Table of Contents
Table of Contents
Customizing Day Style

The style for each "day button" can be customized through DayButtonStyle property. When using this style with triggers, it can be used to set styles for different states. For example, a different color when mouse is over the button, another style when the button is selected, etc. The following code demonstrates this property. The style used in the following is the same as the default style for the Aero theme.

XAML
Copy 
<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:eo="http://schemas.essentialobjects.com/wpf/"
        Title="MainWindow" Height="250" Width="360">
    <StackPanel Margin="10">
        <eo:Calendar HorizontalAlignment="Left" HighlightToday="True">
            <eo:Calendar.DayButtonStyle>
                <Style TargetType="{x:Type eo:CalendarDayButton}">
                    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                    <Setter Property="HorizontalContentAlignment" Value="Center" />
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                    <Setter Property="SnapsToDevicePixels" Value="true"/>
                    <Setter Property="Content" Value="{Binding Path=Day}" />
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type eo:CalendarDayButton}">
                                <Border x:Name="Border"
                            CornerRadius="1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}" >
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsKeyboardFocusWithin" Value="True">
                                        <Setter Property="Background" Value="#6FCBE8F6" />
                                        <Setter Property="BorderBrush" Value="#6F26A0DA" />
                                    </Trigger>

                                    <Trigger Property="IsMouseOver" Value="true">
                                        <Setter Property="BorderBrush" Value="#70C0E7" />
                                        <Setter Property="Background" Value="#E5F3FB" />
                                    </Trigger>

                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Background" Value="#EEEEEE" />
                                        <Setter Property="BorderBrush" Value="#AAAAAA" />
                                        <Setter Property="Foreground" Value="#888888"/>
                                    </Trigger>

                                    <!-- highlight the current date -->
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=eo:Calendar}, Path=HighlightToday}" 
                                           Value="True" />
                                            <Condition Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsToday}"
                                           Value="true" />
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="BorderBrush" Value="#0066CC" />
                                        <Setter Property="Foreground" Value="#0066CC" />
                                    </MultiDataTrigger>

                                    <Trigger Property="IsNoneMonth" Value="true">
                                        <Setter Property="Foreground" Value="#646464" />
                                    </Trigger>

                                    <!-- highlight if it is a weekend day -->
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=eo:Calendar}, Path=HighlightWeekends}" Value="True" />
                                            <Condition Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=IsWeekend}" Value="true" />
                                        </MultiDataTrigger.Conditions>
                                        <MultiDataTrigger.Setters>
                                            <Setter Property="Foreground" Value="Red" />
                                        </MultiDataTrigger.Setters>
                                    </MultiDataTrigger>

                                    <Trigger Property="IsDisabled" Value="true">
                                        <Setter Property="IsEnabled" Value="False" />
                                    </Trigger>

                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Background" Value="#CBE8F6" />
                                        <Setter Property="BorderBrush" Value="#26A0DA" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </eo:Calendar.DayButtonStyle>
        </eo:Calendar>
    </StackPanel>
</Window>

Key points in the above sample include:

  • The target type for this style is CalendarDayButton
    • ;
  • The DataContext of the CalendarDayButton is a DateTime structure that the day button represents;
  • The Content of the CalendarDayButton is the day number. For example, it will be "9" for "January 9th, 2013".
  • CalendarDayButton provides several properties such as IsToday, IsDisabled, IsSelected, etc., for you to switch to different styles using triggers;