Silverlight DataGridによるコードレス設定開始と終了日DatePickerの実現方法

8102 ワード
開始 終了 DatePicker
時々、いくつかの開始日と終了日を設定する必要があります。例えば、多くの商品があります。各商品は発売開始日と販売終了日のフィールドがあります。どのようにDatePickerコントロールを使ってこれらの需要を満たしますか？
1：SL 4プロジェクトファイルを新規作成します。新規PageページDatePickerDemo.xaml;
2：エンティティクラスProductを新規作成し、SellBegin、SellEndフィールドを含みます。コードは以下の通りです。

public class Product
{
    public DateTime SellBegin { get; set; }
    public DateTime SellEnd { get; set; }
}
3：複数のプロジェクトがあるので、データを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コードは以下の通りです。
dataGrid 1.Items Source=new List＜Product＞（）{…}
実行例：結果は以下の通りです。
clip_image002
もちろん日付の書式がこのようなものなら、ユーザーはあなたに迷惑をかけるだろう。デフォルトの日付書式は「2010/05/05」です。
どうしてフロントのxamlコードはこのように書くだけで、データをうまく結びつけることができますか？
＜sdk：DataGrid Name=「dataGrid 1」>
dataGrid 1のAutoGenerate Columns属性はデフォルトで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>
運転した結果、次のようになりました。
clip_image004
ただし、編集画面はテキストボックスであり、ユーザーが希望するのは日付選択ボックスであるため、セル編集時にはData Pickerを使用する必要があります。
だから
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>
運転効果は以下の通りです。
clip_image006
日付が選択されていますが、開始日の値は変わりません。なぜですか？
……
元々はSelectedDateのBindingが設定されていましたが、Bindingのモードは設定されていませんでした。
Data TempleteのDatePickerを
＜my：DatePicker SelectedDate=「{Binding SellBegin、Mode=TwoWay]」/>
Modeには三つの種類があります
ワンウェイ：一方向バインディング、データソースの変更はコントロールの値の変化をもたらします。
OneTime：一回だけ結合します。
TwoWay：双方向結合、あなたは私を変えます。
運転後、値が変化していることが分かりました。
clip_image008
値が変化しましたが、開始日が終了日より明らかに大きいことが分かります。
DatePickerの各属性を調べます。
DisplayDateStartとDisplayDateEndのプロパティです。
ですから、私たちは開始日のDisplayDateEnd属性をSellEndフィールドに結びつけます。結果は以下の通りです
＜my：DatePicker SelectedDate=「{Binding SellBegin、Mode=TwoWay}」
DisplayDateEnd=「{Binding SellEnd}」/>
運転結果は以下の通りです。
image
はい、最後のステップが残っています。表示のフォーマットを設定します。
最初に明確にしたいのは、私たちがフォーマットを設定する対象はCelTempleteのTextBlockオブジェクトであり、CelEditingTempleteのオブジェクトの中のDatePickerオブジェクトではなく、TextBlockオブジェクトを表示するために使用されます。編集されたのはDatePickerオブジェクトです。
Bindingの属性を見ると、StringFormat属性があり、書式設定文字列を表しています。コードを修正します。
＜Text Block Text=「{Binding SellBegin、StringFormat=yyy-M-dd}」/>
運転した結果、次のようになりました。
image
修正終了日、最後のコードは以下の通りです。

<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>
運転結果は以下の通りです。
image