天天看點

WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式

原文: 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>代碼。

WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式
<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>
      
http://11011.net/software/vspaste

DisplayMode 屬性

     DisplayMode 用來調整月曆顯示模式,分為Month、Year 和Decade 三種(如下表),預設情況下為Month 模式。

<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month"/>
      
http://11011.net/software/vspaste
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式

設定這三種模式後其效果分别如下圖所示:

WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式

SelectionMode 屬性

     SelectionMode 屬性可以調整選擇日期的方式:None、SingleDate、SingleRange、MultipleRange,下面逐一看下對日期選擇到底有什麼影響。

1. None:看到這個詞肯定是不能選擇日期的意思了~

2. SingleDate:隻可以選擇唯一日期。如圖所示,隻能選擇像4.12 這樣的單一且唯一的日期。

<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month" 
          SelectionMode="SingleDate"/>
      
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式
http://11011.net/software/vspaste

3. SingleRange:選擇一組日期範圍。如圖所示,可以通過在月曆中拖動滑鼠選擇一組從4.19~4.25 的日期範圍,或通過Shift 鍵并用滑鼠選擇起始和結束兩個日期。

<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month" 
                  SelectionMode="SingleRange"/>
      
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式
http://11011.net/software/vspaste

4. MultipleRange:可以選擇多組連續的日期範圍。如圖所示,通過Ctrl 鍵和滑鼠拖動選擇多組日期範圍。

<Calendar Margin="0,50,0,0" Name="calendarCtl" DisplayMode="Month" 
                  SelectionMode="MultipleRange"/>
      
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式
http://11011.net/software/vspaste

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>
      
http://11011.net/software/vspaste

從下圖可以看到,BlackoutDates 中定義的日期在月曆中呈現打叉狀态:

WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式

DisplayDateStart 與 DisplayDateEnd 屬性

     這兩個屬性組合使用可以圈定一個日期範圍,範圍外的日期将不顯示在月曆中。假設我們隻顯示4.10~4.20:

<Calendar Margin="0,50,0,0"  Name="calendarCtl" DisplayMode="Month" 
          DisplayDateStart="2010/4/10"
          DisplayDateEnd="2010/4/20">
      
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式
http://11011.net/software/vspaste

IsTodayHighlighted 屬性

     調整是否高亮當天日期,預設為True。

<Calendar Margin="0,50,0,0"  Name="calendarCtl" DisplayMode="Month" 
          IsTodayHighlighted="False"/>
      
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式
http://11011.net/software/vspaste

FirstDayOfWeek 屬性

     預設情況下月曆每周的第一天為周日,可以通過FirstDayOfWeek 随意修改。例如改為周一:

<Calendar Margin="0,50,0,0"  Name="calendarCtl" DisplayMode="Month" 
          FirstDayOfWeek="Monday"/>
      
http://11011.net/software/vspaste
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式

FlowDirection 屬性

     調整月曆的日期顯示順序:LeftToRight、RightToLeft,預設為LeftToRight。将其颠倒一下:

<Calendar Margin="0,50,0,0"  Name="calendarCtl" DisplayMode="Month" 
          FlowDirection="RightToLeft"/>
      
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式

日期按鍵樣式

     我們可以通過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>
      
http://11011.net/software/vspaste
WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式

最後期待Visual Studio 2010 釋出盛會

WPF 4 月曆控件(Calendar)建立月曆控件DisplayMode 屬性SelectionMode 屬性BlackoutDates 屬性DisplayDateStart 與 DisplayDateEnd 屬性IsTodayHighlighted 屬性FirstDayOfWeek 屬性FlowDirection 屬性日期按鍵樣式