基于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>
运行结果如下：
相关文章
使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果。具体实现思路请参考下本教程2016-04-04
本文主要介绍了C#图片处理如何生成缩略图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了C#如何打开选择文件对话框和选择目录对话框问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了C#使用iTextSharp从PDF文档获取内容的方法,涉及C#基于iTextSharp操作pdf文件的相关技巧,需要的朋友可以参考下2015-06-06
这篇文章主要为大家介绍了Unity UGUI Button按钮组件使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本文将介绍如何使用C#语言生成本地配置文件,以便为应用程序提供灵活的配置选项,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
下面小编就为大家分享一篇Path类 操作文件类的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
算数操作符+,-,*,/,%，的用法和大多程序设计语言是相同的，%号的作用是整数除法中产生余数，而整数法会直接去掉小数部分，而不是四舍五入。2011-02-02
自动筛选器是 Excel 中的一个基本但极其有用的功能,它可以让你根据特定的条件来自动隐藏和显示你的数据,当有大量的数据需要处理时,这个功能可以帮你快速找到你需要的信息,下面将介绍如何使用免费.NET Excel库在Excel中添加、应用和删除自动筛选器,需要的朋友可以参考下2024-05-05
这篇文章介绍了C#交换两个变量值的几种方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
最新评论