Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Custom Calendar Style WPF

0.00/5 (No votes)
2 Mar 2016 1  
Customize default style of calendar in WPF

Introduction

This tip is all about that how to change default style and size of calander in wpf.

Using the code

It's very simple to change default style of calendar in wpf by creating our own custom style.

We need to create style for Calendar like below-

<Style x:Key="StyleCalanderDayButton" TargetType="{x:Type CalendarDayButton}">

        <Setter Property="Height" Value="40"></Setter>

        <Setter Property="Width" Value="40"></Setter>

    </Style>

    <Style x:Key="StyleCalanderButton" TargetType="{x:Type CalendarButton}">

        <Setter Property="Height" Value="60"></Setter>

        <Setter Property="Width" Value="60"></Setter>

        <Setter Property="FontWeight" Value="Normal"/>

        <Setter Property="FontSize" Value="18" />

    </Style>

    <Style x:Key="StyleCalendar" TargetType="{x:Type Calendar}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type Calendar}">

                    <!-- Wrapping in ViewBox will enlarge calendar of that size.-->

                    <Viewbox Height="400" Width="400" >



                        <CalendarItem x:Name="PART_CalendarItem" 

                                  Background="{TemplateBinding Background}"

                                  BorderBrush="{TemplateBinding BorderBrush}"

                                  BorderThickness="{TemplateBinding BorderThickness}" FontStretch="Expanded"  >



                        </CalendarItem>

                    </Viewbox>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

        <Setter Property="CalendarDayButtonStyle"  Value="{StaticResource StyleCalanderDayButton}"></Setter>

        <Setter Property="CalendarButtonStyle"  Value="{StaticResource StyleCalanderButton}"></Setter>

        <Setter Property="Foreground" Value="#FF333333"/>

        <Setter Property="Background">

            <Setter.Value>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#089bd6" Offset="0"/>

                    <GradientStop Color="#9ce1fc" Offset="0.1"/>

                    <GradientStop Color="#9ce1fc" Offset="0.1"/>

                    <GradientStop Color="#20bcf9" Offset="1"/>

                </LinearGradientBrush>

            </Setter.Value>

        </Setter>

        <Setter Property="BorderThickness" Value="0"/>

    </Style>

In above style, 'StyleCalendar' is main style which is using two sub styles - 'StyleCalanderDayButton' style is used to change style of day buttons and 'StyleCalanderButton' used to change style of other buttons of calendar.

Now, we can use this style with calendar like as -

Style="{StaticResource StyleCalendar}"

We can also use above style inside datepicker for Calander like as- 

 CalendarStyle="{StaticResource StyleCalendar}"

You can modify this style as needed.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here