【C#】WPFのデータバインド(ラベルとボタン)

実行環境

■Windows10
■Visual Studio Community 2019
■WPF(Prism Blank App)

 

データバインドとは

データバインドとは、画面(View側)とViewModelのデータのやりとりのことです。

MVVMでは、画面をViewと呼び、Viewを制御するロジックをViewModelに記述します。

 

サンプルコード

ラベルとボタンのデータバインドを実装していきます。

 

ラベルのデータバインド

Viewにラベルを用意します。

<Window x:Class="MVVMSample1.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <Label Content="ラベルのデータバインド"></Label>
       // データバインド
            <Label Content="{Binding DateLabel}"></Label>
        </StackPanel>
        <ContentControl prism:RegionManager.RegionName="ContentRegion" />
    </Grid>
</Window>

実行。

こちらに、データバインドで現在の時刻を表示させていきます。

MainWindow.ViewModel.csを下記のように記述します。

using Prism.Mvvm;
using System;namespace MVVMSample1.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism Application";
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public MainWindowViewModel()
        {
        }
    
        // private変数の_dateLabelに現在の時刻を代入
        private string _dateLabel = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");

        // DateLabelにバインドするプロパティ
        public string DateLabel
        {
            // _dateLabelを返す
            get { return _dateLabel; }
      
       // SetPropertyで値に変更があった際には画面に変更通知が行われる
            set { SetProperty(ref _dateLabel, value); }
        }
     }
}

実行。

現在の時刻が表示されました。

 

ボタンのデータバインド

ボタンを押下した際にLabelの時刻を更新する実装を行います。

<Window x:Class="MVVMSample1.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <Label Content="ラベルのデータバインド"></Label>
       
            <Label Content="{Binding DateLabel}"></Label>

            // Buttonを追加(Commandがボタンをクリックした際のイベント)
            <Button Content="更新ボタン"
                    Command="{Binding UpdateButtonCommand}">
        </StackPanel>
        <ContentControl prism:RegionManager.RegionName="ContentRegion" />
    </Grid>
</Window>

ViewModel側にもボタンの処理を記述します。

using Prism.Commands;
using Prism.Mvvm;
using System;namespace MVVMSample1.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private string _title = "Prism Application";
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public MainWindowViewModel()
        {
            // コンストラクタでDelegateCommandのインスタンスを生成(引数に実行するメソッド)
            UpdateButtonCommand = new DelegateCommand(UpdateButtonCommandExecute);
        }

        private string _dateLabel = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");

        public string DateLabel
        {
            get { return _dateLabel; }
            set { SetProperty(ref _dateLabel, value); }
        }

        // xaml側とデータバインドするDelegateCommandを作成  
        public DelegateCommand UpdateButtonCommand { get; }

        // ボタンを押下した際の処理(ラベルに現在の時刻を代入)
        private void UpdateButtonCommandExecute()
        {
            DateLabel = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");
        }
    }
}

実行。

更新ボタンを押下すると、ラベルの時刻が更新されます。