【C#/WPF実践入門編(5)】データバインディングの基礎①～DataContextとは？～

// データが変更されるたびに手動でUIを更新
nameLabel.Content = person.Name;
ageLabel.Content = person.Age.ToString();

<!-- XAMLで一度設定すれば自動的に同期 -->
<Label Content="{Binding Name}"/>
<Label Content="{Binding Age}"/>

<!-- 既定値がOneWay -->
<Label Content="{Binding Name}" />

<!-- 既定値がTwoWay ->
<TextBox Text="{Binding Name}" />

<TextBox Text="{Binding Name, Mode=OneWay}" />

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Margin="10">

        <!-- タイトル -->
        <TextBlock Text="データバインディング基礎デモ" 
                   FontSize="16" FontWeight="Bold" 
                   HorizontalAlignment="Center" Margin="0,0,0,15"/>

        <!-- 人物情報エリア -->
        <GroupBox Header="人物情報" Margin="0,0,0,10">
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name, StringFormat='名前: {0}'}"/>
                <TextBlock Text="{Binding Age, StringFormat='年齢: {0}'}"/>
                <TextBlock Text="{Binding Job, StringFormat='職業: {0}'}"/>
            </StackPanel>
        </GroupBox>

        <!-- 会社情報エリア -->
        <GroupBox x:Name="CompanyGroup" Header="会社情報">
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name, StringFormat='会社名: {0}'}"/>
                <TextBlock Text="{Binding Department, StringFormat='部署: {0}'}"/>
            </StackPanel>
        </GroupBox>

    </StackPanel>
</Window>

using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // データオブジェクトを作成
            var person = new Person
            {
                Name = "田中太郎",
                Age = 30,
                Job = "ソフトウェアエンジニア"
            };

            var company = new Company
            {
                Name = "株式会社サンプル",
                Department = "開発部"
            };

            // 1. Window全体にPersonを設定
            this.DataContext = person;
            // → この時点で、すべての子コントロールがPersonを参照

            // 2. 特定のコントロールに別のデータを設定
            CompanyGroup.DataContext = company;
            // → CompanyGroup内のコントロールだけがCompanyを参照
            // → 他の部分は引き続きPersonを参照
        }
    }

    // データクラス
    public class Person
    {
        public required string Name { get; set; }
        public required int Age { get; set; }
        public required string Job { get; set; }
    }

    public class Company
    {
        public required string Name { get; set; }
        public required string Department { get; set; }
    }
}