原文: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. php 上传文件大小控制配置文件中设置的

    Windows 环境下的修改方法 ================================================================第一步:修改在php5下POST文件大 ...

  2. android webview中的音乐的暂停与播放

    前段时间有这样一个需求,webview显示一个带音乐的网页,在播放音乐的时候进入第三方软件暂停播放,返回时继续播放.后来参考了两篇文章解决了这个问题. AudioManager audioManage ...

  3. ECharts.js 超简单入门(本质canvas)

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  4. html中如何实现表格移入移出时背景颜色改变?(两种方法)

    html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...

  5. MUI简介-最接近原生App体验的前端框架

    MUI简介-最接近原生App体验的前端框架 一.总结 一句话总结:最接近原生App体验的前端框架 二.多端发布 – 开发一套代码,发布六个平台 真正彻底的跨平台开发,不是简单的跨iOS和Android ...

  6. 百度UEditor上传图片-再总结一次

    晚上,在继续开发BriefCMS,把百度UEditor上传图片的问题,给解决了,终于解决了. 公司极简版CMS.BriefCMS.个人官网,最近2个月,与百度UEditor厮杀了好久.最值得吐槽的,就 ...

  7. 支付宝开发之手机网站支付(H5支付)

    其实官方的文档中:https://docs.open.alipay.com/203 介绍的已经很详细了,我就实地的看文档操作了一遍,具体步骤如下: 一.创建应用 流程如下: 首先要有支付宝开放平台: ...

  8. [Angular] Difference between ngAfterViewInit and ngAfterContentInit

    Content is what is passed as children. View is the template of the current component. The view is in ...

  9. NOIP模拟 MST - 类次小生成树

    题目大意: 给一张无向图,可以将图中权值为v的边修改为k-v,求修改后的最小生成树边权和. 题目分析: 最小生成树的环切定理:任何非树边一定比对应树链上的所有边权值要大.否则我们可以将链上最大的树边删 ...

  10. 【17.76%】【codeforces round 382C】Tennis Championship

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...