WPF 4 日历控件(Calendar)
在之前我已经写过两篇关于WPF 4 任务栏(Taskbar)相关的特性。相信自从VS2010 Beta 版放出后,WPF 的粉丝们肯定在第一时间了解了WPF 4 的一些新控件及新功能。赶在明天Visual Studio 2010 正式版发布前,我先来介绍一下WPF 4 中日历控件的一些功能及属性,就作为明天发布会的热身准备吧。
创建日历控件
在WPF ToolKit 中其实日历控件早已存在,对于WPF 4 中的日历控件创建起来也很简单:1. 可以直接从Toolbox 中将Calendar 拖到设计窗口;2. 或直接在XAML 中写入<Calendar>代码。

<Window x:Class="WpfControlTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Calendar Margin="0,50,0,0" Name="calendarCtl"/>
</Grid>
</Window>
DisplayMode 属性
DisplayMode 用来调整日历显示模式,分为Month、Year 和Decade 三种(如下表),默认情况下为Month 模式。
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"/>

设置这三种模式后其效果分别如下图所示:

SelectionMode 属性
SelectionMode 属性可以调整选择日期的方式:None、SingleDate、SingleRange、MultipleRange,下面逐一看下对日期选择到底有什么影响。
1. None:看到这个词肯定是不能选择日期的意思了~
2. SingleDate:只可以选择唯一日期。如图所示,只能选择像4.12 这样的单一且唯一的日期。
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"
SelectionMode="SingleDate"/>

3. SingleRange:选择一组日期范围。如图所示,可以通过在日历中拖动鼠标选择一组从4.19~4.25 的日期范围,或通过Shift 键并用鼠标选择起始和结束两个日期。
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"
SelectionMode="SingleRange"/>

4. MultipleRange:可以选择多组连续的日期范围。如图所示,通过Ctrl 键和鼠标拖动选择多组日期范围。
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"
SelectionMode="MultipleRange"/>

BlackoutDates 属性
BlackoutDates 属性用来定义一些不可以选择的日期项,通过下面XAML 代码我们定义了一些不能选择的日期:
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month">
<Calendar.BlackoutDates>
<CalendarDateRange Start="2010/4/1" End="2010/4/3"/>
<CalendarDateRange Start="2010/4/14" End="2010/4/18"/>
<CalendarDateRange Start="2010/4/27" End="2010/4/27"/>
</Calendar.BlackoutDates>
</Calendar>
从下图可以看到,BlackoutDates 中定义的日期在日历中呈现打叉状态:

DisplayDateStart 与 DisplayDateEnd 属性
这两个属性组合使用可以圈定一个日期范围,范围外的日期将不显示在日历中。假设我们只显示4.10~4.20:
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"
DisplayDateStart="2010/4/10"
DisplayDateEnd="2010/4/20">

IsTodayHighlighted 属性
调整是否高亮当天日期,默认为True。
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"
IsTodayHighlighted="False"/>

FirstDayOfWeek 属性
默认情况下日历每周的第一天为周日,可以通过FirstDayOfWeek 随意修改。例如改为周一:
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"
FirstDayOfWeek="Monday"/>

FlowDirection 属性
调整日历的日期显示顺序:LeftToRight、RightToLeft,默认为LeftToRight。将其颠倒一下:
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"
FlowDirection="RightToLeft"/>

日期按键样式
我们可以通过CalendarDayButtonStyle 为日期按键自定义样式:
<Window x:Class="WpfControlTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="CalendarDayButton" x:Key="CalendarDayBtnStyle">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Green" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"
CalendarDayButtonStyle="{StaticResource CalendarDayBtnStyle}"/>
</Grid>
</Window>

最后期待Visual Studio 2010 发布盛会

WPF 4 日历控件(Calendar)的更多相关文章
- 分享一个WPF下日历控件(Calendar)的样式
WPF日历控件的一个样式 WPF自带的日历控件样式可能会比较丑,要修改其样式看起来挺复杂的,实际上很简单,用Blend打开,修改三个模板,基本就能改变全部面貌,也很容易 先上图 样式如下: <S ...
- WPF Calendar 日历控件 样式自定义
原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不 ...
- asp.net Calendar 日历控件用法
asp.net Calendar 是微软自带的一款日历控件,除了简单显示日期时间外, 还可以绑定一些需要的事件. Calendar_DayRender 事件,是在加载都去时间日期时候的方法,用此方法可 ...
- asp.net 弹出式日历控件 选择日期 Calendar控件
原文地址:asp.net 弹出式日历控件 选择日期 Calendar控件 作者:逸苡 html代码: <%@ Page Language="C#" CodeFile=&quo ...
- 修改Calendar(梅花雨)日历控件 兼容IE9 谷歌 火狐
修改Calendar日历控件 兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢 一. [javascript] this.iframe = wind ...
- Ext.net Calendar 控件在有模板页的时候,模板页定义了TD的样式造成日历控件的样式丢掉
Ext.net Calendar 控件在有模板页的时候,模板页定义了TD的样式造成日历控件的样式丢掉 解决方案 在本页面添加下面的样式 <style type="text/css&qu ...
- 【原创】.Net WebForm Calendar 日历控件常用方法
微软官方地址 https://msdn.microsoft.com/en-us/library/add3s294.aspx 1.设置日历控件单个日期Table Cell样式 颜色/外观/边距 prot ...
- JQuery日历控件
日历控件最后一弹——JQuery实现,换汤不换药.原理一模一样,换了种实现工具.关于日历的终于写完了,接下来研究研究nodejs.嗯,近期就这点事了. 同样还是将input的id设置成calendar ...
- IOS自定义日历控件的简单实现(附思想及过程)
因为程序要求要插入一个日历控件,该空间的要求是从当天开始及以后的六个月内的日历,上网查资料基本上都说只要获取两个条件(当月第一天周几和本月一共有多少天)就可以实现一个简单的日历,剩下的靠自己的简单逻辑 ...
随机推荐
- Havel-Hakimi定理 hdu2454 / poj1695 Havel-Hakimi定理
Havel-Hakimi定理 当年一度热门出如今ACM赛场上的算法. 算法定义: Havel-Hakimi定理主要用来判定一个给定的序列是否是可图的. 2.首先介绍一下度序列:若把图 G 全部顶点的度 ...
- before/after伪类常见用法
1.清除浮动 ; } /*IE6/IE7*/ .clearfix:after{ display: block; content: "clear"; ; clear: both; o ...
- 谈谈JavaEE的mvc模式及典型的三层架构
首先,向读者介绍一下mvc架构,mvc是一种源于桌面程序的架构模式,它的基本思想是把程序界面和业务逻辑分开,这样便于软件的后期维护,同时也方便开发时期分工及管理,mvc有很多有点所以现在已经被广泛的应 ...
- 【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
原型图类似如下: 图片.png <!DOCTYPE > <html> <head> <meta charset="utf-8">&l ...
- js如何实现动态在表格中添加标题和去掉标题?
js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...
- Erlang 进制转换
http://www.cnblogs.com/me-sa/archive/2012/03/20/erlang0047.html bnot unary bitwise not integer div i ...
- EL表达式JSON应用
由于之前在学校写的jsp页面都是夹杂着java代码的,所以之前写了个jsp,满满的<%%>和java代码,老师说那样太不美观了啊!!!要全部用EL表达式替代了.本人还是太笨了,弄了一上午才 ...
- Erlang 杂记
学习Erlang的时候在书的留白处随手记录了一些东西,还有一些记录在了demo的注释里面,今天抽时间整理出来了一部分,分享一下. Erlang的设计哲学是为每一个独立的事件创建一个新进程. Erlan ...
- Cocos2d-x 脚本语言Lua基本语法
Cocos2d-x 脚本语言Lua基本语法 前面一篇博客对Lua这门小巧的语言进行了简单的介绍.本篇博客来给大家略微讲一下Lua的语法.不会长篇累牍得把Lua的全部语法都讲一遍,这里通过下面几点来讲L ...
- CSS布局--左侧自适应母元素高度
平常项目中经常会遇到有左侧导航菜单的高度不固定,需要与母元素或右侧元素等高的情况,以前就自以为是的使用js来设置,不仅不方便还会出现各种bug,后来就突然想到了一个好方法.有可能这方法已经被其他人用烂 ...