ももの知恵の樹

WPF_ViewModelデータバインディング

ViewModel

ViewModelは、画面(View)を抽象化(モデル化)する目的に作成します。

WPFでは、xaml.csのDataContextプロパティにViewModelインスタンスを指定します


一方向データバインディング

ViewModel

ViewModel用ファイルを作成し、バインドする変数Msgを定義します。 


namespace WpfDevelop
{
    public class MainWindowViewModel
    {
        public string Msg
        {
            get { return "Hello, World!"; }
        }
    }
}

xaml

変数Msgをバインドすることを定義します。 


<Window x:Class="WpfDevelop.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="280" Width="320">
    <Grid>
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Path=Msg, Mode=OneWay}" />
    </Grid>
</Window>

xaml.cs

XAMLと連携するクラスのDataContextプロパティにViewModelインスタンスを指定します。 


using System.Windows;

namespace WpfDevelop
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            MainWindowViewModel vm = new MainWindowViewModel();
            this.DataContext = vm;
        }
    }
}

双方向データバインディング

データが変更されたことをイベント通知することで表示を更新します。


ViewModel


using System.ComponentModel;

namespace WpfDevelop
{
    public class MainWindowViewModel
    {
        private string _bindText = string.Empty;
        public string BindText
        {
            get
            {
                return this._bindText;
            }
            set
            {
                this._bindText = value;
                this.OnPropertyChanged(nameof(BindText));
                return;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged = null;
        protected void OnPropertyChanged(string info)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(info));
        }
    }
}

xaml


<Window x:Class="WpfDevelop.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="280" Width="320">
    <Grid Background="DarkSlateGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Label Content="{Binding BindText, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
               Margin="10" Background="LightGray" Grid.Row="0"/>
        <TextBox x:Name="EditBox" Margin="10" Background="White" TextWrapping="Wrap" Grid.Row="1"
                 Text="{Binding BindText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                 AcceptsTab="True" AcceptsReturn="True"/>
    </Grid>
</Window>

xaml.cs

一方向データバインディングと同様です。



関連ページ