[Windows 8 App]Telerik UI Controls-----日期選取控制項

2013-12-16

Telerik UI Controls是一套位Windows 應用商店應用而設計的工具

我們需要下載安裝【Telerik UI Controls】

下載和安裝可以參考：

[Windows 8 App]安裝擴充功能和更新-----Telerik UI Controls(上)

[Windows 8 App]安裝和設定Telerik UI Controls(下)

上面這二篇文章

安裝完畢後，可以新增專案，打開工具箱

在工具箱中會出現【Telerik RadControls for Windows 8.1 2013 Q3 SP1】底下有很多的控制項

其中包括{圖表、日期選擇器、儀表盤等等}

這裡我們介紹【日期選取控制項】

首先，我們開啟Visual Studio 2013，新增一個空白的市集應用程式專案

命名為【DatePickerDemo】，然後開啟【MainPage.xaml】

從【工具箱】裡拖拉一個【RadDatePicker】控制項到Grid設計畫面中

這時候可以看到【MainPage.xaml】的程式碼中，多了下面這行程式碼


xmlns:Input="using:Telerik.UI.Xaml.Controls.Input"

接下來在RadDatePicker元素中，定義標期、顯示格式、顯示日期


<Input:RadDatePicker Header="選擇會議日期" Margin="460,190,0,0" DisplayValueFormat="yyyy, MMMM dd, dddd" Value="{Binding MeetingDate}" HorizontalAlignment="Left" VerticalAlignment="Top"/>

這是完整的【MainPage.xaml】的程式碼：


<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DatePicker"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Input="using:Telerik.UI.Xaml.Controls.Input"
    x:Class="DatePicker.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Input:RadDatePicker Header="選擇會議日期" Margin="460,190,0,0" DisplayValueFormat="yyyy, MMMM dd, dddd" Value="{Binding MeetingDate}" HorizontalAlignment="Left" VerticalAlignment="Top"/>

    </Grid>
</Page>

上面RadDatePicker的屬性介紹：

Header 用來定義日期選取控制項的標題

DisplayValueFormat 用來定義日期顯示的格式

Value 設置選取日期的顯示值

接下來，開啟【MainPage.xaml.cs】，定義一個BookDate的類別

並且添加DateTime來為日期選取控制項提供數據

程式碼如下：


public class BookDate
{
   public DateTime MeetingDate { get; set; }
}

然後，在MainPage.xaml方法中定義日期選取控制項的顯示日期

最後再將值傳回給前台的DateContext屬性


public MainPage()
{
  this.InitializeComponent();
  var bookDate = new BookDate();
  bookDate.MeetingDate = new DateTime(2013, 12, 16);
  this.DataContext = bookDate;
}

完整的【MainPage.xaml.cs】程式碼


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白頁項目範本已記錄在 http://go.microsoft.com/fwlink/?LinkId=234238

namespace DatePicker
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            var bookDate = new BookDate();
            bookDate.MeetingDate = new DateTime(2013, 12, 16);
            this.DataContext = bookDate;
        }
        public class BookDate
        {
            public DateTime MeetingDate { get; set; }
        }
    }
}

專案執行畫面結果：

這是沒有動作時的DatePicker

這是選取DatePicker"年"動作

這是選取DatePicker"月"動作

這是選取DatePicker"日"動作

回首頁