チュートリアル: XAML デザイナーでデータにバインドする

XAML デザイナーで、アートボードと [プロパティ] ウィンドウを使用してデータ バインディング プロパティを設定できます。 このチュートリアルの例では、データをコントロールにバインドする方法を示します。 具体的には、ItemCount という名前の DependencyProperty を持つ簡単なショッピング カート クラスを作成した後、ItemCount プロパティを TextBlock コントロールの Text プロパティにバインドする方法を説明します。

データ ソースとして使用するクラスを作成するには

1. [ファイル] メニューで、 [新規]>[プロジェクト]をクリックします。

2. [新しいプロジェクト] ダイアログ ボックスで、[Visual C#] ノードまたは [Visual Basic] ノードを選びます。次に、[Windows デスクトップ] ノードを展開し、[WPF アプリケーション] テンプレートを選びます。

3. プロジェクトに BindingTest という名前を付けて、[OK] をクリックします。

4. MainWindow.xaml.cs (または MainWindow.xaml.vb) ファイルを開き、次のコードを追加します。 C# では、このコードを BindingTest 名前空間 (ファイルの最後の閉じかっこの前) に追加します。 Visual Basic では、新しいクラスを追加します。

   • C#
   • VB

   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));
   }
   

   このコードでは、PropertyMetadata オブジェクトを使って、既定の項目数の値を 0 に設定しています。

5. [ファイル] メニューで、[ビルド]>[ソリューションのビルド] を選択します。

ItemCount プロパティを TextBlock コントロールにバインドするには

1. ソリューション エクスプローラーで、MainWindow.xaml のショートカット メニューを開き、[デザイナーの表示] を選びます。

2. ツールボックスで、グリッド コントロールを選んでフォームに追加します。

3. Grid を選んだ状態で、[プロパティ] ウィンドウの [DataContext] プロパティの横にある [新規作成] ボタンを選びます。

4. [オブジェクトの選択] ダイアログ ボックスで、[すべてのアセンブリを表示する] チェック ボックスがオフであることを確認し、BindingTest 名前空間の下にある ShoppingCart を選んで、[OK] ボタンを選びます。

   次の図は、[オブジェクトの選択] ダイアログ ボックスで ShoppingCart 選んだ状態を示しています。

   

5. [ツールボックス] で、TextBlock コントロールを選んでフォームに追加します。

6. TextBlock コントロールを選んだ状態で、[プロパティ] ウィンドウで [Text] プロパティの右側にあるプロパティ マーカーを選んでから、[データ バインディングの作成] を選びます。 (プロパティ マーカーは小さいボックスで表示されています。)

7. [データ バインディングを作成] ダイアログ ボックスの [パス] ボックスで、[ItemCount: (int32)] プロパティを選び、[OK] を選びます。

   次の図は、[ItemCount] プロパティを選んだ [データ バインディングの作成] ダイアログ ボックスです。

   

8. F5 キーを押してアプリを実行します。

   TextBlock コントロールにより、既定値の 0 がテキストとして表示されます。

関連するコンテンツ

• XAML デザイナーを使用して UI を作成する
• [値コンバーターの追加] ダイアログ ボックス