今までご紹介したのは、データの更新とバリデーションの追加でしたが、データの新規追加はどのようにすればいいでしょうか？これを行うために、Silverlight 3 に新しく追加されたテンプレートである、ChildWindowを見てみましょう。

クライアントプロジェクト側にあるViewsフォルダを右クリックして、追加→新規アイテムの追加→Child WindowでAddNewWindow.xamlを追加します。 まずはこのデフォルトのウィンドウを表示しましょう。

最初に、メインフォームにボタンを追加して、今作成したChildwindowを、表示します。

＜Home.xaml＞

<Button Content="Add New"
        Width="105" Height="28"
        Margin="5,0,0,0" HorizontalAlignment="Left"
        Click="AddNew_Click" ></Button>

次に、新規作成ボタンのイベントハンドラを追加します。

＜Home.xaml＞

private void AddNew_Click(object sender, RoutedEventArgs e)
{
    var w = new AddNewWindow();
    w.Show();
}

090730-3

ここで重要なのは、すでにこのChildWindowのテンプレートには、OKとCancel ボタン、それにClose Boxが含まれており、それらはすでに動くようになっていることです。

次いで、AddNewWindow.xamlのGridの下に、DataFormを追加します。これは、今まで更新までのステップでご紹介したのと同じモデルを使いたいためです。当該DataForm により、今まで見てきた更新と同じ特徴を利用することができます。

＜AddNewWindow.xaml＞

<dataControls:DataForm x:Name="newEmployeeForm" Height="393" Width="331"
                       VerticalAlignment="Top"   
                       CommandButtonsVisibility="None"
                       Header="Add New Super Employee"
                        HorizontalAlignment="Left" >
    <dataControls:DataForm.EditTemplate>
        <DataTemplate>
            <StackPanel>
                <dataControls:DataField>
                    <TextBox Text="{Binding Name, Mode=TwoWay}" />
                </dataControls:DataField>
                <dataControls:DataField>
                    <TextBox Text="{Binding EmployeeID, Mode=TwoWay}" />
                </dataControls:DataField>
                <dataControls:DataField>
                    <TextBox Text="{Binding Origin, Mode=TwoWay}" />
                </dataControls:DataField>
                <dataControls:DataField>
                    <TextBox Text="{Binding Sites, Mode=TwoWay}" />
                </dataControls:DataField>
                <dataControls:DataField>
                    <TextBox Text="{Binding Gender, Mode=TwoWay}" />
                </dataControls:DataField>
                <dataControls:DataField>
                    <TextBox Text="{Binding Publishers, Mode=TwoWay}" />
                </dataControls:DataField>
                <dataControls:DataField>
                    <controls:DatePicker Text="{Binding LastEdit, Mode=OneWay}"> </controls:DatePicker>
                </dataControls:DataField>
                <dataControls:DataField>
                    <TextBox Text="{Binding Issues, Mode=TwoWay}" />
                </dataControls:DataField>
            </StackPanel>
        </DataTemplate>
    </dataControls:DataForm.EditTemplate>
</dataControls:DataForm>

090730-5

ここで、ChildWindowのコードビハインドに移動して、クラスレベルのフィールドに下記を追加する必要があります。 public partial class AddNewWindow : ChildWindowの直下になります。

＜AddNewWindow.xaml.cs＞

public SuperEmployee NewEmployee { get; set; }

次に、コンストラクタ内でインスタンスを初期化します。

            NewEmployee = new SuperEmployee();
            NewEmployee.LastEdit = DateTime.Now.Date;
            this.newEmployeeForm.CurrentItem = NewEmployee;

そして、OK ボタンのイベントハンドラを追加します。

private void OKButton_Click(object sender, RoutedEventArgs e)
{
    newEmployeeForm.CommitEdit();
    this.DialogResult = true;
}

次いで、Cancelボタンのイベントハンドラを追加します。


        private void CancelButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = false;
        }


これで完了です。次に、この更新をまずはローカルでコミットし、そのうえでサーバーに送信します。

void addNewWindow_Closed(object sender, EventArgs e)
{
    var win = sender as AddNewWindow;
    var context = dds.DomainContext as SuperEmployeeDomainContext;
    if (win.DialogResult == true)
    {
        context.SuperEmployees.Add(win.NewEmployee);
    }
}

これにより、当該Submit ボタンは、このローカルでコミットされた更新を、サーバーに送信します。

090730-4

以上で、新規追加までのステップのデモ解説は終了です。後は、皆様の方で、チュートリアルや、MSDNのドキュメント等、PPTファイルにリファレンスを入れたものを読んでいただければと思います。

ADO.NET Data Services、WCFとの連携、そしてクラウドデータベースとの連携等も含め、このサンプルの拡張に関しては、Tech・Ed Japan 2009 でご紹介できればと思っています。

参加される方は、ぜひお楽しみに！まだ参加するかどうかご検討中の方は、是非ご参加ください。

よろしくお願いします。