次の方法で共有

XAML デザイナーでデータをバインドする方法

  • [アーティクル]

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

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

  1. 空のアプリケーション テンプレートに、C# または Visual Basic のプロジェクトを生成します。

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

    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 に設定しています。

    ヒント

    Visual Studio では、ShoppingCart クラス内に propdp を入力し、Tab キーを押すと、依存関係プロパティのスタブ コードを追加できます。

  3. [ビルド]、[ソリューションのビルド] の順にクリックします。

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

  1. MainPage.xaml を右クリックし、[ビュー デザイナー] をクリックします。

  2. [ドキュメント アウトライン] ウィンドウで、[グリッド] と表示されるルートのグリッド パネルを選択します。

  3. Grid を選択して、[プロパティ] ウィンドウの [DataContext] プロパティの横の [新規作成] ボタンをクリックします。

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

    次の図は、[オブジェクトの選択] を選択した [ShoppingCart] ダイアログ ボックスを示します。

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

  5. [ツールボックス] で、TextBlock コントロールをダブルクリックしてアートボードに追加します。

  6. TextBlock コントロールを選択し、[プロパティ] ウィンドウの [共通] の下にある [Text] プロパティの右のプロパティ マーカーをクリックします。(プロパティ マーカーは小さいボックスで表示されています。)

  7. 表示されるメニューの [データ バインディングの作成] をクリックします。

  8. [バインディングの種類] リストの既定値である [データ コンテキスト] のバインディングの種類で、[パス] ボックスの [ItemCount] プロパティを選択し、[OK] をクリックします。

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

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

  9. F5 キーを押して、アプリケーションを開始します。

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

参照

関連項目

[値コンバーターの追加] ダイアログ ボックス

概念

XAML デザイナーを使用した UI の作成