原文:WPF Calendar 日歷控件 樣式自定義

粗略的在代碼上做了些注釋

blend 生成出來的模版 有的時候 會生成 跟 vs ui界面不兼容的代碼 會導(dǎo)致可視化設(shè)計界面 報錯崩潰掉 但是確不影響 程序的編譯運(yùn)行

這個樣式表 在vs 里會提示動畫不兼容 Foreground屬性 報錯

先上圖看下樣式

?

下面是代碼?

<Window x:Class="CalendarStyleWpfApplication.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow"Width="640"Height="480"><Window.Resources><Style x:Key="CalendarStyle1"TargetType="{x:Type Calendar}"><!--日歷控件的背景色,也可以改成綁定的--><Setter Property="Background"Value="#f6f6f6" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Calendar}"><StackPanel x:Name="PART_Root"HorizontalAlignment="Center"VerticalAlignment="Center"><!--這個是日歷控件的主體元件,也是內(nèi)部元件PART_CalendarItem名稱不要更改,可以改它的其它樣式屬性--><CalendarItem x:Name="PART_CalendarItem"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Background="{TemplateBinding Background}"Style="{TemplateBinding CalendarItemStyle}"Height="{TemplateBinding Height}"Width="{TemplateBinding Width}"HorizontalAlignment="Stretch"VerticalAlignment="Stretch" /></StackPanel></ControlTemplate></Setter.Value></Setter></Style><!--日歷主體樣式表--><Style x:Key="CalendarItemStyle1"TargetType="{x:Type CalendarItem}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type CalendarItem}"><ControlTemplate.Resources><DataTemplate x:Key="{x:Static CalendarItem.DayTitleTemplateResourceKey}"><!--日歷星期幾的綁定樣式,我格式化成周一,周二等--><TextBlock Foreground="#666666"FontSize="16"FontFamily="微軟雅黑"HorizontalAlignment="Center"Margin="0 15"Text="{Binding StringFormat=周{0} }"VerticalAlignment="Center" /></DataTemplate></ControlTemplate.Resources><Grid x:Name="PART_Root"><Grid.Resources><!--設(shè)置日歷控件 IsEnable=false 時的不可用遮罩層顏色,并且會播放過渡動畫--><SolidColorBrush x:Key="DisabledColor"Color="#A5FFFFFF" /></Grid.Resources><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates"><VisualState x:Name="Normal" /><VisualState x:Name="Disabled"><!--設(shè)置日歷控件 IsEnable=false 時遮罩層透明度0-1變色動畫--><Storyboard><DoubleAnimation Duration="0"To="1"Storyboard.TargetProperty="Opacity"Storyboard.TargetName="PART_DisabledVisual" /></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><Border BorderBrush="#cfcfcf"BorderThickness="0"Background="{TemplateBinding Background}"CornerRadius="2"><Border><Grid><Grid.Resources><!--日歷頭左箭頭按鈕樣式模版--><ControlTemplate x:Key="PreviousButtonTemplate"TargetType="{x:Type Button}"><!--鼠標(biāo)懸停在左箭頭按鈕上時改變鼠標(biāo)指針樣式--><Grid Cursor="Hand"><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates"><VisualState x:Name="Normal" /><VisualState x:Name="MouseOver"><!--鼠標(biāo)懸停在左箭頭按鈕上時左箭頭顏色變化動畫--><Storyboard><ColorAnimation Duration="0"To="#FF73A9D8"Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"Storyboard.TargetName="path" /></Storyboard></VisualState><VisualState x:Name="Disabled"><Storyboard><DoubleAnimation Duration="0"To=".5"Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)"Storyboard.TargetName="path" /></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><!--左箭頭整個區(qū)域矩形塊--><Rectangle Fill="#363636"Opacity="1"Stretch="Fill" /><Grid><!--左箭頭--><Path x:Name="path"Data="M288.75,232.25 L288.75,240.625 L283,236.625 z"Fill="#e0e0e0"HorizontalAlignment="Left"Height="15"Width="15"Margin="20,0,0,0"Stretch="Fill"VerticalAlignment="Center" /></Grid></Grid></ControlTemplate><!--日歷頭右箭頭按鈕樣式模版,這塊跟左箭頭樣式模版沒什么區(qū)別--><ControlTemplate x:Key="NextButtonTemplate"TargetType="{x:Type Button}"><Grid Cursor="Hand"><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates"><VisualState x:Name="Normal" /><VisualState x:Name="MouseOver"><Storyboard><ColorAnimation Duration="0"To="#FF73A9D8"Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"Storyboard.TargetName="path" /></Storyboard></VisualState><VisualState x:Name="Disabled"><Storyboard><DoubleAnimation Duration="0"To=".5"Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)"Storyboard.TargetName="path" /></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><Rectangle Fill="#363636"Opacity="1"Stretch="Fill" /><Grid><Path x:Name="path"Data="M282.875,231.875 L282.875,240.375 L288.625,236 z"Fill="#e0e0e0"HorizontalAlignment="Right"Height="15"Width="15"Margin="0,0,20,0"Stretch="Fill"VerticalAlignment="Center" /></Grid></Grid></ControlTemplate><!--日歷頭中間年按鈕樣式模版--><ControlTemplate x:Key="HeaderButtonTemplate"TargetType="{x:Type Button}"><Grid Cursor="Hand"><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates"><VisualState x:Name="Normal" /><VisualState x:Name="MouseOver"><Storyboard><ColorAnimation Duration="0"To="#FF73A9D8"Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"Storyboard.TargetName="buttonContent" /></Storyboard></VisualState><VisualState x:Name="Disabled"><Storyboard><DoubleAnimation Duration="0"To=".5"Storyboard.TargetProperty="Opacity"Storyboard.TargetName="buttonContent" /></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><ContentPresenter x:Name="buttonContent"ContentTemplate="{TemplateBinding ContentTemplate}"Content="{TemplateBinding Content}"TextElement.Foreground="#e0e0e0"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="1,4,1,9"VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /></Grid></ControlTemplate></Grid.Resources><Grid.RowDefinitions><!--日歷頭,左箭頭,年,右箭頭--><RowDefinition Height="Auto" /><!--日歷內(nèi)容,星期幾和具體的日期幾號幾號--><RowDefinition Height="*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><!--左箭頭--><ColumnDefinition Width="Auto" /><!--年--><ColumnDefinition Width="*" /><!--右箭頭--><ColumnDefinition Width="Auto" /></Grid.ColumnDefinitions><!--頭,左箭頭,年,右箭頭,整體的背景色--><Border Grid.Row="0"Grid.ColumnSpan="3"Background="#363636"></Border><!--左箭頭--><Button x:Name="PART_PreviousButton"Grid.Column="0"Focusable="False"HorizontalAlignment="Left"Grid.Row="0"Template="{StaticResource PreviousButtonTemplate}" /><!--年--><Button x:Name="PART_HeaderButton"Grid.Column="1"FontFamily="微軟雅黑"Focusable="False"FontSize="26"HorizontalAlignment="Center"Grid.Row="0"Template="{StaticResource HeaderButtonTemplate}"VerticalAlignment="Center" /><!--右箭頭--><Button x:Name="PART_NextButton"Grid.Column="2"Focusable="False"HorizontalAlignment="Right"Grid.Row="0"Template="{StaticResource NextButtonTemplate}" /><!--日期幾號幾號內(nèi)容顯示--><Border Grid.Row="1"Grid.ColumnSpan="3"Margin="0"BorderBrush="#cfcfcf"BorderThickness="3,0,3,3"><Grid x:Name="PART_MonthView"HorizontalAlignment="Center"Visibility="Visible"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="auto" /><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /></Grid.RowDefinitions></Grid></Border><!--月和年內(nèi)容顯示--><Grid x:Name="PART_YearView"Grid.ColumnSpan="3"HorizontalAlignment="Center"Margin="6,-3,7,6"Grid.Row="1"Visibility="Hidden"VerticalAlignment="Center"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /></Grid.RowDefinitions></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><!--觸發(fā)器屬性--><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 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 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="Margin"Value="1" /><Setter Property="MinWidth"Value="5" /><Setter Property="MinHeight"Value="5" /><Setter Property="FontSize"Value="22" /><Setter Property="FontFamily"Value="微軟雅黑" /><Setter Property="HorizontalContentAlignment"Value="Center" /><Setter Property="VerticalContentAlignment"Value="Center" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type CalendarDayButton}"><Grid><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" /><ColorAnimation Duration="0"To="white"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="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="#b4b3b3"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="#666666"Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"Storyboard.TargetName="NormalText" /><ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"Storyboard.TargetName="imgToday"><DiscreteObjectKeyFrame KeyTime="0"><DiscreteObjectKeyFrame.Value><Visibility>Visible</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></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><Border BorderBrush="#bbbbbb"BorderThickness="1"><Border BorderBrush="white"BorderThickness="2,2,0,0"Margin="1,1,0,0"></Border></Border><Rectangle x:Name="TodayBackground"Fill="#c6c6c6"Opacity="0"RadiusY="1"RadiusX="1" /><Rectangle x:Name="SelectedBackground"Fill="#6eafbf"Opacity="0"RadiusY="1"RadiusX="1" /><Border BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Background="{TemplateBinding Background}" /><Rectangle x:Name="HighlightBackground"Fill="#FFBADDE9"Opacity="0"RadiusY="1"RadiusX="1" /><ContentPresenter x:Name="NormalText"TextElement.Foreground="#666666"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"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="#FF45D6FA"Visibility="Collapsed" /><Image x:Name="imgToday"Width="44"Height="34"Source="/Images/Today.png"VerticalAlignment="Top"HorizontalAlignment="Left"Visibility="Hidden" /></Grid></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="CalendarButtonStyle1"TargetType="{x:Type CalendarButton}"><Setter Property="Background"Value="#FFBADDE9" /><Setter Property="MinWidth"Value="80" /><Setter Property="MinHeight"Value="80" /><Setter Property="Margin"Value="20" /><Setter Property="FontSize"Value="25" /><Setter Property="HorizontalContentAlignment"Value="Center" /><Setter Property="VerticalContentAlignment"Value="Center" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type CalendarButton}"><Grid><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}"Margin="1,0,1,1"VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /><Rectangle x:Name="CalendarButtonFocusVisual"IsHitTestVisible="false"RadiusY="1"RadiusX="1"Stroke="#FF45D6FA"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></Window.Resources><Grid x:Name="LayoutRoot"><Calendar Style="{DynamicResource CalendarStyle1}"CalendarItemStyle="{DynamicResource CalendarItemStyle1}"CalendarDayButtonStyle="{DynamicResource CalendarDayButtonStyle1}"CalendarButtonStyle="{DynamicResource CalendarButtonStyle1}"Width="500"Height="500"></Calendar></Grid></Window>

?

源文件

?

總結(jié)

以上是生活随笔為你收集整理的WPF Calendar 日历控件 样式自定义的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。