原文:
分享一个WPF下日历控件（Calendar）的样式
WPF日历控件的一个样式
WPF自带的日历控件样式可能会比较丑，要修改其样式看起来挺复杂的，实际上很简单，用Blend打开，修改三个模板，基本就能改变全部面貌，也很容易
先上图
样式如下：
<Style TargetType="TextBlock"
x:Key="AwesomeTextStyle">
<Setter Property="FontFamily"
Value="pack://application:,,,/Resources/#FontAwesome"></Setter>
</Style>
<Style x:Key="CalendarItemStyle1"
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"
HorizontalAlignment="Center"
Margin="0,6,0,6"
Text="{Binding}"
VerticalAlignment="Center" />
</DataTemplate>
</ControlTemplate.Resources>
<Grid x:Name="PART_Root"
Margin="5">
<Grid.Effect>
<DropShadowEffect BlurRadius="10"
ShadowDepth="3"
Direction="270"
Color="#1685f1"
Opacity=".42"
RenderingBias="Performance"></DropShadowEffect>
</Grid.Effect>
<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="Transparent"
BorderThickness="0"
Background="White">
<Border BorderBrush="#FFFFFFFF">
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="PreviousButtonTemplate"
TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<Border x:Name="Border"
Background="White"
Opacity="0"></Border>
<Ellipse x:Name="Ellipse"
Width="15"
Height="15"
Fill="White"></Ellipse>
<TextBlock Foreground="#1685f1"
FontSize="14"
Margin="0,0,2,1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Style="{StaticResource AwesomeTextStyle}"
Text=""></TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="Border"
Property="Opacity"
Value="0.3"></Setter>
</Trigger>
<Trigger Property="IsPressed"
Value="True">
<Setter TargetName="Border"
Property="Opacity"
Value="0"></Setter>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter TargetName="Ellipse"
Property="Fill"
Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="NextButtonTemplate"
TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<Border x:Name="Border"
Background="White"
Opacity="0"></Border>
<Ellipse x:Name="Ellipse"
Width="15"
Height="15"
Fill="White"></Ellipse>
<TextBlock Foreground="#1685f1"
FontSize="14"
Margin="2,0,0,1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Style="{StaticResource AwesomeTextStyle}"
Text=""></TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="Border"
Property="Opacity"
Value="0.3"></Setter>
</Trigger>
<Trigger Property="IsPressed"
Value="True">
<Setter TargetName="Border"
Property="Opacity"
Value="0"></Setter>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter TargetName="Ellipse"
Property="Fill"
Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="HeaderButtonTemplate"
TargetType="{x:Type Button}">
<Grid Cursor="Hand">
<Border x:Name="Border"
Background="White"
Opacity="0"></Border>
<ContentPresenter x:Name="buttonContent"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
TextElement.Foreground="White"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="Border"
Property="Opacity"
Value="0.3"></Setter>
</Trigger>
<Trigger Property="IsPressed"
Value="True">
<Setter TargetName="Border"
Property="Opacity"
Value="0"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle></Rectangle>
<Border Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
Background="#1685f1"></Border>
<Button x:Name="PART_PreviousButton"
Grid.Column="0"
Focusable="False"
Grid.Row="0"
Template="{StaticResource PreviousButtonTemplate}" />
<Button x:Name="PART_HeaderButton"
Grid.Column="1"
Focusable="False"
FontSize="15"
Grid.Row="0"
Template="{StaticResource HeaderButtonTemplate}" />
<Button x:Name="PART_NextButton"
Grid.Column="2"
Focusable="False"
Grid.Row="0"
Template="{StaticResource NextButtonTemplate}" />
<Grid x:Name="PART_MonthView"
Grid.ColumnSpan="3"
HorizontalAlignment="Center"
Margin="6,-1,6,6"
Grid.Row="1"
Visibility="Visible">
<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"
Grid.ColumnSpan="3"
HorizontalAlignment="Center"
Margin="6,-3,7,6"
Grid.Row="1"
Visibility="Hidden">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
<Grid x:Name="DayBorder"
Grid.Row="1"
Grid.ColumnSpan="3">
<Rectangle Fill="#447bb3"
VerticalAlignment="Top"
Height="0.5"
Margin="2,19,2,0"></Rectangle>
</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 TargetName="DayBorder"
Property="Visibility"
Value="Collapsed"></Setter>
<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 TargetName="DayBorder"
Property="Visibility"
Value="Collapsed"></Setter>
<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 x:Key="CalendarDayButtonStyle1"
TargetType="{x:Type CalendarDayButton}">
<Setter Property="MinWidth"
Value="5" />
<Setter Property="MinHeight"
Value="5" />
<Setter Property="FontSize"
Value="15" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarDayButton}">
<Grid Width="30"
Height="30">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0"
To="0.5"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="HighlightBackground" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
To="0.5"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="HighlightBackground" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
To="0"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="HighlightBackground" />
<DoubleAnimation Duration="0"
To=".35"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="NormalText" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0"
To=".75"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedBackground" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CalendarButtonFocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="CalendarButtonFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="DayButtonFocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CalendarButtonUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="DayButtonFocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Active" />
<VisualState x:Name="Inactive">
<Storyboard>
<ColorAnimation Duration="0"
To="#FF777777"
Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="NormalText" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DayStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="RegularDay" />
<VisualState x:Name="Today">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="TodayBackground" />
<ColorAnimation Duration="0"
To="#FFFFFFFF"
Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="NormalText" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BlackoutDayStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="NormalDay" />
<VisualState x:Name="BlackoutDay">
<Storyboard>
<DoubleAnimation Duration="0"
To=".2"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="Blackout" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="TodayBackground"
Fill="#1a7ee0"
Opacity="0" />
<Ellipse x:Name="SelectedBackground"
Fill="#1a7ee0"
Opacity="0" />
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" />
<Ellipse x:Name="HighlightBackground"
Fill="#FFBADDE9"
Opacity="0" />
<ContentPresenter x:Name="NormalText"
TextElement.Foreground="#FF333333"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="5,1,5,1"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<Path x:Name="Blackout"
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"
Fill="#FF000000"
HorizontalAlignment="Stretch"
Margin="3"
Opacity="0"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill"
VerticalAlignment="Stretch" />
<Rectangle x:Name="DayButtonFocusVisual"
IsHitTestVisible="false"
RadiusY="1"
RadiusX="1"
Stroke="Transparent"
Visibility="Visible" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CalendarButtonStyle1"
TargetType="{x:Type CalendarButton}">
<Setter Property="Background"
Value="#1685f1" />
<Setter Property="FontSize"
Value="12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarButton}">
<Grid Width="55">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0"
To=".5"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="Background" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
To=".5"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="Background" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0"
To=".75"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedBackground" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Active" />
<VisualState x:Name="Inactive">
<Storyboard>
<ColorAnimation Duration="0"
To="#FF777777"
Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="NormalText" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CalendarButtonFocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="CalendarButtonFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CalendarButtonFocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CalendarButtonUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CalendarButtonFocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="SelectedBackground"
Fill="{TemplateBinding Background}"
Opacity="0"
RadiusY="1"
RadiusX="1" />
<Rectangle x:Name="Background"
Fill="{TemplateBinding Background}"
Opacity="0"
RadiusY="1"
RadiusX="1" />
<ContentPresenter x:Name="NormalText"
TextElement.Foreground="#FF333333"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<Rectangle x:Name="CalendarButtonFocusVisual"
IsHitTestVisible="false"
RadiusY="1"
RadiusX="1"
Stroke="Transparent"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused"
Value="True">
<Setter Property="Visibility"
TargetName="CalendarButtonFocusVisual"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Calendar">
<Setter Property="CalendarDayButtonStyle"
Value="{StaticResource CalendarDayButtonStyle1}"></Setter>
<Setter Property="CalendarItemStyle"
Value="{StaticResource CalendarItemStyle1}"></Setter>
<Setter Property="CalendarButtonStyle"
Value="{StaticResource CalendarButtonStyle1}"></Setter>
</Style>其中某些图形可能来自于 FontAwesome.otf，大家百度下，添加到项目中即可
