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>

运行结果如下:

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索对象
, datagrid
, 代码
, 属性
, binding
格式
datepicker格式化日期、datepicker 默认日期、datepicker初始化日期、datepicker限制日期、datepicker日期格式,以便于您获取更多的相关知识。

时间: 2025-01-01 11:52:58

Silverlight DataGrid中日期的 DatePicker 设置的相关文章

Android中日期与时间设置控件用法实例_Android

本文实例讲述了Android中日期与时间设置控件用法.分享给大家供大家参考.具体如下: 1.日期设置控件:DatePickerDialog 2.时间设置控件:TimePickerDialog 实例代码: 页面添加两个Button,单击分别显示日期设置控件和时间设置控件,还是有TextView控件,用于显示设置后的系统时间 main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

Android中日期与时间设置控件用法实例

本文实例讲述了Android中日期与时间设置控件用法.分享给大家供大家参考.具体如下: 1.日期设置控件:DatePickerDialog 2.时间设置控件:TimePickerDialog 实例代码: 页面添加两个Button,单击分别显示日期设置控件和时间设置控件,还是有TextView控件,用于显示设置后的系统时间 main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

在DataGrid中使用下拉列表框和设置焦点

datagrid|下拉|下拉列表 在DataGrid中简单使用下拉列表框 作者:Tushar Ameta 翻译:秋枫 在DataGrid中使用下拉列表问题.这篇文章讲了如何在 System.Windows.Forms.DataGrid中切入使用ComboBox控件.不过原文不全,无法调试,在这里为了说清楚点,对原文作了一些修改,整篇文章主要包括三方面的内容. 1. 在DataGrid中加入ComboBox列: 2. 把在DataGrid中的修改保存到对应的网格: 3. 设置DataGrid中网格

asp.net-Silverlight DataGrid中的排序问题,请大神们指点!!

问题描述 Silverlight DataGrid中的排序问题,请大神们指点!! 1.现在我点击列名(header),它自动排序, 我想在我点击另一个查询按钮后,查询结果中还保留我之前的排序状态. 2.我在网上查有人用这个VisualStateManager.GoToState(控件, "SortAscending", false); 这个"控件"位置要填写header的控件名,我是菜鸟弄了半天也不知道怎么填进去一个header. 3.在xmal中 给header添

datepicker-silverlight的DataGrid中添加DatePicker控件使用滚动条滚动数据有误

问题描述 silverlight的DataGrid中添加DatePicker控件使用滚动条滚动数据有误 silverlight的DataGrid中添加DatePicker控件,初始设定DatePicker中的时间,连续使用滚动条滚动,初始设定DatePicker的值会随机改变. <sdk:DataGrid Grid.Row="1" HorizontalAlignment="Stretch" Name="dataGrid1" Vertical

edittext-使用datepicker设置日期后为什么隐藏editetext的光标?

问题描述 使用datepicker设置日期后为什么隐藏editetext的光标? 在editetext中使用datepicker设置日期后,光标就不显示了.我想实现的是设置完日期,光标就会移动到下一个edittext. 设置日期的代码: EditText when; static final int DATE_DIALOG_ID = 0; private int mYear; private int mMonth; private int mDay; //in oncreate when = (

一起谈.NET技术,Silverlight 4中把DataGrid数据导出Excel—附源码下载

Silverlight中常常用到DataGrid来展示密集数据. 而常见应用系统中我们需要把这些数据导入导出到固定Office套件中例如常用的Excel表格. 那么在Silverlight 中如何加以实现? 在参考大量资料后 提供参考思路如下: A:纯客户端导出处理.利用Silverlight 与Javascript 进行交互实现导出Excel. B:服务器端导出.获得DataGrid数据源. 传递给WCF Service到服务器端. 然后把传回数据通过Asp.net中通用处理导出Excel方法

浏览器缓存-在 HTTP 标头中为静态资源设置过期日期或最长存在时间

问题描述 在 HTTP 标头中为静态资源设置过期日期或最长存在时间 用gogole的优化工具检测出 "在 HTTP 标头中为静态资源设置过期日期或最长存在时间,可指示浏览器从本地磁盘中加载以前下载的资源,而不是通过网络加载." 请问需要在IIS怎么配置,求详细步骤. 平台是 windows2008+iis7.5 解决方案 Image and Flash content Caching for One Month Header set Cache-Control "max-ag

Excel2010中日期与时间怎么设置

  Excel2010中日期与时间怎么设置           第1步,打开Excel2010工作簿窗口,选中需要设置日期和时间数字格式的单元格.右键单击被选中的单元格,在打开的快捷菜单中选择"设置单元格格式"命令,如图1所述. Excel2010 第2步,在打开的"设置单元格格式"对话框中切换到"数字"选项卡,并在"分类"列表中选中"日期"或"时间"选项.然后在日期或时间类型列表中选择