How to set the start and end date DatePicker based on no code in the Silverlight DataGrid

Sometimes you may need to set the start date and end date. For example, there are many items, each of which 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 DatePickerDemo. xaml on the Page;

2: Create an object class Product that contains the SellBegin and SellEnd fields. The Code is as follows:

Copy codeThe 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:Copy codeThe Code 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 set to true by default. to customize the attribute, set it to false and add the Column manually.The Code is as follows:

Copy codeThe Code is as follows: <sdk: DataGrid Name = "dataGrid1" AutoGenerateColumns = "False">
<Sdk: DataGrid. Columns>
<Sdk: Maid Header = "Start Date" Binding = "{Binding SellBegin}"/>
<Sdk: Maid Header = "End Date" Binding = "{Binding SellEnd}"/>
</Sdk: DataGrid. Columns>
</Sdk: DataGrid>

The result is as follows:

However, 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 must set <sdk: DataGridTextColumn Header = "Start Date" Binding = "{Binding SellBegin}"/>

Modify to use DataGridTemplateColumn. The Code is as follows:

Copy codeThe Code is as follows: <sdk: Maid Header = "Start Date">

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

The running effect is as follows:

It is found through running 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 the DatePicker in DataTemplete

<My: DatePicker SelectedDate = "{Binding SellBegin, Mode = TwoWay}"/>

There are three modes:

OneWay: 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.

DisplayDateStart and DisplayDateEnd attributes.

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:

Now, the last step is to 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 changed:

<TextBlock Text = "{Binding SellBegin, StringFormat = yyyy-MM-dd}"/>

The result is as follows:

Modify the end date. The final code is as follows:

Copy codeThe Code is as follows: <sdk: DataGrid Name = "dataGrid1" AutoGenerateColumns = "False">
<Sdk: DataGrid. Columns>

<Sdk: Maid Header = "Start Date">
<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: Maid Header = "End Date">
<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>

The running result is as follows: