一.前言
申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接。
本文主要内容:
- 日历控件Calendar自定义样式;
- 日期控件DatePicker自定义样式,及Label标签、水印、清除日期功能扩展;
二.Calendar自定义样式
先看看效果:
从上面图可以看出,日历的显示其实有三种状态,如下面的分解图:
- "日"部分的显示;
- "月"部分的显示;
- "年"部分的显示;
因此一个完整的日历,就包含多个部分,首先是"日"按钮的样式:
<!--Day按钮样式-->
<Style x:Key="CalendarDayButtonStyle" TargetType="{x:Type CalendarDayButton}">
<Setter Property="MinWidth" Value="28" />
<Setter Property="MinHeight" Value="5" />
<Setter Property="FontFamily" Value="{StaticResource FontFamily}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{StaticResource TextForeground}" />
<Setter Property="Margin" Value="0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarDayButton}">
<Grid x:Name="Grid" Margin="{TemplateBinding Margin}">
<Border x:Name="Bg" Background="{TemplateBinding Background}" />
<ContentPresenter x:Name="NormalText" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="5,2,5,2" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource ItemSelectedBackground}"></Setter>
<Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}"></Setter>
</Trigger>
<Trigger Property="IsToday" Value="True">
<Setter Property="Background" Value="{StaticResource ItemHighlighteBackground}"></Setter>
<Setter Property="Foreground" Value="{StaticResource ItemHighlighteForeground}"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource ItemMouseOverBackground}"></Setter>
<Setter Property="Foreground" Value="{StaticResource ItemMouseOverForeground}"></Setter>
</Trigger>
<!--不可用日期-->
<Trigger Property="IsBlackedOut" Value="True">
<