欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法

程序员文章站 2023-12-17 13:26:40
有时候会碰到一些需要设置开始日期和结束日期的需求,比如有很多商品,每件商品都有开始出售日期和结束出售日期的字段。如何使用datepicker控件来满足这些需求呢,下文将做解...

有时候会碰到一些需要设置开始日期和结束日期的需求,比如有很多商品,每件商品都有开始出售日期和结束出售日期的字段。如何使用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>(){...};

运行实例:结果如下:

基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法

当然如果日期格式是这样的,那用户估计会找你麻烦了。默认的日期格式应该”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>

运行,结果如下:

基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法

但是编辑界面是一个文本框,用户希望的是一个日期选择框,所以需要在单元格编辑的时候,使用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>

运行效果如下:

基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法

通过运行发现,虽然选择了日期,但是起始日期的值并没有变化。为什么?

.......

原来虽然设置了selecteddate的binding,但是没有设置binding的模式(mode).

于是将datatemplete中的datepicker修改为

<my:datepicker selecteddate="{binding sellbegin,mode=twoway}" />

mode有三种:

oneway:单向绑定,数据源更改会导致控件的值变化。

onetime:只绑定一次。

twoway:双向绑定,你变我变。

运行后发现值变化了。

基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法

虽然值变化了,但是可以看到起始日期明显大于结束日期。

查看datepicker的各个属性,看到有

displaydatestart 和 displaydateend 属性。

所以我们将起始日期的displaydateend属性绑定到sellend 字段上。结果如下:

<my:datepicker selecteddate="{binding sellbegin,mode=twoway}"

displaydateend="{binding sellend}"/>

运行结果如下:

基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法

好了,剩下最后一步了,就是设置显示的格式了。

第一个要明确的是,我们设置格式的对象是celltemplete中的textblock对象,而不是celleditingtemplete对象中的datepicker对象,因为用来显示的是textblock对象,而编辑的是datepicker对象。

查看binding 的属性,发现有stringformat属性,代表了格式化字符串。于是修改代码为:

<textblock text="{binding sellbegin, stringformat=yyyy-mm-dd}" />

运行,结果如下:

基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法

修改结束日期,最后代码如下:

复制代码 代码如下:

<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>

运行结果如下:

基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法

上一篇:

下一篇: