チュートリアル: XAML デザイナーでデータにバインドするWalkthrough: Bind to data in XAML Designer

XAML デザイナーでは、アートボードと [プロパティ] ウィンドウを使用してデータ バインディングのプロパティを設定できます。In XAML Designer, you can set data binding properties by using the artboard and the Properties window. このチュートリアルの例では、データをコントロールにバインドする方法を示します。The example in this walkthrough shows how to bind data to a control. 具体的には、ItemCount という名前の DependencyProperty を持つ簡単なショッピング カート クラスを作成した後、ItemCount プロパティを TextBlock コントロールの Text プロパティにバインドする方法を説明します。Specifically, the walkthrough shows how to create a simple shopping cart class that has a DependencyProperty named ItemCount, and then bind the ItemCount property to the Text property of a TextBlock control.

データ ソースとして使用するクラスを作成するにはTo create a class to use as a data source

  1. [ファイル] メニューで、[新規]> [プロジェクト] の順に選択します。On the File menu, choose New> Project.

  2. [新しいプロジェクト] ダイアログ ボックスで、[Visual C#] ノードまたは [Visual Basic] ノードを選びます。次に、[Windows デスクトップ] ノードを展開し、[WPF アプリケーション] テンプレートを選びます。In the New Project dialog box, choose either the Visual C# or Visual Basic node, expand the Windows Desktop node, and then choose the WPF Application template.

  3. プロジェクトに BindingTest という名前を付けて、[OK] をクリックします。Name the project BindingTest, and then choose the OK button.

  4. MainWindow.xaml.cs (または MainWindow.xaml.vb) ファイルを開き、次のコードを追加します。Open the MainWindow.xaml.cs (or MainWindow.xaml.vb) file and add the following code. C# では、BindingTest 名前空間 (ファイル内の最後の閉じかっこの前) にコードを追加します。In C#, add the code in the BindingTest namespace (before the final closing parenthesis in the file). Visual Basic の場合は、単に新しいクラスを追加します。In Visual Basic, just add the new class.

    public class ShoppingCart : DependencyObject
    {
        public int ItemCount
        {
            get { return (int)GetValue(ItemCountProperty); }
            set { SetValue(ItemCountProperty, value); }
        }
    
        public static readonly DependencyProperty ItemCountProperty =
             DependencyProperty.Register("ItemCount", typeof(int),
             typeof(ShoppingCart), new PropertyMetadata(0));
    }
    
    Public Class ShoppingCart
        Inherits DependencyObject
    
        Public Shared ReadOnly ItemCountProperty As DependencyProperty = DependencyProperty.Register(
             "ItemCount", GetType(Integer), GetType(ShoppingCart), New PropertyMetadata(0))
        Public Property ItemCount As Integer
            Get
                ItemCount = CType(GetValue(ItemCountProperty), Integer)
            End Get
            Set(value As Integer)
                SetValue(ItemCountProperty, value)
            End Set
        End Property
    End Class
    

    このコードでは、PropertyMetadata オブジェクトを使って、既定の項目数の値を 0 に設定しています。This code sets a value of 0 as the default item count by using the PropertyMetadata object.

  5. [ファイル] メニューで、[ビルド] > [ソリューションのビルド] を選択します。On the File menu, choose Build > Build Solution.

ItemCount プロパティを TextBlock コントロールにバインドするにはTo bind the ItemCount property to a TextBlock control

  1. ソリューション エクスプローラーで、MainWindow.xaml のショートカット メニューを開き、[デザイナーの表示] を選びます。In Solution Explorer, open the shortcut menu for MainWindow.xaml and choose View Designer.

  2. ツールボックスで、グリッド コントロールを選んでフォームに追加します。In the Toolbox, choose a Grid control and add it to the form.

  3. Grid を選んだ状態で、[プロパティ] ウィンドウの [DataContext] プロパティの横にある [新規作成] ボタンを選びます。With the Grid selected, in the Properties window, choose the New button next to the DataContext property.

  4. [オブジェクトの選択] ダイアログ ボックスで、[すべてのアセンブリを表示する] チェック ボックスがオフであることを確認し、BindingTest 名前空間の下にある ShoppingCart を選んで、[OK] ボタンを選びます。In the Select Object dialog box, make sure that Show all assemblies checkbox is cleared, choose ShoppingCart under the BindingTest namespace, and then choose the OK button.

    次の図は、[オブジェクトの選択] ダイアログ ボックスで ShoppingCart 選んだ状態を示しています。The following illustration shows the Select Object dialog box with ShoppingCart selected.

    [オブジェクトの選択] ダイアログ ボックス

  5. [ツールボックス] で、TextBlock コントロールを選んでフォームに追加します。In the Toolbox, choose a TextBlock control to add it to the form.

  6. TextBlock コントロールを選んだ状態で、[プロパティ] ウィンドウで [Text] プロパティの右側にあるプロパティ マーカーを選んでから、[データ バインディングの作成] を選びます。With the TextBlock control selected, in the Properties window, choose the property marker to the right of the Text property, and then choose Create Data Binding. (プロパティ マーカーは小さいボックスのような外観です。)(The property marker looks like a small box.)

  7. [データ バインディングを作成] ダイアログ ボックスの [パス] ボックスで、[ItemCount: (int32)] プロパティを選び、[OK] を選びます。In the Create Data Binding dialog box, in the Path box, choose the ItemCount : (int32) property and then choose the OK button.

    次の図は、[ItemCount] プロパティを選んだ [データ バインディングの作成] ダイアログ ボックスです。The following illustration shows the Create Data Binding dialog box with the ItemCount property selected.

    [データ バインディングの作成] ダイアログ ボックス

  8. F5 キーを押してアプリを実行します。Press F5 to run the app.

    TextBlock コントロールに、既定値の 0 がテキストとして表示されるはずです。The TextBlock control should show the default value of 0 as text.

関連項目See also