有時候會碰到一些需要設(shè)置開始日期和結(jié)束日期的需求，比如有很多商品，每件商品都有開始出售日期和結(jié)束出售日期的字段。如何使用DatePicker控件來滿足這些需求呢，下文將做解答：

1：新建SL4項目文件。新建Page頁面DatePickerDemo.xaml;

2：新建實體類Product，包含SellBegin,SellEnd 字段。代碼如下：

dataGrid1.ItemsSource=new List<Product>(){...};

運(yùn)行實例：結(jié)果如下：

當(dāng)然如果日期格式是這樣的，那用戶估計會找你麻煩了。默認(rèn)的日期格式應(yīng)該”2010/05/05”。

為什么前臺xaml代碼僅僅這樣寫，就可以成功的綁定數(shù)據(jù)呢？

<sdk:DataGrid Name="dataGrid1"> </sdk:DataGrid>

原因在于dataGrid1的AutoGenerateColumns 屬性默認(rèn)是true，為了實現(xiàn)自定義，在這里將它設(shè)置為false，并手動添加Column。代碼如下：

運(yùn)行，結(jié)果如下：

但是編輯界面是一個文本框，用戶希望的是一個日期選擇框，所以需要在單元格編輯的時候，使用DataPicker。

所以需要將<sdk:DataGridTextColumn Header="起始日期" Binding="{Binding SellBegin}" />

修改為使用DataGridTemplateColumn ，代碼如下：

運(yùn)行效果如下：

通過運(yùn)行發(fā)現(xiàn)，雖然選擇了日期，但是起始日期的值并沒有變化。為什么？

.......

原來雖然設(shè)置了SelectedDate的Binding，但是沒有設(shè)置Binding的模式(Mode).

于是將DataTemplete中的DatePicker修改為

<my:DatePicker SelectedDate="{Binding SellBegin,Mode=TwoWay}" />

Mode有三種：

OneWay：單向綁定，數(shù)據(jù)源更改會導(dǎo)致控件的值變化。

OneTime：只綁定一次。

TwoWay：雙向綁定，你變我變。

運(yùn)行后發(fā)現(xiàn)值變化了。

雖然值變化了，但是可以看到起始日期明顯大于結(jié)束日期。

查看DatePicker的各個屬性，看到有

DisplayDateStart 和 DisplayDateEnd 屬性。

所以我們將起始日期的DisplayDateEnd屬性綁定到SellEnd 字段上。結(jié)果如下：

<my:DatePicker SelectedDate="{Binding SellBegin,Mode=TwoWay}"

DisplayDateEnd="{Binding SellEnd}"/>

運(yùn)行結(jié)果如下：

好了，剩下最后一步了，就是設(shè)置顯示的格式了。

第一個要明確的是，我們設(shè)置格式的對象是CellTemplete中的TextBlock對象，而不是CellEditingTemplete對象中的DatePicker對象，因為用來顯示的是TextBlock對象，而編輯的是DatePicker對象。

查看Binding 的屬性，發(fā)現(xiàn)有StringFormat屬性,代表了格式化字符串。于是修改代碼為：

<TextBlock Text="{Binding SellBegin, StringFormat=yyyy-MM-dd}" />

運(yùn)行，結(jié)果如下：

修改結(jié)束日期，最后代碼如下：

運(yùn)行結(jié)果如下：

最新評論