DatePicker settings for dates in the Silverlight DataGrid

Set the start date and end date. For example, if there are many items, each item has a field of start date and end date. How to Use the DatePicker control to meet these requirements is as follows:

1: Create an SL4 project file. Create Page DatePickerDemo. xaml; 2: Create an object class Product that contains the SellBegin and SellEnd fields. The Code is as follows:

public class Product{    public DateTime SellBegin { get; set; }    public DateTime SellEnd { get; set; }}

3: Because there are multiple products, use the DataGrid to display data and drag a DataGrid from the toolbox to the DatePickerDemo page. Delete unnecessary code. The final result is as follows:

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

The backend CS code is:

dataGrid1.ItemsSource=new List<Product>(){...};

Run the instance: The result is as follows: of course, if the date format is like this, you may be in trouble. The default date format is "2010/05/05 ". Why can I successfully bind data by writing the front-end xaml code just like this? <Sdk: DataGrid Name = "dataGrid1"> </sdk: DataGrid> the reason is that the AutoGenerateColumns attribute of dataGrid1 is true by default. To implement customization, set it to false here, and manually add Column. The Code is as follows:

<Sdk: DataGrid Name = "dataGrid1" AutoGenerateColumns = "False"> <sdk: DataGrid. columns> <sdk: Maid Header = "Start Date" Binding = "{Binding SellBegin}"/> <sdk: dataGridTextColumn Header = "End Date" Binding = "{Binding SellEnd}"/> </sdk: DataGrid. columns> </sdk: DataGrid>

Run the command. The result is as follows: But the editing interface is a text box, and you want a date selection box. Therefore, you need to use DataPicker when editing cells. Therefore, you need to modify <sdk: DataGridTextColumn Header = "Start Date" Binding = "{Binding SellBegin}"/> to use DataGridTemplateColumn. The Code is as follows:

<Sdk: Maid Header = "Start Date"> <sdk: maid. cellTemplate> <DataTemplate> <TextBlock Text = "{Binding SellBegin}"/> </DataTemplate> </sdk: DataGridTemplateColumn. cellTemplate> <sdk: maid. cellEditingTemplate> <DataTemplate> <my: DatePicker SelectedDate = "{Binding SellBegin}"/> </DataTemplate> </sdk: DataGridTemplateColumn. cellEditingTemplate> </sdk: DataGridTemplateColumn>

The running effect is as follows: it is found that, although the date is selected, the value of the start date does not change. Why ?....... Although the SelectedDate Binding is set, the Binding Mode is not set ). modify DatePicker in DataTemplete to <my: DatePicker SelectedDate = "{Binding SellBegin, Mode = TwoWay}"/> one-way Binding, changing the data source will change the value of the control. OneTime: bind only once. TwoWay: two-way binding, you change to me. The current value changes after running. Although the value has changed, we can see that the start date is significantly greater than the end date. View the attributes of DatePicker. The DisplayDateStart and DisplayDateEnd attributes are displayed. Therefore, we bind the DisplayDateEnd attribute of the start date to the SellEnd field. The result is as follows: <my: DatePicker SelectedDate = "{Binding SellBegin, Mode = TwoWay}" DisplayDateEnd = "{Binding SellEnd}"/> the running result is as follows, set the display format. The first thing to be clear is that the object in the format we set is the TextBlock object in CellTemplete, rather than the DatePicker object in the CellEditingTemplete object, because it is used to display the TextBlock object, while the edited DatePicker object. Check the Binding attributes and find that the StringFormat attribute represents the formatted string. The code is modified to <TextBlock Text = "{Binding SellBegin, StringFormat = yyyy-MM-dd}"/> run. The result is as follows: Modify the end date. The final code is as follows:

<Sdk: DataGrid Name = "dataGrid1" AutoGenerateColumns = "False"> <sdk: DataGrid. columns> <sdk: Maid Header = "Start Date"> <sdk: maid. cellTemplate> <DataTemplate> <TextBlock Text = "{Binding SellBegin, StringFormat = yyyy-MM-dd}"/> </DataTemplate> </sdk: DataGridTemplateColumn. cellTemplate> <sdk: maid. cellEditingTemplate> <DataTemplate> <my: DatePicker SelectedDate = "{Binding SellBegin, Mode = TwoWay}" DisplayDateEnd = "{Binding SellEnd}"/> </DataTemplate> </sdk: dataGridTemplateColumn. cellEditingTemplate> </sdk: Maid> <sdk: Maid Header = "End Date"> <sdk: maid. cellTemplate> <DataTemplate> <TextBlock Text = "{Binding SellEnd, StringFormat = yyyy-MM-dd}"/> </DataTemplate> </sdk: DataGridTemplateColumn. cellTemplate> <sdk: maid. cellEditingTemplate> <DataTemplate> <my: DatePicker SelectedDate = "{Binding SellEnd, Mode = TwoWay}" DisplayDateStart = "{Binding SellBegin}"/> </DataTemplate> </sdk: dataGridTemplateColumn. cellEditingTemplate> </sdk: DataGridTemplateColumn> </sdk: DataGrid. columns> </sdk: DataGrid>

The running result is as follows: