データバインディングを作成する方法

2025-05-07

この記事では、バインド XAML を作成する方法について説明します。この例では、会社の従業員を表すデータオブジェクトを使用します。このデータオブジェクトは、 TextBlock コントロールを使用して従業員の詳細を一覧表示する XAML ウィンドウにバインドされます。次の図のような UI を作成します。

名、姓、役職、採用日、給与など、従業員に関する詳細を表示する WPF ウィンドウ。

データバインディングの詳細については、「 WPF でのデータバインディングの概要」を参照してください。

データオブジェクトを作成する

この例では、UI がバインドされているデータオブジェクトとして従業員が使用されます。

プロジェクトに新しいクラスを追加し、 Employee名前を付けます。

コードを次のスニペットに置き換えます。

using System;
using System.ComponentModel;

namespace ArticleSample
{
    public class Employee : INotifyPropertyChanged
    {
        private decimal _salary;
        public event PropertyChangedEventHandler? PropertyChanged;

        public required string FirstName { get; set; }
        public required string LastName { get; set; }
        public required string Title { get; set; }
        public required DateTime HireDate { get; set; }

        public required decimal Salary
        {
            get => _salary;
            set
            {
                _salary = value;

                // Support TwoWay binding
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Salary)));
            }
        }
    }
}

Imports System.ComponentModel

Public Class Employee
    Implements INotifyPropertyChanged

    Private _salary As Decimal
    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    Public Property FirstName As String
    Public Property LastName As String
    Public Property Title As String
    Public Property HireDate As DateTime

    Public Property Salary As Decimal
        Get
            Return _salary
        End Get
        Set(value As Decimal)
            _salary = value
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(NameOf(Salary)))
        End Set
    End Property

End Class

従業員データオブジェクトは、従業員を記述する単純なクラスです。

従業員の姓と名。
従業員が採用された日付。
従業員の職務上の肩書。
従業員が得た収入。

データオブジェクトにバインドする

次の XAML は、 Employee クラスをデータオブジェクトとして使用する方法を示しています。ルート要素の DataContext プロパティは、XAML で宣言された静的リソースにバインドされます。個々のコントロールは、 Employeeのプロパティにバインドされます。

新しい ウィンドウ をプロジェクトに追加して名前を付ける EmployeeView

XAML を次のスニペットに置き換えます。

重要

次のスニペットは、C# プロジェクトから取得されます。 Visual Basic を使用している場合は、x:Class名前空間なしでArticleSampleを宣言する必要があります。 EmployeeView.xaml では、Visual Basic のバージョンがどのように表示されるかを確認できます。

<Window x:Class="ArticleSample.EmployeeView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ArticleSample"
        Title="" Height="250" Width="300">
    <Window.Resources>
        <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                                HireDate="2022-02-16" Salary="5012.00"
                                                Title="Content Artist" />
    </Window.Resources>
    <StackPanel DataContext="{StaticResource EmployeeExample}">
        <Label FontSize="32">Employee</Label>
        <Border BorderBrush="Gray" BorderThickness="2" />
        <Grid Grid.Row="1" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Text="First Name:" Grid.Row="0" Margin="0,0,10,0" />
            <TextBlock Text="Last Name:" Grid.Row="1" />
            <TextBlock Text="Title:" Grid.Row="2" />
            <TextBlock Text="Hire Date:" Grid.Row="3" />
            <TextBlock Text="Salary" Grid.Row="4" />

            <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
            <TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
            <TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
            <TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
            <TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />
        </Grid>
        <Border BorderBrush="Gray" BorderThickness="2" />
        
        <StackPanel Margin="5,10" Orientation="Horizontal">
            <TextBlock Text="Change Salary:" Margin="0,0,10,0" />
            <TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />
        </StackPanel>
    </StackPanel>
</Window>

ArticleSample という名前のプロジェクトを作成しない限り、コードの名前空間はプロジェクトの名前空間と一致しません。新しいプロジェクトを作成した場合は、 Window.Resources とルート要素 (StackPanel) をコピーして MainWindow に貼り付けることができます。

前の XAML でデータバインディングがどのように使用されているかを理解するには、次の点を考慮してください。

XAML リソースは、 Employee クラスのインスタンスを作成するために使用されます。

通常、データオブジェクトは Window に渡されるか、ウィンドウに関連付けられます。この例では、デモンストレーションのために従業員をハードコーディングします。
```
<Window.Resources>
    <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                            HireDate="2022-02-16" Salary="5012.00"
                                            Title="Content Artist" />
</Window.Resources>
```
ルート要素 (StackPanel) には、ハードコーディングされた Employee インスタンスにデータコンテキストが設定されています。

子要素は、明示的に設定されていない限り、親から DataContext を継承します。
```
<StackPanel DataContext="{StaticResource EmployeeExample}">
```

Employee インスタンスのプロパティは、TextBlock コントロールにバインドされます。

BindingではBindingSourceが指定されていないため、DataContextがソースとして使用されます。

<TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
<TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
<TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
<TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />

TextBox コントロールはTwoWay モードでバインドされ、TextBoxで Employee.Salary プロパティを変更できます。
```
<TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />
```

データバインディングの概要

次の方法で共有

データ バインディングを作成する方法

データ オブジェクトを作成する

データ オブジェクトにバインドする

関連コンテンツ

その他のリソース

データバインディングを作成する方法

データオブジェクトを作成する

データオブジェクトにバインドする