分享一個WPF下日曆控件（Calendar）的樣式
WPF日曆控件的一個樣式
WPF自帶的日曆控件樣式可能會比較醜，要修改其樣式看起來挺複雜的，實際上很簡單，用Blend打開，修改三個模板，基本就能改變所有面貌，也很容易app
先上圖
spa
樣式以下：code
<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，你們百度下，添加到項目中便可orm
相關文章
- 1. WPF——日曆控件(Calendar)
- 2. WPF Calendar 日曆控件 樣式自定義
- 3. 【C#】wpf自定義calendar日期選擇控件的樣式
- 4. Calendar 日曆控件使用
- 5. ASP.NET Calendar（日曆控件）
- 6. QML中日曆控件Calendar樣式自定義
- 7. JAVA中的Calendar---------------js日曆控件
- 8. WPF自定義控件與樣式(5)-Calendar/DatePicker日期控件自定義樣式及擴展
- 9. ExtJS 日曆Calendar 控件 使用
- 10. 開源：實現一個Google Calendar 樣式的日程管理控件XgCalendar
- 更多相關文章...
- • ASP.NET Calendar 控件 - ASP.NET 教程
- • Web 品質 - 樣式表 - 網站品質教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. WPF——日曆控件(Calendar)
- 2. WPF Calendar 日曆控件 樣式自定義
- 3. 【C#】wpf自定義calendar日期選擇控件的樣式
- 4. Calendar 日曆控件使用
- 5. ASP.NET Calendar（日曆控件）
- 6. QML中日曆控件Calendar樣式自定義
- 7. JAVA中的Calendar---------------js日曆控件
- 8. WPF自定義控件與樣式(5)-Calendar/DatePicker日期控件自定義樣式及擴展
- 9. ExtJS 日曆Calendar 控件 使用
- 10. 開源：實現一個Google Calendar 樣式的日程管理控件XgCalendar