一．前言
申明
：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。
本文主要内容：
-
日历控件Calendar自定义样式；
-
日期控件DatePicker自定义样式，及Label标签、水印、清除日期功能扩展；
-
二．Calendar自定义样式
先看看效果：
从上面图可以看出，日历的显示其实有三种状态，如下面的分解图：
-
"日"部分的显示；
-
"月"部分的显示；
-
"年"部分的显示；
-
因此一个完整的日历，就包含多个部分，首先是"日"按钮的样式：
View Code
日历日期面板样式：
View Code
年月按钮样式：
View Code
最后综合以上的样式，定义我们需要的Calendar样式就差一步之遥了。
<!--默认日历样式-->
<Style x:Key="DefaultCalendar" TargetType="{x:Type Calendar}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="{StaticResource TextForeground}" />
<Setter Property="CalendarDayButtonStyle" Value="{StaticResource CalendarDayButtonStyle}" />
<Setter Property="CalendarItemStyle" Value="{StaticResource CalendarItemStyle}" />
<Setter Property="CalendarButtonStyle" Value="{StaticResource CalendarButtonStyle}" />
<Setter Property="Background" Value="{StaticResource PopupBackground}" />
<Setter Property="BorderBrush" Value="{StaticResource ControlBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="FontSize" Value="13" />
<Setter Property="FontFamily" Value="{StaticResource FontFamily}" />
<Setter Property="IsTodayHighlighted" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Calendar}">
<StackPanel x:Name="PART_Root" HorizontalAlignment="Center" Background="Transparent">
<CalendarItem x:Name="PART_CalendarItem" BorderBrush="{TemplateBinding BorderBrush}" FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
Style="{TemplateBinding CalendarItemStyle}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
三．DatePicker自定义样式，及Label标签、水印、清除日期功能扩展
有了上面的日历样式，下面做DatePicker的样式就好办了，其实就是TextBox+Button+Calendar。此处的实现同上一篇（WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式）思路基本一致，因此本文就不做更多的解释，可以参考本系列前面的文章（末尾附录有链接）先看看效果图：
3.1 DatePicker自定义样式
基本样式定义：
View Code
水印效果：
使用示例：
<DatePicker Margin="3" core:ControlAttachProperty.Watermark="妈的快输入日期"/>
<DatePicker Margin="3" SelectedDate="{x:Static system:DateTime.Today}"/>
<DatePicker Margin="3" IsEnabled="False" SelectedDate="{x:Static system:DateTime.Today}"/>
3.2 Label标签
通过扩展基础样式中的标签附加属性实现，定义样式代码：
<!--DatePicker包含附加属性Label的样式 LabelDatePicker -->
<Style TargetType="{x:Type DatePicker}" x:Key="LabelDatePicker" BasedOn="{StaticResource DefaultDatePicker}">
<Setter Property="Width" Value="260"></Setter>
<Setter Property="local:ControlAttachProperty.LabelTemplate" >
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Width="60" Background="{StaticResource TextLabelBackground}">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Margin="2" Text="{TemplateBinding Content}"></TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
效果图：
使用示例：
<DatePicker Margin="3" Style="{StaticResource LabelClearButtonDatePicker}" core:ControlAttachProperty.Watermark="选择出生日期" core:ControlAttachProperty.Label="出生日期"/>
<DatePicker Margin="3" Style="{StaticResource LabelDatePicker}" core:ControlAttachProperty.Label="死亡日期" SelectedDate="{x:Static system:DateTime.Today}"/>
<DatePicker Margin="3" Style="{StaticResource LabelDatePicker}" core:ControlAttachProperty.Label="非法日期" IsEnabled="False" SelectedDate="{x:Static system:DateTime.Today}"/>
3.3 清除日期值的功能扩展
此功能在前面的文章有介绍过（参考本文末尾链接），效果在上面的图片中可以看到。样式代码：
<!--DatePicker包含清除Text按钮的样式 ClearButtonDatePicker -->
<Style TargetType="{x:Type DatePicker}" x:Key="ClearButtonDatePicker" BasedOn="{StaticResource DefaultDatePicker}">
<Setter Property="local:ControlAttachProperty.AttachContent">
<Setter.Value>
<ControlTemplate>
<local:FButton FIcon="" Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
local:ControlAttachProperty.IsClearTextButtonBehaviorEnabled="True" Command="local:ControlAttachProperty.ClearTextCommand"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type DatePicker}}}"
Margin="1,3,0,4" FIconSize="14" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--DatePicker包含附加属性Label，以及ClearText按钮的样式 LabelClearButtonDatePicker -->
<Style TargetType="{x:Type DatePicker}" x:Key="LabelClearButtonDatePicker" BasedOn="{StaticResource DefaultDatePicker}">
<Setter Property="Width" Value="280"></Setter>
<Setter Property="local:ControlAttachProperty.LabelTemplate" >
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Width="60" Background="{StaticResource TextLabelBackground}">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Margin="2" Text="{TemplateBinding Content}"></TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="local:ControlAttachProperty.AttachContent">
<Setter.Value>
<ControlTemplate>
<local:FButton FIcon="" Style="{StaticResource FButton_Transparency}" IsTabStop="False" FIconMargin="0"
local:ControlAttachProperty.IsClearTextButtonBehaviorEnabled="True" Command="local:ControlAttachProperty.ClearTextCommand"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type DatePicker}}}"
Margin="0,3,0,4" FIconSize="14" Foreground="{StaticResource TextForeground}" Cursor="Arrow"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
使用示例：
<DatePicker Margin="3" Style="{StaticResource ClearButtonDatePicker}"/>
<DatePicker Margin="3" Style="{StaticResource LabelClearButtonDatePicker}" core:ControlAttachProperty.Watermark="选择出生日期" core:ControlAttachProperty.Label="出生日期"/>
附录：参考引用
WPF自定义控件与样式(1)-矢量字体图标(iconfont)
WPF自定义控件与样式(2)-自定义按钮FButton
WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
个人能力有限，本文内容仅供学习、探讨，欢迎指正、交流。
