Calendar Styles and Templates

.NET Framework (current version)
 

This topic describes the styles and templates for the Calendar control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

The following table lists the named parts for the Calendar control.

PartTypeDescription
PART_CalendarItemCalendarItemThe currently displayed month or year on the Calendar.
PART_RootPanelThe panel that contains the CalendarItem.

The following table lists the visual states for the Calendar control.

VisualState NameVisualStateGroup NameDescription
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.

The following table lists the named parts for the CalendarItem control.

PartTypeDescription
PART_RootFrameworkElementThe root of the control.
PART_PreviousButtonButtonThe button that displays the previous page of the calendar when it is clicked.
PART_NextButtonButtonThe button that displays the next page of the calendar when it is clicked.
PART_HeaderButtonButtonThe button that allows switching between month mode, year mode, and decade mode.
PART_MonthViewGridHosts the content when in month mode.
PART_YearViewGridHosts the content when in year or decade mode.
PART_DisabledVisualFrameworkElementThe overlay for the disabled state.
DayTitleTemplateDataTemplateThe DataTemplate that describes the visual structure.

The following table lists the visual states for the CalendarItem control.

VisualState NameVisualStateGroup NameDescription
Normal StateCommonStatesThe default state.
Disabled StateCommonStatesThe state of the calendar when the IsEnabled property is false.
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.

The CalendarDayButton control does not have any named parts.

The following table lists the visual states for the CalendarDayButton control.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
DisabledCommonStatesThe CalendarDayButton is disabled.
MouseOverCommonStatesThe mouse pointer is positioned over the CalendarDayButton.
PressedCommonStatesThe CalendarDayButton is pressed.
SelectedSelectionStatesThe button is selected.
UnselectedSelectionStatesThe button is not selected.
CalendarButtonFocusedCalendarButtonFocusStatesThe button has focus.
CalendarButtonUnfocusedCalendarButtonFocusStatesThe button does not have focus.
FocusedFocusStatesThe button has focus.
UnfocusedFocusStatesThe button does not have focus.
ActiveActiveStatesThe button is active.
InactiveActiveStatesThe button is inactive.
RegularDayDayStatesThe button does not represent DateTime.Today.
TodayDayStatesThe button represents DateTime.Today.
NormalDayBlackoutDayStatesThe button represents a day that can be selected.
BlackoutDayBlackoutDayStatesThe button represents a day that cannot be selected.
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.

The CalendarButton control does not have any named parts.

The following table lists the visual states for the CalendarButton control.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
DisabledCommonStatesThe CalendarButton is disabled.
MouseOverCommonStatesThe mouse pointer is positioned over the CalendarButton.
PressedCommonStatesThe CalendarButton is pressed.
SelectedSelectionStatesThe button is selected.
UnselectedSelectionStatesThe button is not selected.
CalendarButtonFocusedCalendarButtonFocusStatesThe button has focus.
CalendarButtonUnfocusedCalendarButtonFocusStatesThe button does not have focus.
FocusedFocusStatesThe button has focus.
UnfocusedFocusStatesThe button does not have focus.
ActiveActiveStatesThe button is active.
InactiveActiveStatesThe button is inactive.
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.

The following example shows how to define a ControlTemplate for the Calendar control and associated types.

  <!--Style for the days of a month.-->
  <Style TargetType="CalendarDayButton"
         x:Key="CalendarDayButtonStyle">
    <Setter Property="MinWidth"
            Value="5" />
    <Setter Property="MinHeight"
            Value="5" />
    <Setter Property="FontSize"
            Value="10" />
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="CalendarDayButton">
          <Grid>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup Name="CommonStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0:0:0.1" />
                </VisualStateGroup.Transitions>
                <VisualState Name="Normal" />
                <VisualState Name="MouseOver">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="HighlightBackground"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0.5"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
                <VisualState Name="Pressed">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="HighlightBackground"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0.5"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
                <VisualState Name="Disabled">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="HighlightBackground"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0"
                                     Duration="0" />
                    <DoubleAnimation Storyboard.TargetName="NormalText"
                                     Storyboard.TargetProperty="Opacity"
                                     To=".35"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup Name="SelectionStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0" />
                </VisualStateGroup.Transitions>
                <VisualState Name="Unselected" />
                <VisualState Name="Selected">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="SelectedBackground"
                                     Storyboard.TargetProperty="Opacity"
                                     To=".75"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup Name="CalendarButtonFocusStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0" />
                </VisualStateGroup.Transitions>
                <VisualState Name="CalendarButtonFocused">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DayButtonFocusVisual"
                                                   Storyboard.TargetProperty="Visibility"
                                                   Duration="0">
                      <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState Name="CalendarButtonUnfocused">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DayButtonFocusVisual"
                                                   Storyboard.TargetProperty="Visibility"
                                                   Duration="0">
                      <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup Name="ActiveStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0" />
                </VisualStateGroup.Transitions>
                <VisualState Name="Active" />
                <VisualState Name="Inactive">
                  <Storyboard>
                    <ColorAnimation Duration="0"
                                    Storyboard.TargetName="NormalText"
                                    Storyboard.TargetProperty="(TextElement.Foreground).
                        (SolidColorBrush.Color)"
                                    To="#FF777777" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup Name="DayStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0" />
                </VisualStateGroup.Transitions>
                <VisualState Name="RegularDay" />
                <VisualState Name="Today">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="TodayBackground"
                                     Storyboard.TargetProperty="Opacity"
                                     To="1"
                                     Duration="0" />
                    <ColorAnimation Duration="0"
                                    Storyboard.TargetName="NormalText"
                                    Storyboard.TargetProperty="(TextElement.Foreground).
                        (SolidColorBrush.Color)"
                                    To="#FFFFFFFF" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup Name="BlackoutDayStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0" />
                </VisualStateGroup.Transitions>
                <VisualState Name="NormalDay" />
                <VisualState Name="BlackoutDay">
                  <Storyboard>
                    <DoubleAnimation Duration="0"
                                     Storyboard.TargetName="Blackout"
                                     Storyboard.TargetProperty="Opacity"
                                     To=".2" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle x:Name="TodayBackground"
                       RadiusX="1"
                       RadiusY="1"
                       Opacity="0">
              <Rectangle.Fill>
                <SolidColorBrush Color="{DynamicResource SelectedBackgroundColor}" />
              </Rectangle.Fill>
            </Rectangle>
            <Rectangle x:Name="SelectedBackground"
                       RadiusX="1"
                       RadiusY="1"
                       Opacity="0">
              <Rectangle.Fill>
                <SolidColorBrush Color="{DynamicResource SelectedBackgroundColor}" />
              </Rectangle.Fill>
            </Rectangle>
            <Border Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}" />
            <Rectangle x:Name="HighlightBackground"
                       RadiusX="1"
                       RadiusY="1"
                       Opacity="0">
              <Rectangle.Fill>
                <SolidColorBrush Color="{DynamicResource ControlMouseOverColor}" />
              </Rectangle.Fill>
            </Rectangle>
            <ContentPresenter x:Name="NormalText"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              Margin="5,1,5,1">
              <TextElement.Foreground>
                <SolidColorBrush Color="#FF333333" />
              </TextElement.Foreground>
            </ContentPresenter>
            <Path x:Name="Blackout"
                  Opacity="0"
                  Margin="3"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  RenderTransformOrigin="0.5,0.5"
                  Fill="#FF000000"
                  Stretch="Fill"
                  Data="M8.1772461,11.029181 L10.433105,
                    11.029181 L11.700684,12.801641 L12.973633,
                    11.029181 L15.191895,11.029181 L12.844727,
                    13.999395 L15.21875,17.060919 L12.962891,
                    17.060919 L11.673828,15.256231 L10.352539,
                    17.060919 L8.1396484,17.060919 L10.519043,
                    14.042364 z" />
            <Rectangle x:Name="DayButtonFocusVisual"
                       Visibility="Collapsed"
                       IsHitTestVisible="false"
                       RadiusX="1"
                       RadiusY="1">
              <Rectangle.Stroke>
                <SolidColorBrush Color="{DynamicResource SelectedBackgroundColor}" />
              </Rectangle.Stroke>
            </Rectangle>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--Style for the months of a year and years of a decade.-->
  <Style TargetType="CalendarButton"
         x:Key="CalendarButtonStyle">
    <Setter Property="MinWidth"
            Value="40" />
    <Setter Property="MinHeight"
            Value="42" />
    <Setter Property="FontSize"
            Value="10" />
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="CalendarButton">
          <Grid>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup Name="CommonStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0:0:0.1" />
                </VisualStateGroup.Transitions>
                <VisualState Name="Normal" />
                <VisualState Name="MouseOver">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Background"
                                     Storyboard.TargetProperty="Opacity"
                                     To=".5"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
                <VisualState Name="Pressed">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Background"
                                     Storyboard.TargetProperty="Opacity"
                                     To=".5"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup Name="SelectionStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0" />
                </VisualStateGroup.Transitions>
                <VisualState Name="Unselected" />
                <VisualState Name="Selected">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="SelectedBackground"
                                     Storyboard.TargetProperty="Opacity"
                                     To=".75"
                                     Duration="0" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup Name="ActiveStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0" />
                </VisualStateGroup.Transitions>
                <VisualState Name="Active" />
                <VisualState Name="Inactive">
                  <Storyboard>
                    <ColorAnimation Duration="0"
                                    Storyboard.TargetName="NormalText"
                                    Storyboard.TargetProperty="(TextElement.Foreground).
                        (SolidColorBrush.Color)"
                                    To="#FF777777" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup Name="CalendarButtonFocusStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0" />
                </VisualStateGroup.Transitions>
                <VisualState Name="CalendarButtonFocused">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Duration="0"
                                                   Storyboard.TargetName="CalendarButtonFocusVisual"
                                                   Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState Name="CalendarButtonUnfocused" />
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle x:Name="SelectedBackground"
                       RadiusX="1"
                       RadiusY="1"
                       Opacity="0">
              <Rectangle.Fill>
                <SolidColorBrush Color="{DynamicResource SelectedBackgroundColor}" />
              </Rectangle.Fill>
            </Rectangle>
            <Rectangle x:Name="Background"
                       RadiusX="1"
                       RadiusY="1"
                       Opacity="0">
              <Rectangle.Fill>
                <SolidColorBrush Color="{DynamicResource SelectedBackgroundColor}" />
              </Rectangle.Fill>
            </Rectangle>
            <ContentPresenter x:Name="NormalText"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              Margin="1,0,1,1">
              <TextElement.Foreground>
                <SolidColorBrush Color="#FF333333" />
              </TextElement.Foreground>
            </ContentPresenter>
            <Rectangle x:Name="CalendarButtonFocusVisual"
                       Visibility="Collapsed"
                       IsHitTestVisible="false"
                       RadiusX="1"
                       RadiusY="1">
              <Rectangle.Stroke>
                <SolidColorBrush Color="{DynamicResource SelectedBackgroundColor}" />
              </Rectangle.Stroke>
            </Rectangle>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="Background">
      <Setter.Value>
        <SolidColorBrush Color="{DynamicResource ControlMediumColor}" />
      </Setter.Value>
    </Setter>
  </Style>

  <!--Button to go to the previous month or year.-->
  <ControlTemplate x:Key="PreviousButtonTemplate"
                   TargetType="{x:Type Button}">
    <Grid Cursor="Hand">
      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
          <VisualState x:Name="Normal" />
          <VisualState x:Name="MouseOver">
            <Storyboard>
              <ColorAnimation Duration="0"
                              Storyboard.TargetName="path"
                              Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                              To="{DynamicResource GlyphMouseOver}" />
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Disabled">
            <Storyboard>
              <DoubleAnimation Duration="0"
                               To=".5"
                               Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)"
                               Storyboard.TargetName="path" />
            </Storyboard>
          </VisualState>
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <!--<Rectangle Fill="Transparent" Opacity="1" Stretch="Fill"/>-->
      <Grid  Background="Transparent">
        <Path x:Name="path"
              Margin="14,-6,0,0"
              Stretch="Fill"
              HorizontalAlignment="Left"
              Height="10"
              VerticalAlignment="Center"
              Width="6"
              Data="M288.75,232.25 L288.75,240.625 L283,236.625 z">
          <Path.Fill>
            <SolidColorBrush Color="{DynamicResource GlyphColor}" />
          </Path.Fill>
        </Path>
      </Grid>
    </Grid>
  </ControlTemplate>

  <!--Button to go to the next month or year.-->
  <ControlTemplate x:Key="NextButtonTemplate"
                   TargetType="{x:Type Button}">
    <Grid Cursor="Hand">
      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
          <VisualState x:Name="Normal" />
          <VisualState x:Name="MouseOver">
            <Storyboard>
              <ColorAnimation Duration="0"
                              To="{StaticResource GlyphMouseOver}"
                              Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                              Storyboard.TargetName="path" />
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Disabled">
            <Storyboard>
              <DoubleAnimation Duration="0"
                               To=".5"
                               Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)"
                               Storyboard.TargetName="path" />
            </Storyboard>
          </VisualState>
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <!--<Rectangle Fill="#11E5EBF1" Opacity="1" Stretch="Fill"/>-->
      <Grid Background="Transparent">
        <Path x:Name="path"
              Data="M282.875,231.875 L282.875,240.375 L288.625,236 z"
              HorizontalAlignment="Right"
              Height="10"
              Margin="0,-6,14,0"
              Stretch="Fill"
              VerticalAlignment="Center"
              Width="6">
          <Path.Fill>
            <SolidColorBrush Color="{DynamicResource GlyphColor}" />
          </Path.Fill>
        </Path>
      </Grid>
    </Grid>
  </ControlTemplate>

  <!--Button to go up a level to the year or decade.-->
  <ControlTemplate x:Key="HeaderButtonTemplate"
                   TargetType="{x:Type Button}">
    <Grid Cursor="Hand">
      <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
          <VisualState x:Name="Normal" />
          <VisualState x:Name="MouseOver">
            <Storyboard>
              <ColorAnimation Duration="0"
                              To="{DynamicResource GlyphMouseOver}"
                              Storyboard.TargetProperty="(TextElement.Foreground).
                  (SolidColorBrush.Color)"
                              Storyboard.TargetName="buttonContent" />
            </Storyboard>
          </VisualState>
          <VisualState x:Name="Disabled">
            <Storyboard>
              <DoubleAnimation Duration="0"
                               To=".5"
                               Storyboard.TargetProperty="Opacity"
                               Storyboard.TargetName="buttonContent" />
            </Storyboard>
          </VisualState>
        </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <ContentPresenter x:Name="buttonContent"
                        Margin="1,4,1,9"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Content="{TemplateBinding Content}"
                        TextElement.Foreground="#FF333333"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    </Grid>
  </ControlTemplate>

  <Style x:Key="CalendarItemStyle" TargetType="{x:Type CalendarItem}">
    <Setter Property="Margin"
            Value="0,3,0,3" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type CalendarItem}">
          <ControlTemplate.Resources>
            <DataTemplate x:Key="{x:Static CalendarItem.DayTitleTemplateResourceKey}">
              <TextBlock Foreground="#FF333333"
                         FontWeight="Bold"
                         FontSize="9.5"
                         FontFamily="Verdana"
                         Margin="0,6,0,6"
                         Text="{Binding}"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center" />
            </DataTemplate>
          </ControlTemplate.Resources>
          <Grid x:Name="PART_Root">
            <Grid.Resources>
              <SolidColorBrush x:Key="DisabledColor"
                               Color="#A5FFFFFF" />
            </Grid.Resources>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <DoubleAnimation Duration="0"
                                     To="1"
                                     Storyboard.TargetProperty="Opacity"
                                     Storyboard.TargetName="PART_DisabledVisual" />
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    CornerRadius="1">
              <Border BorderBrush="#FFFFFFFF"
                      BorderThickness="2"
                      CornerRadius="1">
                <Grid>
                  <Grid.Resources>
                  </Grid.Resources>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                  </Grid.RowDefinitions>
                  <Button x:Name="PART_PreviousButton"
                          Template="{StaticResource PreviousButtonTemplate}"
                          Focusable="False"
                          HorizontalAlignment="Left"
                          Grid.Column="0"
                          Grid.Row="0"
                          Height="20"
                          Width="28" />
                  <Button x:Name="PART_HeaderButton"
                          FontWeight="Bold"
                          Focusable="False"
                          FontSize="10.5"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          Grid.Column="1"
                          Grid.Row="0"
                          Template="{StaticResource HeaderButtonTemplate}" />
                  <Button x:Name="PART_NextButton"
                          Focusable="False"
                          HorizontalAlignment="Right"
                          Grid.Column="2"
                          Grid.Row="0"
                          Template="{StaticResource NextButtonTemplate}"
                          Height="20"
                          Width="28" />
                  <Grid x:Name="PART_MonthView"
                        Visibility="Visible"
                        Grid.ColumnSpan="3"
                        Grid.Row="1"
                        Margin="6,-1,6,6"
                        HorizontalAlignment="Center">
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                  </Grid>
                  <Grid x:Name="PART_YearView"
                        Visibility="Hidden"
                        Grid.ColumnSpan="3"
                        Grid.Row="1"
                        HorizontalAlignment="Center"
                        Margin="6,-3,7,6">
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                  </Grid>
                </Grid>
              </Border>
            </Border>
            <Rectangle x:Name="PART_DisabledVisual"
                       Fill="{StaticResource DisabledColor}"
                       Opacity="0"
                       RadiusY="2"
                       RadiusX="2"
                       Stretch="Fill"
                       Stroke="{StaticResource DisabledColor}"
                       StrokeThickness="1"
                       Visibility="Collapsed" />
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled"
                     Value="False">
              <Setter Property="Visibility"
                      TargetName="PART_DisabledVisual"
                      Value="Visible" />
            </Trigger>
            <DataTrigger Binding="{Binding DisplayMode, 
                RelativeSource={RelativeSource FindAncestor, 
                AncestorType={x:Type Calendar}}}"
                         Value="Year">
              <Setter Property="Visibility"
                      TargetName="PART_MonthView"
                      Value="Hidden" />
              <Setter Property="Visibility"
                      TargetName="PART_YearView"
                      Value="Visible" />
            </DataTrigger>
            <DataTrigger Binding="{Binding DisplayMode, 
                RelativeSource={RelativeSource FindAncestor, 
                AncestorType={x:Type Calendar}}}"
                         Value="Decade">
              <Setter Property="Visibility"
                      TargetName="PART_MonthView"
                      Value="Hidden" />
              <Setter Property="Visibility"
                      TargetName="PART_YearView"
                      Value="Visible" />
            </DataTrigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <Style TargetType="{x:Type Calendar}">
    <Setter Property="CalendarButtonStyle"
            Value="{StaticResource CalendarButtonStyle}" />
    <Setter Property="CalendarDayButtonStyle"
            Value="{StaticResource CalendarDayButtonStyle}" />
    <Setter Property="CalendarItemStyle"
            Value="{StaticResource CalendarItemStyle}" />
    <Setter Property="Foreground"
            Value="#FF333333" />
    <Setter Property="Background">
      <Setter.Value>
        <LinearGradientBrush EndPoint="0.5,1"
                             StartPoint="0.5,0">

          <!--The first two gradient stops specifies the background for 
              the calendar's heading and navigation buttons.-->
          <GradientStop Color="{DynamicResource HeaderTopColor}"
                        Offset="0" />
          <GradientStop Color="{DynamicResource ControlMediumColor}"
                        Offset="0.16" />

          <!--The next gradient stop specifies the background for 
              the calendar area.-->
          <GradientStop Color="{DynamicResource ControlLightColor}"
                        Offset="0.16" />
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush">
      <Setter.Value>
        <LinearGradientBrush EndPoint="0,1"
                             StartPoint="0,0">
          <GradientStop Color="{DynamicResource BorderLightColor}"
                        Offset="0" />
          <GradientStop Color="{DynamicResource BorderDarkColor}"
                        Offset="1" />
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Calendar}">
          <StackPanel x:Name="PART_Root"
                      HorizontalAlignment="Center">
            <CalendarItem x:Name="PART_CalendarItem"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          Background="{TemplateBinding Background}"
                          Style="{TemplateBinding CalendarItemStyle}" />
          </StackPanel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

The preceding example uses one or more of the following resources.

  <!--Control colors.-->
  <Color x:Key="WindowColor">#FFE8EDF9</Color>
  <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
  <Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

  <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
  <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
  <Color x:Key="DisabledForegroundColor">#FF888888</Color>

  <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
  <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

  <Color x:Key="ControlLightColor">White</Color>
  <Color x:Key="ControlMediumColor">#FF7381F9</Color>
  <Color x:Key="ControlDarkColor">#FF211AA9</Color>

  <Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
  <Color x:Key="ControlPressedColor">#FF211AA9</Color>


  <Color x:Key="GlyphColor">#FF444444</Color>
  <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

  <!--Border colors-->
  <Color x:Key="BorderLightColor">#FFCCCCCC</Color>
  <Color x:Key="BorderMediumColor">#FF888888</Color>
  <Color x:Key="BorderDarkColor">#FF444444</Color>

  <Color x:Key="PressedBorderLightColor">#FF888888</Color>
  <Color x:Key="PressedBorderDarkColor">#FF444444</Color>

  <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
  <Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

  <Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

  <!--Control-specific resources.-->
  <Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
  <Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
  <Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

  <Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

  <LinearGradientBrush x:Key="MenuPopupBrush"
                       EndPoint="0.5,1"
                       StartPoint="0.5,0">
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="0" />
    <GradientStop Color="{DynamicResource ControlMediumColor}"
                  Offset="0.5" />
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="1" />
  </LinearGradientBrush>

  <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                       StartPoint="0,0"
                       EndPoint="1,0">
    <LinearGradientBrush.GradientStops>
      <GradientStopCollection>
        <GradientStop Color="#000000FF"
                      Offset="0" />
        <GradientStop Color="#600000FF"
                      Offset="0.4" />
        <GradientStop Color="#600000FF"
                      Offset="0.6" />
        <GradientStop Color="#000000FF"
                      Offset="1" />
      </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
  </LinearGradientBrush>

For the complete sample, see Styling with ControlTemplates Sample.

Style
ControlTemplate
Control Styles and Templates
Control Customization
Styling and Templating
Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Show: