有時(shí)候會(huì)碰到一些需要設(shè)置開(kāi)始日期和結(jié)束日期的需求，比如有很多商品，每件商品都有開(kāi)始出售日期和結(jié)束出售日期的字段。如何使用DatePicker控件來(lái)滿(mǎn)足這些需求呢，下文將做解答：
1：新建SL4項(xiàng)目文件。新建Page頁(yè)面DatePickerDemo.xaml;
2：新建實(shí)體類(lèi)Product，包含SellBegin,SellEnd 字段。代碼如下：
public class Product
{
public DateTime SellBegin { get; set; }
public DateTime SellEnd { get; set; }
}
3：由于有多個(gè)Product，所以使用DataGrid顯示數(shù)據(jù)，從工具箱中拖一個(gè)DataGrid到DatePickerDemo頁(yè)面。刪除多余的代碼，最后的結(jié)果如下：
<navigation:Page x:Class="SLStudy.DatePickerDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640" d:DesignHeight="480"
Title="DatePickerDemo Page" Loaded="Page_Loaded"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot">
<sdk:DataGrid Name="dataGrid1">
</sdk:DataGrid>
</Grid>
</navigation:Page>
后臺(tái)CS代碼為：dataGrid1.ItemsSource=new List<Product>(){...};
運(yùn)行實(shí)例：結(jié)果如下：
當(dāng)然如果日期格式是這樣的，那用戶(hù)估計(jì)會(huì)找你麻煩了。默認(rèn)的日期格式應(yīng)該”2010/05/05”。
為什么前臺(tái)xaml代碼僅僅這樣寫(xiě)，就可以成功的綁定數(shù)據(jù)呢？
<sdk:DataGrid Name="dataGrid1"> </sdk:DataGrid>
原因在于dataGrid1的AutoGenerateColumns 屬性默認(rèn)是true，為了實(shí)現(xiàn)自定義，在這里將它設(shè)置為false，并手動(dòng)添加Column。代碼如下：
<sdk:DataGrid Name="dataGrid1" AutoGenerateColumns="False">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Header="起始日期" Binding="{Binding SellBegin}" />
<sdk:DataGridTextColumn Header="結(jié)束日期" Binding="{Binding SellEnd}" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
運(yùn)行，結(jié)果如下：
但是編輯界面是一個(gè)文本框，用戶(hù)希望的是一個(gè)日期選擇框，所以需要在單元格編輯的時(shí)候，使用DataPicker。
所以需要將<sdk:DataGridTextColumn Header="起始日期" Binding="{Binding SellBegin}" />
修改為使用DataGridTemplateColumn ，代碼如下：
<sdk:DataGridTemplateColumn Header="起始日期">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding SellBegin}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
<sdk:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<my:DatePicker SelectedDate="{Binding SellBegin}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>
運(yùn)行效果如下：
通過(guò)運(yùn)行發(fā)現(xiàn)，雖然選擇了日期，但是起始日期的值并沒(méi)有變化。為什么？
.......
原來(lái)雖然設(shè)置了SelectedDate的Binding，但是沒(méi)有設(shè)置Binding的模式(Mode).
于是將DataTemplete中的DatePicker修改為
<my:DatePicker SelectedDate="{Binding SellBegin,Mode=TwoWay}" />
Mode有三種：
OneWay：?jiǎn)蜗蚪壎ǎ瑪?shù)據(jù)源更改會(huì)導(dǎo)致控件的值變化。
OneTime：只綁定一次。
TwoWay：雙向綁定，你變我變。
運(yùn)行后發(fā)現(xiàn)值變化了。
雖然值變化了，但是可以看到起始日期明顯大于結(jié)束日期。
查看DatePicker的各個(gè)屬性，看到有
DisplayDateStart 和 DisplayDateEnd 屬性。
所以我們將起始日期的DisplayDateEnd屬性綁定到SellEnd 字段上。結(jié)果如下：
<my:DatePicker SelectedDate="{Binding SellBegin,Mode=TwoWay}"
DisplayDateEnd="{Binding SellEnd}"/>
運(yùn)行結(jié)果如下：
好了，剩下最后一步了，就是設(shè)置顯示的格式了。
第一個(gè)要明確的是，我們?cè)O(shè)置格式的對(duì)象是CellTemplete中的TextBlock對(duì)象，而不是CellEditingTemplete對(duì)象中的DatePicker對(duì)象，因?yàn)橛脕?lái)顯示的是TextBlock對(duì)象，而編輯的是DatePicker對(duì)象。
查看Binding 的屬性，發(fā)現(xiàn)有StringFormat屬性,代表了格式化字符串。于是修改代碼為：
<TextBlock Text="{Binding SellBegin, StringFormat=yyyy-MM-dd}" />
運(yùn)行，結(jié)果如下：
修改結(jié)束日期，最后代碼如下：
<sdk:DataGrid Name="dataGrid1" AutoGenerateColumns="False">
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Header="起始日期">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding SellBegin, StringFormat=yyyy-MM-dd}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
<sdk:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<my:DatePicker SelectedDate="{Binding SellBegin,Mode=TwoWay}"
DisplayDateEnd="{Binding SellEnd}"/>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn Header="結(jié)束日期">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding SellEnd, StringFormat=yyyy-MM-dd}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
<sdk:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<my:DatePicker SelectedDate="{Binding SellEnd,Mode=TwoWay}"
DisplayDateStart="{Binding SellBegin}"/>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
運(yùn)行結(jié)果如下：
