Calendar Styles and Templates

Calendar Styles and Templates

Collapse All

Silverlight

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 Using a ControlTemplate.

Calendar Parts

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

Calendar Part	Type	Description
Root	Panel	The main visual of the calendar.
CalendarItem	CalendarItem	The currently displayed month or year on a Calendar.

Calendar States

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

VisualState Name	VisualStateGroup Name	Description
Valid	ValidationStates	The Calendar is valid.
InvalidFocused	ValidationStates	The Calendar control is not valid and has focus.
InvalidUnfocused	ValidationStates	The Calendar control is not valid and does not have focus.

Calendar Style Properties

The following table lists the Style properties of the Calendar control. You must set the TargetType property when you create a Style.

Property Name	Target Type	Description
CalendarItemStyle	CalendarItem	The style applied to the CalendarItem.
CalendarButtonStyle	CalendarButton	The style applied to the CalendarButton.
CalendarDayButtonStyle	CalendarDayButton	The style applied to the CalendarDayButton.

CalendarItem Parts

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

CalendarItem Part	Type	Description
Root	Grid	The root of the control.
PreviousButton	Button	The button that displays the previous page of the calendar when it is clicked.
NextButton	Button	The button that displays the next page of the calendar when it is clicked.
HeaderButton	Button	The button that allows switching between month mode, year mode, and decade mode.
MonthView	Grid	Hosts the content when in month mode.
YearView	Grid	Hosts the content when in year or decade mode.
DisabledVisual	Grid	The overlay for the disabled state.
DayTitleTemplate	DataTemplate	The DataTemplate that describes the visual structure.

CalendarItem States

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

CalendarItem VisualState Name	VisualStateGroup Name	Description
Normal State	CommonStates	The default state.
Disabled State	CommonStates	The state that is triggered when the calendar is disabled.

CalendarDayButton Parts

The CalendarDayButton control does not have any named parts.

CalendarDayButton States

The following table lists the visual states for a CalendarDayButton class. A control can be in only one state from each VisualStateGroup at a time.

CalendarDayButton VisualState Name	VisualStateGroup Name	Description
Normal	CommonStates	The default state.
Disabled	CommonStates	The state that is triggered when the CalendarDayButton is disabled.
MouseOver	CommonStates	The state that is triggered when the mouse pointer is positioned over the CalendarDayButton.
Pressed	CommonStates	The state that is triggered when the CalendarDayButton is pressed.
Selected	SelectionStates	The button is selected.
Unselected	SelectionStates	The button is not selected.
CalendarButtonFocused	CalendarButtonFocusStates	The button has focus.
CalendarButtonUnfocused	CalendarButtonFocusStates	The button does not have focus.
Active	ActiveStates	The button is active.
Inactive	ActiveStates	The button is inactive.
RegularDay	DayStates	The button does not represent DateTime..::.Today.
Today	DayStates	The button represents DateTime..::.Today.
NormalDay	BlackoutDayStates	The button represents a day that is not a blackout day.
BlackoutDay	BlackoutDayStates	The button represents a blackout day.

CalendarButton Parts

The CalendarButton control does not have any named parts.

CalendarButton States

The following table lists the visual states for a CalendarButton class. A control can be in only one state from each VisualStateGroup at a time.

CalendarButton VisualState Name	VisualStateGroup Name	Description
Normal	CommonStates	The default state.
Disabled	CommonStates	The state that is triggered when the CalendarButton is disabled.
MouseOver	CommonStates	The state that is triggered when the mouse pointer is positioned over the CalendarButton.
Pressed	CommonStates	The state that is triggered when the CalendarButton is pressed.
Selected	SelectionStates	The button is selected.
Unselected	SelectionStates	The button is not selected.
CalendarButtonFocused	CalendarButtonFocusStates	The button has focus.
CalendarButtonUnfocused	CalendarButtonFocusStates	The button does not have focus.
Active	ActiveStates	The button is active.
Inactive	ActiveStates	The button is inactive.

Example

The following example shows how to add custom styles as StaticResource values. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate. In this example, the StaticResource values refer to x:Key attribute values that you must add to the Style elements when you modify them for your project.

XAML

<Calendar x:Name="calendar1"
    Style="{StaticResource newCalendarStyle}"
    MonthStyle="{StaticResource newMonthStyle}"
    DayStyle="{StaticResource newDayStyle}" />

Default Style and Template

The following shows the XML namespace definition that you have to specify when you work with styles and templates.

<!-- XML Name Space definitions. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

The following XAML shows the default styles and templates for the Calendar, CalendarItem, CalendarDayButton, and CalendarButton classes. To customize these styles, add the following XAML to your project, add an x:Key attribute to each Style element, and then reference the styles as shown in the previous example.

XAML

<Style TargetType="controls:Calendar">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFD3DEE8" Offset="0" />
                <GradientStop Color="#FFD3DEE8" Offset="0.16" />
                <GradientStop Color="#FFFCFCFD" Offset="0.16" />
                <GradientStop Color="#FFFFFFFF" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness" Value="1" />
    <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="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:Calendar">
                <StackPanel x:Name="Root" HorizontalAlignment="Center">
                    <controlsPrimitives:CalendarItem x:Name="CalendarItem" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

XAML

<Style TargetType="controlsPrimitives:CalendarItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controlsPrimitives:CalendarItem">
                <Grid>
                    <Grid.Resources>
                        <SolidColorBrush x:Key="DisabledBrush" Color="#8CFFFFFF" />
                    </Grid.Resources>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Margin="0,2,0,2" CornerRadius="1">
                        <Border CornerRadius="1" BorderBrush="#FFFFFFFF" BorderThickness="2">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <Grid.Resources>
                                    <ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
                                        <Grid Cursor="Hand">
                                            <vsm:VisualStateManager.VisualStateGroups>
                                                <vsm:VisualStateGroup x:Name="CommonStates">
                                                    <vsm:VisualState x:Name="Normal" />
                                                    <vsm:VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimation Storyboard.TargetName="ContentBrush" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                    <vsm:VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                </vsm:VisualStateGroup>
                                            </vsm:VisualStateManager.VisualStateGroups>

                                            <ContentControl x:Name="Content" IsTabStop="False" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="1,5,1,9" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                                <ContentControl.Foreground>
                                                    <SolidColorBrush x:Name="ContentBrush" Color="#FF333333" />
                                                </ContentControl.Foreground>
                                            </ContentControl>
                                        </Grid>
                                    </ControlTemplate>

                                    <DataTemplate x:Name="DayTitleTemplate">
                                        <TextBlock FontWeight="Bold" FontSize="9.5" Text="{Binding}" Margin="0,4,0,4" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    </DataTemplate>

                                    <ControlTemplate x:Key="PreviousButtonTemplate" TargetType="Button">
                                        <Grid Cursor="Hand">
                                            <vsm:VisualStateManager.VisualStateGroups>
                                                <vsm:VisualStateGroup x:Name="CommonStates">
                                                    <vsm:VisualState x:Name="Normal" />
                                                    <vsm:VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimation Storyboard.TargetName="IconBrush" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                    <vsm:VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="IconBrush" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                </vsm:VisualStateGroup>
                                            </vsm:VisualStateManager.VisualStateGroups>

                                            <Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1" />
                                            <Grid>
                                                <Path Margin="14,-6,0,0" Height="10" Width="6" VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Fill" Data="M288.75,232.25 L288.75,240.625 L283,236.625 z">
                                                    <Path.Fill>
                                                        <SolidColorBrush x:Name="IconBrush" Color="#FF333333" />
                                                    </Path.Fill>
                                                </Path>
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>

                                    <ControlTemplate x:Key="NextButtonTemplate" TargetType="Button">
                                        <Grid Cursor="Hand">
                                            <vsm:VisualStateManager.VisualStateGroups>
                                                <vsm:VisualStateGroup x:Name="CommonStates">
                                                    <vsm:VisualState x:Name="Normal" />
                                                    <vsm:VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimation Storyboard.TargetName="IconBrush" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                    <vsm:VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="IconBrush" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                </vsm:VisualStateGroup>
                                            </vsm:VisualStateManager.VisualStateGroups>

                                            <Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1" />
                                            <Grid>
                                                <Path Margin="0,-6,14,0" Height="10" Width="6" Stretch="Fill" VerticalAlignment="Center" HorizontalAlignment="Right" Data="M282.875,231.875 L282.875,240.375 L288.625,236 z">
                                                    <Path.Fill>
                                                        <SolidColorBrush x:Name="IconBrush" Color="#FF333333" />
                                                    </Path.Fill>
                                                </Path>
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                </Grid.Resources>

                                <Button x:Name="PreviousButton" Height="20" Width="28" Visibility="Collapsed" Template="{StaticResource PreviousButtonTemplate}" HorizontalAlignment="Left" />

                                <Button x:Name="HeaderButton" Grid.Column="1" FontWeight="Bold" FontSize="10.5" Template="{StaticResource HeaderButtonTemplate}" HorizontalAlignment="Center" VerticalAlignment="Center" />

                                <Button x:Name="NextButton" Grid.Column="2" Height="20" Width="28" Visibility="Collapsed" Template="{StaticResource NextButtonTemplate}" HorizontalAlignment="Right" />

                                <Grid x:Name="MonthView" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Collapsed" Margin="6,-1,6,6">
                                    <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.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>

                                <Grid x:Name="YearView" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Collapsed" Margin="6,-3,7,6">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                </Grid>
                            </Grid>
                        </Border>
                    </Border>

                    <Rectangle x:Name="DisabledVisual" Opacity="0" Visibility="Collapsed" Stretch="Fill" RadiusX="2" RadiusY="2" StrokeThickness="1" Stroke="{StaticResource DisabledBrush}" Fill="{StaticResource DisabledBrush}" Margin="0,2,0,2" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

XAML

<Style TargetType="controlsPrimitives:CalendarDayButton">
    <Setter Property="Background" Value="#FFBADDE9" />
    <Setter Property="FontSize" Value="10" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="MinWidth" Value="5" />
    <Setter Property="MinHeight" Value="5" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controlsPrimitives:CalendarDayButton">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0:0:0.1" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To=".35" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Unselected" />
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SelectedBackground" Storyboard.TargetProperty="Opacity" To=".75" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="CalendarButtonFocusStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="CalendarButtonFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="CalendarButtonUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ActiveStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Active" />
                            <vsm:VisualState x:Name="Inactive">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="ContentBrush" Storyboard.TargetProperty="Color" To="#FF777777" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="DayStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="RegularDay" />
                            <vsm:VisualState x:Name="Today">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="TodayBackground" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                    <ColorAnimation Storyboard.TargetName="ContentBrush" Storyboard.TargetProperty="Color" Duration="0" To="#FFFFFFFF" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="BlackoutDayStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="NormalDay" />
                            <vsm:VisualState x:Name="BlackoutDay">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BlackoutVisual" Storyboard.TargetProperty="Opacity" To=".2" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <Rectangle x:Name="TodayBackground" RadiusX="1" RadiusY="1" Opacity="0" Fill="#FFAAAAAA" />
                    <Rectangle x:Name="SelectedBackground" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}" />
                    <Rectangle x:Name="Background" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}" />

                    <ContentControl x:Name="Content" IsTabStop="False" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" FontSize="{TemplateBinding FontSize}" Margin="5,1,5,1">
                        <ContentControl.Foreground>
                            <SolidColorBrush x:Name="ContentBrush" Color="#FF333333" />
                        </ContentControl.Foreground>
                    </ContentControl>

                    <Path x:Name="BlackoutVisual" 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="FocusVisual" Visibility="Collapsed" IsHitTestVisible="false" RadiusX="1" RadiusY="1" Stroke="#FF6DBDD1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

XAML

<Style TargetType="controlsPrimitives:CalendarButton">
    <Setter Property="Background" Value="#FFBADDE9" />
    <Setter Property="FontSize" Value="10" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="MinWidth" Value="40" />
    <Setter Property="MinHeight" Value="42" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controlsPrimitives:CalendarButton">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0:0:0.1" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Unselected" />
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="SelectedBackground" Storyboard.TargetProperty="Opacity" To=".75" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ActiveStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Active" />
                            <vsm:VisualState x:Name="Inactive">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="ContentBrush" Storyboard.TargetProperty="Color" To="#FF777777" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="CalendarButtonFocusStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="CalendarButtonFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="CalendarButtonUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <Rectangle x:Name="SelectedBackground" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}" />
                    <Rectangle x:Name="Background" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}" />

                    <ContentControl IsTabStop="False" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" FontSize="{TemplateBinding FontSize}" Margin="1,0,1,1">
                        <ContentControl.Foreground>
                            <SolidColorBrush x:Name="ContentBrush" Color="#FF333333" />
                        </ContentControl.Foreground>
                    </ContentControl>

                    <Rectangle x:Name="FocusVisual" Visibility="Collapsed" IsHitTestVisible="false" RadiusX="1" RadiusY="1" Stroke="#FF6DBDD1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Tasks

Concepts

Other Resources