WPF自定义控件与样式5.docx
- 文档编号:11087107
- 上传时间:2023-05-29
- 格式:DOCX
- 页数:16
- 大小:17.43KB
WPF自定义控件与样式5.docx
《WPF自定义控件与样式5.docx》由会员分享,可在线阅读,更多相关《WPF自定义控件与样式5.docx(16页珍藏版)》请在冰点文库上搜索。
WPF自定义控件与样式5
WPF自定义控件与样式(5)
WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一.前言
申明:
WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接。
本文主要内容:
日历控件Calendar自定义样式;
日期控件DatePicker自定义样式,及Label标签、水印、清除日期功能扩展;
二.Calendar自定义样式
先看看效果:
从上面图可以看出,日历的显示其实有三种状态,如下面的分解图:
"日"部分的显示;
"月"部分的显示;
"年"部分的显示;
因此一个完整的日历,就包含多个部分,首先是"日"按钮的样式:
<!
--Day按钮样式-->
<Stylex:
Key="CalendarDayButtonStyle"TargetType="{x:
TypeCalendarDayButton}">
<SetterProperty="MinWidth"Value="28"/>
<SetterProperty="MinHeight"Value="5"/>
<SetterProperty="FontFamily"Value="{StaticResourceFontFamily}"/>
<SetterProperty="HorizontalContentAlignment"Value="Center"/>
<SetterProperty="VerticalContentAlignment"Value="Center"/>
<SetterProperty="Background"Value="Transparent"/>
<SetterProperty="Foreground"Value="{StaticResourceTextForeground}"/>
<SetterProperty="Margin"Value="0"/>
<SetterProperty="IsTabStop"Value="False"/>
<SetterProperty="Template">
<Setter.Value>
<ControlTemplateTargetType="{x:
TypeCalendarDayButton}">
<Gridx:
Name="Grid"Margin="{TemplateBindingMargin}">
<Borderx:
Name="Bg"Background="{TemplateBindingBackground}"/>
<ContentPresenterx:
Name="NormalText"HorizontalAlignment="{TemplateBindingHorizontalContentAlignment}"
Margin="5,2,5,2"VerticalAlignment="{TemplateBindingVerticalContentAlignment}"
TextElement.Foreground="{TemplateBindingForeground}"/>
</Grid>
<ControlTemplate.Triggers>
<TriggerProperty="IsSelected"Value="True">
<SetterProperty="Background"Value="{StaticResourceItemSelectedBackground}"></Setter>
<SetterProperty="Foreground"Value="{StaticResourceItemSelectedForeground}"></Setter>
</Trigger>
<TriggerProperty="IsToday"Value="True">
<SetterProperty="Background"Value="{StaticResourceItemHighlighteBackground}"></Setter>
<SetterProperty="Foreground"Value="{StaticResourceItemHighlighteForeground}"></Setter>
</Trigger>
<TriggerProperty="IsMouseOver"Value="True">
<SetterProperty="Background"Value="{StaticResourceItemMouseOverBackground}"></Setter>
<SetterProperty="Foreground"Value="{StaticResourceItemMouseOverForeground}"></Setter>
</Trigger>
<!
--不可用日期-->
<TriggerProperty="IsBlackedOut"Value="True">
<SetterProperty="Opacity"Value="{StaticResourceDisableOpacity}"TargetName="Grid"></Setter>
</Trigger>
<!
--不在当月的日期-->
<TriggerProperty="IsInactive"Value="True">
<SetterProperty="Opacity"Value="0.65"TargetName="Grid"></Setter>
</Trigger>
<TriggerProperty="IsEnabled"Value="False">
<SetterProperty="Opacity"Value="{StaticResourceDisableOpacity}"TargetName="Grid"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
日历日期面板样式:
<!
--日历日期面板样式-->
<Stylex:
Key="CalendarItemStyle"TargetType="{x:
TypeCalendarItem}">
<SetterProperty="Margin"Value="0,1,0,1"/>
<SetterProperty="Template">
<Setter.Value>
<ControlTemplateTargetType="{x:
TypeCalendarItem}">
<ControlTemplate.Resources>
<!
--头部星期样式-->
<DataTemplatex:
Key="{x:
StaticCalendarItem.DayTitleTemplateResourceKey}">
<TextBlockText="{Binding}"FontWeight="Bold"FontFamily="{StaticResourceFontFamily}"Foreground="{StaticResourcePressedForeground}"
FontSize="{StaticResourceHeaderFontSize}"HorizontalAlignment="Center"VerticalAlignment="Center"Margin="0,6,0,6"Opacity="0.8"/>
</DataTemplate>
</ControlTemplate.Resources>
<Gridx:
Name="PART_Root">
<BorderBorderBrush="{TemplateBindingBorderBrush}"BorderThickness="1"Background="{TemplateBindingBackground}"Margin="{TemplateBindingMargin}">
<GridMargin="2">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinitionHeight="Auto"/>
<RowDefinitionHeight="*"/>
</Grid.RowDefinitions>
<!
--Header-->
<GridGrid.Row="0"HorizontalAlignment="Stretch"Background="{StaticResourceHeaderBackground}">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="2*"/>
<ColumnDefinitionWidth="*"/>
</Grid.ColumnDefinitions>
<local:
FButtonx:
Name="PART_HeaderButton"FontWeight="Bold"Style="{StaticResourceFButton_Transparency}"
Focusable="False"Grid.Column="1"FIcon="{x:
Null}"/>
<local:
FButtonx:
Name="PART_PreviousButton"Style="{StaticResourceFButton_Transparency}"
Focusable="False"Grid.Column="0"FIconSize="18"Content=""FIcon=""/>
<local:
FButtonx:
Name="PART_NextButton"Style="{StaticResourceFButton_Transparency}"
Focusable="False"Grid.Column="2"FIconSize="18"Content=""FIcon=""/>
</Grid>
<!
--PART_MonthView-->
<Gridx:
Name="PART_MonthView"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"Margin="6,1,6,6"Grid.Row="1"Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinitionHeight="*"/>
<RowDefinitionHeight="*"/>
<RowDefinitionHeight="*"/>
<RowDefinitionHeight="*"/>
<RowDefinitionHeight="*"/>
<RowDefinitionHeight="*"/>
<RowDefinitionHeight="*"/>
</Grid.RowDefinitions>
</Grid>
<!
--PART_YearView-->
<Gridx:
Name="PART_YearView"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"Margin="6,10,6,10"Grid.Row="1"Visibility="Hidden">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinitionHeight="*"/>
<RowDefinitionHeight="*"/>
<RowDefinitionHeight="*"/>
</Grid.RowDefinitions>
</Grid>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<TriggerProperty="IsEnabled"Value="False">
<SetterProperty="Opacity"TargetName="PART_Root"Value="{StaticResourceDisableOpacity}"/>
</Trigger>
<DataTriggerBinding="{BindingDisplayMode,RelativeSource={RelativeSourceFindAncestor,AncestorType={x:
TypeCalendar}}}"Value="Year">
<SetterProperty="Visibility"TargetName="PART_MonthView"Value="Hidden"/>
<SetterProperty="Visibility"TargetName="PART_YearView"Value="Visible"/>
</DataTrigger>
<!
--Decade美['d?
ked]n.十年,十年期;十-->
<DataTriggerBinding="{BindingDisplayMode,RelativeSource={RelativeSourceFindAncestor,AncestorType={x:
TypeCalendar}}}"Value="Decade">
<SetterProperty="Visibility"TargetName="PART_MonthView"Value="Hidden"/>
<SetterProperty="Visibility"TargetName="PART_YearView"Value="Visible"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
年月按钮样式:
<!
--年、月按钮样式-->
<Stylex:
Key="CalendarButtonStyle"TargetType="{x:
TypeCalendarButton}">
<SetterProperty="Background"Value="Transparent"/>
<SetterProperty="MinWidth"Value="40"/>
<SetterProperty="MinHeight"Value="42"/>
<SetterProperty="FontSize"Value="{StaticResourceFontSize}"/>
<SetterProperty="FontFamily"Value="{StaticResourceFontFamily}"/>
<SetterProperty="HorizontalContentAlignment"Value="Center"/>
<SetterProperty="VerticalContentAlignment"Value="Center"/>
<SetterProperty="Template">
<Setter.Value>
<ControlTemplateTargetType="{x:
TypeCalendarButton}">
<Gridx:
Name="Grid"Margin="{TemplateBindingMargin}">
<Borderx:
Name="Bg"Background="{TemplateBindingBackground}"/>
<ContentPresenterx:
Name="NormalText"HorizontalAlignment="{TemplateBindingHorizontalContentAlignment}"
Margin="5,2,5,2"VerticalAlignment="{TemplateBindingVerticalContentAlignment}"
TextElement.Foreground="{TemplateBindingForeground}"/>
</Grid>
<ControlTemplate.Triggers>
<TriggerProperty="IsFocused"Value="True">
<SetterProperty="Background"Value="{StaticResourceItemSelectedBackground}"></Setter>
<SetterProperty="Foreground"Value="{StaticResourceItemSelectedForeground}"></Setter>
</Trigger>
<TriggerProperty="IsMouseOver"Value="True">
<SetterProperty="Background"Value="{StaticResourceItemMouseOverBackground}"></Setter>
<SetterProperty="Foreground"Value="{StaticResourceItemMouseOverForeground}"></Setter>
</Trigger>
<!
--不在当月的日期-->
<TriggerProperty="IsInactive"Value="True">
<SetterProperty="Opacity"Value="0.8"TargetName="Grid"></Setter>
</Trigger>
<TriggerProperty="IsEnabled"Value="False">
<SetterProperty="Opacity"Value="{StaticResourceDisableOpacity}"TargetName="Grid"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
最后综合以上的样式,定义我们需要的Calendar样式就差一步之遥了。
<!
--默认日历
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WPF 自定义 控件 样式