基于Silverlight DataGrid中无代码设置开始与结束日期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>(){...};

运行实例:结果如下:

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

运行结果如下:

(0)

相关推荐

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

    有时候会碰到一些需要设置开始日期和结束日期的需求,比如有很多商品,每件商品都有开始出售日期和结束出售日期的字段.如何使用DatePicker控件来满足这些需求呢,下文将做解答: 1:新建SL4项目文件.新建Page页面DatePickerDemo.xaml; 2:新建实体类Product,包含SellBegin,SellEnd 字段.代码如下: 复制代码 代码如下: public class Product{    public DateTime SellBegin { get; set; } 

  • 在Qt中正确的设置窗体的背景图片的几种方法总结

    Qt中正确的设置窗体的背景图片的方法大致有两种,下面将逐个讲解: 一. 利用styleSheet设置窗体的背景图片 使用stylesheet设置窗体的背景图片的时候,可以直接按照下图的操作去进行即可,如下图所示: 但是,需要注意的是: 1.在QWidget中这种方法是不行的,如果你足够细心的话,你会发现使用同样的设置背景图片的方法,背景图片其实并没有发生真实改变,但是它的子窗体背景图片是会发生改变的. 其实我们可以通过在添加一个i额QWidget来解决这个问题,即在QtDesigner中添加一个

  • ASP.NET中TextBox使用Ajax控件显示日期不全的问题解决方法

    正常的引用 复制代码 代码如下: <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AjaxToolKit" %><asp:TextBox ID="txtRecordTime" runat="server" cssclass="style" width

  • ASP.NET程序中常用代码汇总

    1. 打开新的窗口并传送参数: //传送参数: response.write("<script>window.open('*.aspx?id="+this.DropDownList1.SelectIndex+"&id1="++"')</script>") //接收参数: string a = Request.QueryString("id"); string b = Request.QueryS

  • 在react-router4中进行代码拆分的方法(基于webpack)

    前言 随着前端项目的不断扩大,一个原本简单的网页应用所引用的js文件可能变得越来越庞大.尤其在近期流行的单页面应用中,越来越依赖一些打包工具(例如webpack),通过这些打包工具将需要处理.相互依赖的模块直接打包成一个单独的bundle文件,在页面第一次载入时,就会将所有的js全部载入.但是,往往有许多的场景,我们并不需要在一次性将单页应用的全部依赖都载下来.例如:我们现在有一个带有权限的"订单后台管理"单页应用,普通管理员只能进入"订单管理"部分,而超级用户则可

  • tp5框架基于Ajax实现列表无刷新排序功能示例

    本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能.分享给大家供大家参考,具体如下: 在后台管理的时候我们有时需要对数据进行排序,以控制数据在模板显示的顺序,排序的原理就是修改数据库,然后更新视图.我们可以单独写一个方法来实现排序的功能,成功后刷新页面,也可以利用Ajax技术,实现数据的局部请求,也就是无刷新排序的功能. 现在想要达到的效果是在排序的input框中输入数值,点击排序实现无刷新排序的功能. 首先是表格(cate.html)这一块我们要单独摘出来,放入到一个单独页面当中,方便

  • 基于jquery实现ajax无刷新评论

    jquery实现ajax无刷新评论需要用的技术:(本次试验用的是"jquery-1.4.2.js"版本的jquery) $.post("一般处理程序路径",{以字典的形式传递参数},function(data,status){``````}); jquery中的基本选择器操作: 首先创建数据库"T_article": 主键设置自增: 然后创建一个强类型的DataSet. 接着创建一个"无刷新评论.aspx"页面: 页面代码如下

  • 基于jQuery实现的无刷新表格分页实例

    本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica

  • 基于StringBuilder类中的重要方法(介绍)

    下面的API注解包含了StringBuilder类中的重要方法 append(boolean b):将 boolean 参数的字符串表示形式追加到序列. append(char c):将 char 参数的字符串表示形式追加到此序列. append(char[] str):将 char 数组参数的字符串表示形式追加到此序列. append(char[] str,int offset,int len):将 char 数组参数的子数组的字符串表示形式追加到此序列. append(CharSequenc

  • IOS App 无代码入侵的方法hook详细介绍

    iOS App 无代码入侵的方法hook 继续Objective-C runtime的研究 最近公司项目在做用户行为分析 于是App端在某些页面切换,交互操作的时候需要给统计系统发送一条消息 在几十个Controller 的项目里,一个一个地加代码那完全是不可能的,维护起来也是吃力 但这里需要处理的是 Controller, 可以有以下方式实现上述需求 1. 利用Objective-C 中的对象继承 继承 在面向对象开发中是非常常用的,像我们现在做的项目工程中都会有一个BaseViewContr

随机推荐

其他