Search code examples
wpfxaml.net-4.5

WPF Calendar header background

I have created a custom style for Calendar, and seems I got everything except header color (Background) that I cannot find how to change. This background is visible in day, month and year view.

Calendar

So far I have extracted 4 templates (in Blend), and without pasting the code from all of them (its the default template), I will just show how I reference them in calendar style:

 <Style x:Key="CustomCalendarStyle" TargetType="{x:Type Calendar}">
   <Setter Property="CalendarButtonStyle"
           Value="{StaticResource CustomCalendarButtonStyle}" />
   <Setter Property="CalendarDayButtonStyle"
           Value="{StaticResource CustomCalendarDayButtonStyle}" />
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="{x:Type Calendar}">
         <Grid x:Name="PART_Root">
           <CalendarItem x:Name="PART_CalendarItem"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         Background="{TemplateBinding Background}"
                         Style="{DynamicResource CustomCalendarItemStyle}" />
         </Grid>
       </ControlTemplate>
     </Setter.Value>
   </Setter>
 </Style>

If we assume that all four of them have the default xaml code, does anyone know where is this background set (the one behind the November 2018)? It seems like it is not set in these 3 styles (CalendarButtonStyle, CalendarDayButtonStyle, CalendarItemStyle...).

I have found a 'dirty' way to achieve this, by setting the outer border of the CalendarItemStyle' template to Transparent (which basically sets the whole calendar background), and then to add one border before adding the PART_HeaderButton, PART_PreviousButton and PART_NextButton.

I am very curios to where is this background set in original style. Anyone played with calendar style?

Solution

  • This was set from the Background property of the Calendar control. If you edit the Template of the Control itself from Blend or Visual Studio; you'll get,

    <Style x:Key="CalendarStyle1" TargetType="{x:Type Calendar}">
    <Setter Property="Foreground" Value="#FF333333"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFE4EAF0" Offset="0"/>
                <GradientStop Color="#FFECF0F4" Offset="0.16"/>
                <GradientStop Color="#FFFCFCFD" Offset="0.16"/>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" 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 LinearGradientBrush set for the Background defines the header Background color. Not sure why it was implemented in this way; this is how it is.