チュートリアル: オブジェクトへの Silverlight コントロールのバインド

[アーティクル]
02/21/2013

このチュートリアルでは、データバインドコントロールを含む Silverlight アプリケーションを作成します。コントロールは、2 つの関連するユーザー定義ビジネスオブジェクトにバインドします。

このチュートリアルでは、次の作業について説明します。

Silverlight アプリケーションを作成する。
ユーザーインターフェイスにバインドする 2 つの関連するカスタムオブジェクトを作成する。
データソース構成ウィザードを実行して [データソース] ウィンドウに読み込まれるカスタムオブジェクトに接続する。
[データソース] ウィンドウから Silverlight Designer に項目をドラッグして一連のデータバインドコントロールを作成する。

[!メモ]

お使いのマシンで、Visual Studio ユーザーインターフェイスの一部の要素の名前や場所が、次の手順とは異なる場合があります。これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。詳細については、「Visual Studio の設定」を参照してください。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

Visual Studio

次の概念に関する予備知識があると役に立ちますが、チュートリアルを完了するうえで必須ではありません。

Silverlight Designer の操作。詳細については、「Silverlight」を参照してください。
Silverlight のデータバインディング。詳細については、「データバインディング」を参照してください。
XAML の使用。詳細については、「XAML (XAML)」を参照してください。

Silverlight アプリケーションの作成

このチュートリアルでは、最初に Silverlight アプリケーションを作成します。

Silverlight プロジェクトを作成するには

[ファイル] メニューで、新しいプロジェクトを作成します。
[Visual C#] ノードまたは [Visual Basic] ノードで、[Silverlight] をクリックし、[Silverlight アプリケーション] をクリックします。
[名前] ボックスに「SilverlightObjectBinding」と入力し、[OK] をクリックします。
[新しい Silverlight アプリケーション] ダイアログボックスで既定の設定を使用し、[OK] をクリックします。

Silverlight アプリケーションが 2 つのプロジェクトを含むソリューションとして作成されます。プロジェクトの 1 つは、SilverlightObjectBinding プロジェクトです。もう 1 つは、SilverlightObjectBinding プロジェクトをホストするために使用される SilverlightObjectBinding Web プロジェクトです。

バインド先のカスタムオブジェクトの作成

アプリケーションにデータを公開するには、データモデルを定義する必要があります。このチュートリアルでは、顧客と注文を表すカスタムオブジェクトをデータモデルとして作成します。

Customer オブジェクトを作成するには

ソリューションエクスプローラーで [SilverlightObjectBinding] プロジェクトを右クリックし、[追加] をポイントし、[新しい項目] をクリックします。
[新しい項目の追加] ダイアログボックスで、[クラス] 項目をクリックします。
名前を「Customer」に変更し、[追加] をクリックします。

Customer コードファイルで、Customer クラスを次のコードで置き換えます。

''' <summary>
''' A single customer
''' </summary>
Public Class Customer

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new customer
    ''' </summary>
    ''' <param name="customerId">The ID that uniquely identifies this customer</param>
    ''' <param name="companyName">The name for this customer</param>
    ''' <param name="city">The city for this customer</param>
    Public Sub New(ByVal customerId As String,
                   ByVal companyName As String,
                   ByVal city As String)
        customerIDValue = customerId
        companyNameValue = companyName
        cityValue = city
    End Sub

    Private customerIDValue As String
    ''' <summary>
    ''' The ID that uniquely identifies this customer
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal value As String)
            customerIDValue = value
        End Set
    End Property

    Private companyNameValue As String
    ''' <summary>
    ''' The name for this customer
    ''' </summary>
    Public Property CompanyName() As String
        Get
            Return companyNameValue
        End Get
        Set(ByVal Value As String)
            companyNameValue = Value
        End Set
    End Property

    Private cityValue As String
    ''' <summary>
    ''' The city for this customer
    ''' </summary>
    Public Property City() As String
        Get
            Return cityValue
        End Get
        Set(ByVal Value As String)
            cityValue = Value
        End Set
    End Property

    Private ordersValue As Orders
    ''' <summary>
    ''' The orders for this customer
    ''' </summary>
    Public Property Orders As Orders
        Get
            Return ordersValue
        End Get
        Set(ByVal value As Orders)
            ordersValue = value
        End Set
    End Property


    Public Overrides Function ToString() As String
        Return Me.CompanyName & " (" & Me.CustomerID & ")"
    End Function
End Class


''' <summary>
''' A collection of Customer objects.
''' </summary>
''' <remarks></remarks>
Public Class Customers
    Inherits System.Collections.Generic.List(Of Customer)

End Class

/// <summary>
/// A single customer
/// </summary>
public class Customer
{
    /// <summary>
    /// Creates a new customer
    /// </summary>
    public Customer()
    {
    }

    /// <summary>
    /// Creates a new customer
    /// </summary>
    /// <param name="customerID"></param>
    /// <param name="companyName"></param>
    /// <param name="city"></param>
    public Customer(string customerID, string companyName,
       string city)
    {
        customerIDValue = customerID;
        companyNameValue = companyName;
        cityValue = city;
    }

    private string customerIDValue;
    /// <summary>
    /// The ID that uniquely identifies this customer
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }

    private string companyNameValue;
    /// <summary>
    /// The name for this customer
    /// </summary>
    public string CompanyName
    {
        get { return companyNameValue; }
        set { companyNameValue = value; }
    }

    private string cityValue;
    /// <summary>
    /// The city for this customer
    /// </summary>
    public string City
    {
        get { return cityValue; }
        set { cityValue = value; }
    }

    private Orders ordersValue;
    /// <summary>
    /// The orders for this customer
    /// </summary>
    public Orders Orders
    {
        get { return ordersValue; }
        set { ordersValue = value; }
    }

    public override string ToString()
    {
        return this.CompanyName + " (" + this.CustomerID + ")";
    }
}

/// <summary>
/// A collection of Customer objects
/// </summary>
public class Customers : System.Collections.Generic.List<Customer>
{

}

Order オブジェクトを作成するには

ソリューションエクスプローラーで [SilverlightObjectBinding] プロジェクトを右クリックし、[追加] をポイントし、[新しい項目] をクリックします。
[新しい項目の追加] ダイアログボックスで、[クラス] 項目をクリックします。
名前を「Order」に変更し、[追加] をクリックします。

Order コードファイルで、Order クラスを次のコードで置き換えます。

''' <summary>
''' A single order
''' </summary>
Public Class Order

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new order
    ''' </summary>
    ''' <param name="orderid">The identifier for this order</param>
    ''' <param name="customerID">The customer who placed this order</param>
    Public Sub New(ByVal orderid As Integer,
                   ByVal customerID As String)
        orderIDValue = orderid
        customerIDValue = customerID
    End Sub

    Private orderIDValue As Integer
    ''' <summary>
    ''' Identifier for this order
    ''' </summary>
    Public Property OrderID() As Integer
        Get
            Return orderIDValue
        End Get
        Set(ByVal value As Integer)
            orderIDValue = value
        End Set
    End Property

    Private customerIDValue As String
    ''' <summary>
    ''' The customer who placed this order
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal Value As String)
            customerIDValue = Value
        End Set
    End Property
End Class

''' <summary>
''' A collection of Orders
''' </summary>
Public Class Orders
    Inherits System.Collections.Generic.List(Of Order)

End Class

/// <summary>
/// A single order
/// </summary>
public class Order
{
    /// <summary>
    /// Creates a new order
    /// </summary>
    /// <param name="orderid"></param>
    /// <param name="customerID"></param>
    public Order(int orderid, string customerID)
    {
        orderIDValue = orderid;
        customerIDValue = customerID;
    }

    private int orderIDValue;
    /// <summary>
    /// The ID that uniquely identifies this order
    /// </summary>
    public int OrderID
    {
        get { return orderIDValue; }
        set { orderIDValue = value; }
    }

    private string customerIDValue;
    /// <summary>
    /// The customer who placed this order
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }
}

/// <summary>
/// A collection of Order objects
/// </summary>
public class Orders : System.Collections.Generic.List<Order>
{

}

プロジェクトをビルドします。

オブジェクトデータソースの作成

データソース構成ウィザードを実行することにより、オブジェクトデータソースを作成し、[データソース] ウィンドウに読み込みます。

オブジェクトデータソースを作成するには

[データ] メニューの [データソースの表示] をクリックします。
[データソース] ウィンドウで、[新しいデータソースの追加] をクリックします。

データソース構成ウィザードが表示されます。
[データソースの種類を選択] ページで、[オブジェクト] をクリックし、[次へ] をクリックします。
[データオブジェクトの選択] ページで、ツリービューを 2 回展開し、[Customers] の横にあるチェックボックスをオンにします。

[!メモ]

単数の [Customer] ではなく、[Customers] を選択してください。[Customers] が表示されていない場合は、ウィザードを終了し、ソリューションをビルドし直します。
[完了] をクリックします。

[データソース] ウィンドウにオブジェクトデータソースが読み込まれます。

データバインドコントロールの作成

オブジェクトのデータを表示するコントロールを作成するには、[データソース] ウィンドウから [Customers] ノードおよび [Orders] ノードをデザイナーにドラッグします。

データバインドコントロールを作成するには

MainPage.xaml をデザインビューで開きます。
[データソース] ウィンドウから、[Customers] ノードをデザイナーにドラッグします。
[データソース] ウィンドウから、[Orders] ノードをデザイナーの顧客グリッドの下にドラッグします。

オブジェクトにデータを設定し、生成された CollectionViewSource にバインドする

このチュートリアルではカスタムオブジェクトをデータモデルとして使用するため、Silverlight ページが開いたときにサンプルデータを作成して読み込みます。

[データソース] ウィンドウからオブジェクトデータソースをドラッグすると、コードコメントが生成され、カスタムオブジェクトを指すようにデータソースを構成できます。生成されたコードコメントをコメントから外し、データオブジェクトのコレクションを指すように System.Windows.Data.CollectionViewSource.Source (myCollectionViewSource) を設定します。次の手順では、生成されたコードを変更して、生成されたコントロールにバインドする方法を示します。

[データソース] ウィンドウからデザイナーに項目をドラッグするたびに、Silverlight ページで System.Windows.Data.CollectionViewSource が生成されます。名前は、使用しているデータソースに基づいて設定されます。'Resource Key for CollectionViewSource' というコメントを、言語に応じて、CustomersViewSource または customerViewSource で置き換えます。

オブジェクトにデータを設定し、コントロールをオブジェクトにバインドするには

ソリューションエクスプローラーで、[MainPage.xaml] ノードを展開し、[MainPage.xaml] コードファイルをダブルクリックします。

コードファイル (MainPage.xaml.vb または MainPage.xaml.cs) で、次のメソッドを MainPage クラスに追加します。

' Create sample data.
Private Function GetCustomers() As Customers

    Dim customers As New Customers

    ' Create 3 sample customers,
    ' each with 3 sample orders.
    Dim cust1 As New Customer("1", "A Bike Store", "Seattle")
    Dim cust1Orders As New Orders
    cust1Orders.Add(New Order(1, cust1.CustomerID))
    cust1Orders.Add(New Order(2, cust1.CustomerID))
    cust1Orders.Add(New Order(3, cust1.CustomerID))
    cust1.Orders = cust1Orders

    Dim cust2 As New Customer("2", "Progressive Sports", "Renton")
    Dim cust2Orders As New Orders
    cust2Orders.Add(New Order(4, cust2.CustomerID))
    cust2Orders.Add(New Order(5, cust2.CustomerID))
    cust2Orders.Add(New Order(6, cust2.CustomerID))
    cust2.Orders = cust2Orders

    Dim cust3 As New Customer("3", "Advanced Bike Components", "Irving")
    Dim cust3Orders As New Orders
    cust3Orders.Add(New Order(7, cust3.CustomerID))
    cust3Orders.Add(New Order(8, cust3.CustomerID))
    cust3Orders.Add(New Order(9, cust3.CustomerID))
    cust3.Orders = cust3Orders

    ' Add the sample customer objects to the 
    ' Customers collection.
    customers.Add(cust1)
    customers.Add(cust2)
    customers.Add(cust3)

    Return customers
End Function

// Create sample data.
private Customers GetCustomers()
{
    Customers customers = new Customers();

    // Create 3 sample customers,
    // each with 3 sample orders.
    Customer cust1 = new Customer("1", "A Bike Store", "Seattle");
    Orders cust1Orders = new Orders();
    cust1Orders.Add(new Order(1, cust1.CustomerID));
    cust1Orders.Add(new Order(2, cust1.CustomerID));
    cust1Orders.Add(new Order(3, cust1.CustomerID));
    cust1.Orders = cust1Orders;

    Customer cust2 = new Customer("2", "Progressive Sports", "Renton");
    Orders cust2Orders = new Orders();
    cust2Orders.Add(new Order(4, cust2.CustomerID));
    cust2Orders.Add(new Order(5, cust2.CustomerID));
    cust2Orders.Add(new Order(6, cust2.CustomerID));
    cust2.Orders = cust2Orders;

    Customer cust3 = new Customer("3", "Advanced Bike Components", "Irving");
    Orders cust3Orders = new Orders();
    cust3Orders.Add(new Order(7, cust3.CustomerID));
    cust3Orders.Add(new Order(8, cust3.CustomerID));
    cust3Orders.Add(new Order(9, cust3.CustomerID));
    cust3.Orders = cust3Orders;

    // Add the sample customer objects to the 
    // Customers collection.
    customers.Add(cust1);
    customers.Add(cust2);
    customers.Add(cust3);

    return customers;
}

UserControl_Loaded イベントハンドラー内のコメントの付いたコードを次のコードで置き換えます。

Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

    'Do not load your data at design time.
    If Not (System.ComponentModel.DesignerProperties.GetIsInDesignMode(Me)) Then
        'Load your data here and assign the result to the CollectionViewSource.
        Dim myCollectionViewSource As System.Windows.Data.CollectionViewSource = CType(Me.Resources("CustomersViewSource"), System.Windows.Data.CollectionViewSource)
        myCollectionViewSource.Source = GetCustomers()
    End If
End Sub

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{

    // Do not load your data at design time.
    if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
    {
        //Load your data here and assign the result to the CollectionViewSource.
        System.Windows.Data.CollectionViewSource myCollectionViewSource = (System.Windows.Data.CollectionViewSource)this.Resources["customersViewSource"];
        myCollectionViewSource.Source = GetCustomers();
    }
}

アプリケーションのテスト

アプリケーションをビルドして実行し、顧客レコードを表示できることを確認します。

アプリケーションをテストするには

[ビルド] メニューの [ソリューションのビルド] をクリックします。ソリューションがエラーなしでビルドされることを確認します。
アプリケーションを実行します。
3 人の顧客がデータグリッドに表示され、選択した顧客の注文が注文グリッドに表示されることを確認します。
別の顧客を選択し、選択した顧客の注文のみが表示されるように注文が更新されることを確認します。
アプリケーションを閉じます。

次の手順

このチュートリアルを完了したら、関連する次の作業を行うことができます。

変更をデータストアに保存する方法を学習します。詳細については、「データバインディング」を参照してください。

参照

その他の技術情報

Visual Studio でのデータへのアクセス

Data Access and Data Structures (データアクセスとデータ構造)

次の方法で共有

チュートリアル: オブジェクトへの Silverlight コントロールのバインド

必須コンポーネント

Silverlight アプリケーションの作成

Silverlight プロジェクトを作成するには

バインド先のカスタムオブジェクトの作成

Customer オブジェクトを作成するには

Order オブジェクトを作成するには

オブジェクトデータソースの作成

オブジェクトデータソースを作成するには

データバインドコントロールの作成

データバインドコントロールを作成するには

オブジェクトにデータを設定し、生成された CollectionViewSource にバインドする

オブジェクトにデータを設定し、コントロールをオブジェクトにバインドするには

アプリケーションのテスト

アプリケーションをテストするには

次の手順

参照

その他の技術情報

その他のリソース

次の方法で共有

チュートリアル: オブジェクトへの Silverlight コントロールのバインド

必須コンポーネント

Silverlight アプリケーションの作成

Silverlight プロジェクトを作成するには

バインド先のカスタム オブジェクトの作成

Customer オブジェクトを作成するには

Order オブジェクトを作成するには

オブジェクト データ ソースの作成

オブジェクト データ ソースを作成するには

データ バインド コントロールの作成

データ バインド コントロールを作成するには

オブジェクトにデータを設定し、生成された CollectionViewSource にバインドする

オブジェクトにデータを設定し、コントロールをオブジェクトにバインドするには

アプリケーションのテスト

アプリケーションをテストするには

次の手順

参照

その他の技術情報

その他のリソース

バインド先のカスタムオブジェクトの作成

オブジェクトデータソースの作成

オブジェクトデータソースを作成するには

データバインドコントロールの作成

データバインドコントロールを作成するには