WPF_MVVM_CheckBox



CheckBoxをMVVMで利用する。

ViewModel

Prismを利用してデータバインディングします。

using Prism.Commands;
using Prism.Mvvm;
using System;

namespace WpfPrismMvvm
{
    public class MainWindowViewModel : BindableBase
    {
        /// <summary>
        /// チェックボックス状態変化を捕捉した際に実行するコマンド
        /// </summary>
        public DelegateCommand<EventArgs> CheckBoxAction { get; private set; }

        /// <summary>
        /// チェックボックスの状態表示用テキスト
        /// </summary>
        private string _checkBoxStatus;
        public string CheckBoxStatus
        {
            get { return _checkBoxStatus; }
            set { SetProperty(ref _checkBoxStatus, value); }
        }

        private bool _checkBox1;
        public bool CheckBox1
        {
            get { return _checkBox1; }
            set { SetProperty(ref _checkBox1, value); }
        }

        private bool _checkBox2;
        public bool CheckBox2
        {
            get { return _checkBox2; }
            set { SetProperty(ref _checkBox2, value); }
        }

        private bool _checkBox3;
        public bool CheckBox3
        {
            get { return _checkBox3; }
            set { SetProperty(ref _checkBox3, value); }
        }

        public MainWindowViewModel()
        {
            CheckBoxAction = new DelegateCommand<EventArgs>(x => checkBoxAction(x));
            CheckBox1 = false;
            CheckBox2 = false;
            CheckBox3 = false;
        }

        /// <summary>
        /// チェックされたチェックボックスの名前をCheckBoxStatusに記入する
        /// </summary>
        /// <param name="e"></param>
        private void checkBoxAction(EventArgs e)
        {
            string msg = string.Empty;
            if (CheckBox1)
            {
                msg += "CheckBox1 ";
            }
            if (CheckBox2)
            {
                msg += "CheckBox2 ";
            }
            if (CheckBox3)
            {
                msg += "CheckBox3 ";
            }
            CheckBoxStatus = msg;
        }
    }
}

xaml

チェックボックスの状態変化として、Checked/Uncheckedイベントの捕捉、Clickイベントの捕捉、コマンドの直接割り当てが可能です。

<Window x:Class="WpfPrismMvvm.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:i="http://schemas.microsoft.com/expression/2010/interactivity"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="450">

    <StackPanel>
        <StackPanel Orientation="Horizontal" Margin="10">
            <!--チェックイベントを捕捉してコマンドを実行する-->
            <CheckBox Content="CheckBox1" IsChecked="{Binding CheckBox1}" Margin="10">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Checked">
                        <i:InvokeCommandAction Command="{Binding CheckBoxAction}" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="Unchecked">
                        <i:InvokeCommandAction Command="{Binding CheckBoxAction}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </CheckBox>

            <!--チェックボックスにコマンドを割り当てて実行する-->
            <CheckBox Content="CheckBox2" IsChecked="{Binding CheckBox2}" Margin="10" Command="{Binding CheckBoxAction}" >
            </CheckBox>

            <!--Clickイベントを捕捉してコマンドを実行する-->
            <CheckBox Content="CheckBox3" IsChecked="{Binding CheckBox3}" Margin="10" >
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <i:InvokeCommandAction Command="{Binding CheckBoxAction}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </CheckBox>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Margin="10">
            <TextBlock Text="checked:" FontSize="16" Margin="10"/>
            <TextBlock Text="{Binding CheckBoxStatus}" FontSize="16" Margin="10"/>
        </StackPanel>
    </StackPanel>
</Window>

xaml.cs

using System.Windows;

namespace WpfPrismMvvm
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

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


関連ページ



スポンサード リンク