原文: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 用来调整日历显示模式,分为MonthYearDecade 三种(如下表),默认情况下为Month 模式。

<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"/>

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

SelectionMode 属性

     SelectionMode 属性可以调整选择日期的方式:NoneSingleDateSingleRangeMultipleRange,下面逐一看下对日期选择到底有什么影响。

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)的更多相关文章

  1. 分享一个WPF下日历控件(Calendar)的样式

    WPF日历控件的一个样式 WPF自带的日历控件样式可能会比较丑,要修改其样式看起来挺复杂的,实际上很简单,用Blend打开,修改三个模板,基本就能改变全部面貌,也很容易 先上图 样式如下: <S ...

  2. WPF Calendar 日历控件 样式自定义

    原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不 ...

  3. asp.net Calendar 日历控件用法

    asp.net Calendar 是微软自带的一款日历控件,除了简单显示日期时间外, 还可以绑定一些需要的事件. Calendar_DayRender 事件,是在加载都去时间日期时候的方法,用此方法可 ...

  4. asp.net 弹出式日历控件 选择日期 Calendar控件

    原文地址:asp.net 弹出式日历控件 选择日期 Calendar控件 作者:逸苡 html代码: <%@ Page Language="C#" CodeFile=&quo ...

  5. 修改Calendar(梅花雨)日历控件 兼容IE9 谷歌 火狐

    修改Calendar日历控件 兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢   一. [javascript]   this.iframe     = wind ...

  6. Ext.net Calendar 控件在有模板页的时候,模板页定义了TD的样式造成日历控件的样式丢掉

    Ext.net Calendar 控件在有模板页的时候,模板页定义了TD的样式造成日历控件的样式丢掉 解决方案 在本页面添加下面的样式 <style type="text/css&qu ...

  7. 【原创】.Net WebForm Calendar 日历控件常用方法

    微软官方地址 https://msdn.microsoft.com/en-us/library/add3s294.aspx 1.设置日历控件单个日期Table Cell样式 颜色/外观/边距 prot ...

  8. JQuery日历控件

    日历控件最后一弹——JQuery实现,换汤不换药.原理一模一样,换了种实现工具.关于日历的终于写完了,接下来研究研究nodejs.嗯,近期就这点事了. 同样还是将input的id设置成calendar ...

  9. IOS自定义日历控件的简单实现(附思想及过程)

    因为程序要求要插入一个日历控件,该空间的要求是从当天开始及以后的六个月内的日历,上网查资料基本上都说只要获取两个条件(当月第一天周几和本月一共有多少天)就可以实现一个简单的日历,剩下的靠自己的简单逻辑 ...

随机推荐

  1. iOS --- UIColor中使用16进制选取颜色

    iOS中的UIColor能够使用16进制来选取颜色. 预先定义例如以下: #define UIColorFromHex(s) [UIColor colorWithRed:(((s & 0xFF ...

  2. php实现求数组中出现次数超过一半的数字(isset($arr[$val]))(取不同数看剩)(排序取中)

    php实现求数组中出现次数超过一半的数字(isset($arr[$val]))(取不同数看剩)(排序取中) 一.总结 1.if(isset($arr[$val])) $arr[$val]++; //1 ...

  3. Android TextView,EditText要求固定行数自动调整TextSize

    最近项目有个需求要求文本最多显示3行,继续输入则字体变小,删除已经输入的文字,那么字体变大,不管变大变小都不能超过3行.网上怎么找也找不到相关的解决方案,自己动手,丰衣足食了! 说一下算法思路,后面给 ...

  4. [React] Render Basic SVG Components in React

    React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG ...

  5. LUOGU 1525 关押罪犯 - 并查集拆点(对立点) / 二分+二分图染色

    传送门 分析: 并查集: 第一步先将所有矛盾从大至小排序,显然先将矛盾值大的分成两部分会更优. 普通的并查集都只能快速合并两个元素至同一集合,却不能将两个元素分至不同集合. 对于将很多数分成两个集合, ...

  6. ITFriend创业败局(四):菜鸟CEO的自我修养

    自创业自封CEO以来,短短3个月,又经历了无数的磨练,快速成长中. 创业不同于打工,他要求你必须有全局观和综合能力,技术.市场.商务,啥都得会,还要处理各种各样的问题和矛盾. 根据个人经历,我总结了以 ...

  7. 【t034】Matrix67的派对

    Time Limit: 1 second Memory Limit: 1 MB [问题描述] Matrix67发现身高接近的人似乎更合得来.Matrix67举办的派对共有N(1<=N<=1 ...

  8. 任务调度平台Cuckoo-Schedule

    任务调度平台Cuckoo-Schedule 1         概述 1.1      平台概述 Cuckoo-Schedule是基于Quartz-Schedule的轻量级任务调度框架,具有易学习.易 ...

  9. 静态资源命名的注意点以及document.write与innerHTML的区别

    今天拿出了去年刚开始学前端的那本书来看,发现好多新东西. 使用下划线和混合大小写不利于SEO! document.write与innerHTML的区别 这个问题大概是初学前端的人才会问的吧,业务代码中 ...

  10. 微信公众平台开发(1) 通用的工具类CommonUtil

    1.通用的调用微信的方法 /** * * @param requestUrl 接口地址 * @param requestMethod 请求方法:POST.GET... * @param output ...