我要评论有时候会碰到一些需要设置开始日期和结束日期的需求，比如有很多商品，每件商品都有开始出售日期和结束出售日期的字段。如何使用datepicker控件来满足这些需求呢，下文将做解答：
1：新建sl4项目文件。新建page页面datepickerdemo.xaml;
2：新建实体类product，包含sellbegin,sellend 字段。代码如下：
public class product
{
public datetime sellbegin { get; set; }
public datetime sellend { get; set; }
}
3：由于有多个product，所以使用datagrid显示数据，从工具箱中拖一个datagrid到datepickerdemo页面。删除多余的代码，最后的结果如下：
<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>
后台cs代码为：
datagrid1.itemssource=new list<product>(){...};
运行实例：结果如下：
当然如果日期格式是这样的，那用户估计会找你麻烦了。默认的日期格式应该”2010/05/05”。
为什么前台xaml代码仅仅这样写，就可以成功的绑定数据呢？
<sdk:datagrid name="datagrid1"> </sdk:datagrid>
原因在于datagrid1的autogeneratecolumns 属性默认是true，为了实现自定义，在这里将它设置为false，并手动添加column。代码如下：
<sdk:datagrid name="datagrid1" autogeneratecolumns="false">
<sdk:datagrid.columns>
<sdk:datagridtextcolumn header="起始日期" binding="{binding sellbegin}" />
<sdk:datagridtextcolumn header="结束日期" binding="{binding sellend}" />
</sdk:datagrid.columns>
</sdk:datagrid>
运行，结果如下：
但是编辑界面是一个文本框，用户希望的是一个日期选择框，所以需要在单元格编辑的时候，使用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>
运行效果如下：
通过运行发现，虽然选择了日期，但是起始日期的值并没有变化。为什么？
.......
原来虽然设置了selecteddate的binding，但是没有设置binding的模式(mode).
于是将datatemplete中的datepicker修改为
<my:datepicker selecteddate="{binding sellbegin,mode=twoway}" />
mode有三种：
oneway：单向绑定，数据源更改会导致控件的值变化。
onetime：只绑定一次。
twoway：双向绑定，你变我变。
运行后发现值变化了。
虽然值变化了，但是可以看到起始日期明显大于结束日期。
查看datepicker的各个属性，看到有
displaydatestart 和 displaydateend 属性。
所以我们将起始日期的displaydateend属性绑定到sellend 字段上。结果如下：
<my:datepicker selecteddate="{binding sellbegin,mode=twoway}"
displaydateend="{binding sellend}"/>
运行结果如下：
好了，剩下最后一步了，就是设置显示的格式了。
第一个要明确的是，我们设置格式的对象是celltemplete中的textblock对象，而不是celleditingtemplete对象中的datepicker对象，因为用来显示的是textblock对象，而编辑的是datepicker对象。
查看binding 的属性，发现有stringformat属性,代表了格式化字符串。于是修改代码为：
<textblock text="{binding sellbegin, stringformat=yyyy-mm-dd}" />
运行，结果如下：
修改结束日期，最后代码如下：
<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="结束日期">
<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>
运行结果如下：
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论