ボタン押下でリストボックス内の選択Itemを別のリストボックスに移動させる

Question

##実現したいこと
【コマンド作成】
１）ボタン押下
２）リストボックス1内で選択されているItemをSelected＝falseにする
※現在はリストボックス1にはSelected＝trueを表示している

    private void left2rightCommandExecute(object parameter)
    {
       ここに処理を書く予定 
    }

##他にお聞きしたいこと
MVVMではコードビハインドにイベントハンドラを書くのではなくて，ViewModelに上記のようにコマンドを書き，それをViewのxamlでバインディングするという形でよろしいのでしょうか？（＝コードビハインドにはInitializeComponent()以外書かない）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel;
using TestDialog.Common;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Data;


namespace Test.ViewModels
{
    class MainViewModel : ViewModelBase
    {
        private ObservableCollection<ItemViewModel> _Items;
        public ObservableCollection<ItemViewModel> Items
        {
            get
            {
                return _Items;
            }
            set
            {
                SetProperty(ref _Items, value);
            }
        }

        public ICollectionView LeftView { get; }
        public ICollectionView RightView { get; }

        public MainViewModel()
        {
            Items = new ObservableCollection<ItemViewModel>();
            Items.Add(new ItemViewModel() { Name = "C1", Selected = true });
            Items.Add(new ItemViewModel() { Name = "C2", Selected = false });
            Items.Add(new ItemViewModel() { Name = "C3", Selected = true });
            LeftView = new CollectionViewSource { Source = Items }.View;
            LeftView.Filter = x => (x as ItemViewModel).Selected == true;
            RightView = new CollectionViewSource { Source = Items }.View;
            RightView.Filter = x => (x as ItemViewModel).Selected == false;
        }



        public class ItemViewModel : ViewModelBase
        {
            private bool _Selected;
            public bool Selected
            {
                get { return _Selected; }
                set
                {
                    SetProperty(ref _Selected, value);
                }
            }

            private string _Name;
            public string Name
            {
                get { return _Name; }
                set
                {
                    SetProperty(ref _Name, value);
                }
            }
        }

        private void left2rightCommandExecute(object parameter)
        {
            
        }


    }
}

Comments

[Zuishin]

そう主張する人はいますが、コードビハインドを使ったら MVVM ではなくなるというわけではありません。やりすぎると逆に MVVM の良さを殺します。「なんのために」という理由を学ぶべきでしょう。ビュー階層で行うべき処理はありますし、XAML でメソッドを呼び出したり、メッセンジャーを駆使して階層を何度も往復する大仰なスパゲッティークラスを作ったりするよりは、コードビハインドを使った方がテストしやすく保守しやすいものができることもあります。

[pomupomu_purin]

Zuishin様

ご回答ありがとうございます。
MVVMについてはまだ初心者ですので，今後も色々ご教示ください。
よろしくお願いいたします。

Answer 1

ちょっと苦労されているようなので、サンプルを書いてみました。
NuGetでPrism.Coreを入れてあります。

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using System.Windows.Data;
using Prism.Commands;
using Prism.Mvvm;

namespace Questions222623
{
    internal class MainViewModel
    {
        public class ItemViewModel : BindableBase
        {
            private bool _Selected;
            public bool Selected { get => _Selected; set => SetProperty(ref _Selected, value); }

            private string _Name;
            public string Name { get => _Name; set => SetProperty(ref _Name, value); }
        }

        public ObservableCollection<ItemViewModel> Items { get; }
        public ICollectionView LeftView { get; }
        public ICollectionView RightView { get; }
        public DelegateCommand<ItemViewModel> Left2RightCommand { get; }
        public DelegateCommand<ItemViewModel> Right2LeftCommand { get; }

        public MainViewModel()
        {
            Items = new ObservableCollection<ItemViewModel>
            {
                new ItemViewModel() { Name = "C1", Selected = true },
                new ItemViewModel() { Name = "C2", Selected = false },
                new ItemViewModel() { Name = "C3", Selected = true },
                new ItemViewModel() { Name = "C4", Selected = true },
                new ItemViewModel() { Name = "C5", Selected = false },
                new ItemViewModel() { Name = "C6", Selected = true },
            };

            var cvs = new CollectionViewSource { Source = Items, };
            cvs.IsLiveFilteringRequested = true; // 変更があったときにフィルターを即時反映
            cvs.LiveFilteringProperties.Add(nameof(ItemViewModel.Selected)); // 変更を監視するプロパティ名
            LeftView = cvs.View;
            LeftView.Filter = x => (x as ItemViewModel).Selected == true;

            cvs = new CollectionViewSource { Source = Items, };
            cvs.IsLiveFilteringRequested = true;
            cvs.LiveFilteringProperties.Add(nameof(ItemViewModel.Selected));
            RightView = cvs.View;
            RightView.Filter = x => (x as ItemViewModel).Selected == false;

            Left2RightCommand = new DelegateCommand<ItemViewModel>(Left2rightCommandExecute);
            Right2LeftCommand = new DelegateCommand<ItemViewModel>((item) => { if(item != null) item.Selected = true; }); // ラムダでもよい
        }

        private void Left2rightCommandExecute(ItemViewModel item)
        {
            if(item != null)
                item.Selected = false;
        }
    }

    public partial class MainWindow : Window
    {
        public MainWindow() => InitializeComponent();
    }
}

<Window
  x:Class="Questions222623.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Questions222623"
  Title="MainWindow"
  Width="800"
  Height="450">
  <Window.DataContext>
    <local:MainViewModel />
  </Window.DataContext>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <ListBox
      x:Name="listBox"
      DisplayMemberPath="Name"
      ItemsSource="{Binding LeftView}" />
    <StackPanel Grid.Column="1" VerticalAlignment="Center">
      <Button
        Margin="5"
        Padding="5"
        Command="{Binding Left2RightCommand}"
        CommandParameter="{Binding SelectedItem, ElementName=listBox}"
        Content="→" />
      <Button
        Margin="5"
        Padding="5"
        Command="{Binding Right2LeftCommand}"
        CommandParameter="{Binding SelectedItem, ElementName=listBox1}"
        Content="←" />
    </StackPanel>
    <ListBox
      x:Name="listBox1"
      Grid.Column="2"
      DisplayMemberPath="Name"
      ItemsSource="{Binding RightView}" />
  </Grid>
</Window>

こういうイメージであっていますでしょうか？

---

別解としてドラッグ＆ドロップでの移動例も作ってみました。
NuGetでPrism.Core gong-wpf-dragdropを入れてあります。

using System.Collections;
using System.Collections.ObjectModel;
using System.Windows;
using GongSolutions.Wpf.DragDrop;
using Prism.Mvvm;

namespace Questions222623
{
    internal class MainViewModel : IDropTarget
    {
        public class ItemViewModel : BindableBase
        {
            private string _Name;
            public string Name { get => _Name; set => SetProperty(ref _Name, value); }
        }

        public ObservableCollection<ItemViewModel> SelectedItems { get; }
        public ObservableCollection<ItemViewModel> UnselectedItems { get; }

        private readonly DefaultDropHandler defaultDropHandler = new DefaultDropHandler();

        public MainViewModel()
        {
            SelectedItems = new ObservableCollection<ItemViewModel>
            {
                new ItemViewModel() { Name = "C1", },
                new ItemViewModel() { Name = "C3", },
                new ItemViewModel() { Name = "C4", },
                new ItemViewModel() { Name = "C6", },
            };
            UnselectedItems = new ObservableCollection<ItemViewModel>
            {
                new ItemViewModel() { Name = "C2", },
                new ItemViewModel() { Name = "C5", },
            };
        }

        void IDropTarget.DragOver(IDropInfo dropInfo)
        {
            if(dropInfo.Data is ItemViewModel)
            {
                dropInfo.DropTargetAdorner = DropTargetAdorners.Insert;
                dropInfo.Effects = DragDropEffects.Move;
            }
        }
        void IDropTarget.Drop(IDropInfo dropInfo)
        {
            if(dropInfo.Data is ItemViewModel item)
            {
                if(dropInfo.DragInfo.SourceCollection != dropInfo.TargetCollection)
                {
                    ((IList)dropInfo.DragInfo.SourceCollection).Remove(item);
                    ((IList)dropInfo.TargetCollection).Insert(dropInfo.InsertIndex, item);
                }
                else
                {
                    defaultDropHandler.Drop(dropInfo);
                }
            }
        }
    }
    public partial class MainWindow : Window
    {
        public MainWindow() => InitializeComponent();
    }
}

<Window
  x:Class="Questions222623.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:dd="urn:gong-wpf-dragdrop"
  xmlns:local="clr-namespace:Questions222623"
  Title="MainWindow"
  Width="800"
  Height="450">
  <Window.DataContext>
    <local:MainViewModel />
  </Window.DataContext>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <ListBox
      dd:DragDrop.DropHandler="{Binding}"
      dd:DragDrop.IsDragSource="True"
      dd:DragDrop.IsDropTarget="True"
      DisplayMemberPath="Name"
      ItemsSource="{Binding SelectedItems}" />
    <ListBox
      Grid.Column="1"
      dd:DragDrop.DropHandler="{Binding}"
      dd:DragDrop.IsDragSource="True"
      dd:DragDrop.IsDropTarget="True"
      DisplayMemberPath="Name"
      ItemsSource="{Binding UnselectedItems}" />
  </Grid>
</Window>

コードが長くなると本質がわかりにくくなるため、CollectionViewSourceを使わずシンプルにSelectedItems UnselectedItemsと2つに分けましたが、もちろん使っても構いません。

Comments

[pomupomu_purin]

TN8001様
ご丁寧にありがとうございます。仕事の都合上、中身を確認するのが夕方になってしまうため取り急ぎお礼だけ伝えさせてください。感謝申し上げます。
中身の確認後、再度コメントをお送り致します。
よろしくお願いいたします。

[pomupomu_purin]

TN8001様
TN8001様のコードはすごくスッキリしていて綺麗ですね。MVVMは煩雑で難しいと感じていたのですが、TN8001様をお手本にすると綺麗に書けそうです。
色々調べる中で、Prismという単語はよく目にしていたのですが、導入しておりませんでした。私もまずはNuGetでPrism.Coreを入れるところから始めてみます。
もう少しゆっくりTN8001様のコードを学習してみます。

[TN8001]

ありがとうございます。
実は普段オレオレ実装でPrism使っていないのですが、こういった回答ですと一言で済ませられるので便利ですね。
WPFは難しいと思われているのか、あまり流行らず残念に思います。
WinFormsも少し外れたことをすると、急に難易度が上がるので、トータルでは大差ないと思っています。
WPFは最初のハードルがやや高いですが、データバインディングやデータテンプレートなどが非常に強力で、慣れてくるともう戻る気はしなくなるでしょう。
微力ながらお手伝いできたらと思います。

[pomupomu_purin]

TN8001様
Prismをインストールし、TN8001様のソースで実装してみました。
確かに私がやりたかったことが実現できていて感動しました。
TN8001様の書き方ですと、MVVMでいうところのViewのコードビハインドにInitializeComponent()を書かなくても良いのですね。つまりViewのコードビハインドがいらなくなるということなのですね。
このような書き方がPrismを使った書き方という認識でよろしいのでしょうか？

現在WPFにかなり苦戦しておりますので、TN8001様の「慣れるとWinFormsには戻る気はしなくなる」というお言葉を信じて慣れるまで頑張ります。

[TN8001]

InitializeComponentはxaml読み込みに必要です。回答コードにも目立たないですが最後に付いてます^^;

ここまではMVVMの流儀でしょうか。
PrismはDIだのモジュールだのたくさんの機能があるのですが、使いたい機能だけ個別に入れられるので、今回はINotifyPropertyChangedとICommandの実装だけ使ったって感じです。
本格的？なPrismの流儀はもうちょっと大げさな仕組みになって、私もよくわかりませんｗ

[pomupomu_purin]

TN8001様
こんにちは。先日はありがとうございました。
TN8001様のコードを見ていて、Prismがかなり便利だと感じているのですが、MVVMのライブラリは他にも有名なのがありますよね。「MVVM light Toolkit」や「Livet」「Caliburn.Micro」等。
TN8001様がPrismを選択されたご理由を伺ってもよろしいでしょうか？

[TN8001]

かなり勉強されてるようですね^^
まず私個人は作るものが小規模すぎてメリットが感じられないため、Prism等は使用していません。

今回はコピペで動くコードを提示したいので、BindableBaseとかDelegateCommandのコードを省略するためだけにPrismを使用しました。
もちろん便利だと思ったのであれば、引き続き使用してください。

Prismの理由ですが、現状デファクトスタンダードになっているように思います。
もともとはMicrosoftのプロジェクトでしたし、英語日本語問わず一番情報が多いと思います。

MVVM light Toolkitはちょっと開発が止まり気味に思います。

Livetは日本人の作者とあって人気でしたが、放置期間が長く皆Prismに乗り換えてしまったんじゃないでしょうか。
最近okazukiさんがメンテナーになって再始動しましたが、過去に使っていたのでなければ、積極的に使う理由も薄いかもしれません。

Caliburn.Microは見た感じすごいよさそうですが、いかんせん日本語情報がほとんどありません。

そもそも私はLivetは使ったことないですし、ほかも「1,2回やってみた」って程度なんであれこれ言える立場ではありません^^;

[pomupomu_purin]

TN8001様
大変分かりやすいご説明本当にありがとうございます。
全てインストールしてみて、PrismかCaliburn.Microが使いやすい印象を受けました。
私のようにまだまだ勉強中で色んな情報がほしい人間にとっては、言語問わず情報が多いという点はすごく魅力的です。やはり今後もPrismを使用しようと思います。

お忙しいようでしたら全然ご返信は大丈夫なのですが、一点伺いたいです。
「私個人は作るものが小規模すぎてメリットが感じられないため、Prism等は使用していません。」とありますが、小規模だからこそ、BindableBaseとかDelegateCommandのコードを省略できるPrismが役に立ちませんか？小規模なのに、上記を書いていたら、メイン部分以上に時間がかかり逆にWPFにすることで不便なのではないかと感じてしまいました。。初心者の疑問で申し訳ないです。

[TN8001]

例えばここの(https://github.com/microsoft/WindowsTemplateStudio/tree/dev/code/src/UI/Mvvm)
2つのファイル程度なので毎回過去プロジェクトからコピペしています^^;
VSで簡単にプロジェクトテンプレートも作れます。

[pomupomu_purin]

なるほど、そういうことなんですね＾＾
この度は何度もご回答いただきまして、感謝申し上げます。
また、質問させていただくことがあるかとは存じますが、何卒どうぞよろしくお願いいたします。

Answer 2

ご提示のコードで問題ないですよ。
後はICommandを実装したクラスのプロパティを作って、それでleft2rightCommandExecuteメソッドを叩くと良いです。
ICommandを実装したクラスは自分で書かずにMVVMインフラを使うことをお勧めします。

今のコードでは、イベントハンドラを使う余地がありませんのでコードビハインドも使いようがないですよね？
既に体感されているようにMVVMを意識すると、自然とコードビハインドの登場機会は少なくなります。
そうなってくるとコードビハインドを排除したくなるのが人情ですよね？
めったに使わないと存在をわすれますしね。

コードビハインドに書く(書ける)のはViewで完結するものだけですので、カスタムコントロールなどに封じて
それをコントロールライブラリに納めれば保守性もテスタビリティも上がります。

--- コード追記 ---
C# 7.X だとこうですね。

private void Left2rightCommandExecute(object parameter)
{
    if(parameter is ItemViewModel item)
    {
        item.Selected = false;
    }
}

private DelegateCommand<object> _left2rightCommand;
public DelegateCommand<object> Left2RightCommand =>
    _left2rightCommand = _left2rightCommand ?? 
    new DelegateCommand<object>(Left2rightCommandExecute);

Comments

[pomupomu_purin]

hihijiji様

本日もhihijiji様のご回答をいただけて大変嬉しいです。
いつもご丁寧にありがとうございます。
MVVMはコードビハインドの登場機会が極端に減るのですね…勉強になります。

MVVMは初心者で，色んなサイトを参考にしながら作成しているのですが，以下の様な書き方で問題ないでしょうか？（ICommandを実装したクラスはご提案通りインフラを使用しました）
選択されたItemをSelected=falseと書きたいのですが，うまくいっていない状態です。
ご教示いただけましたら幸いでございます。

private DelegateCommand _left2rightCommand;
public DelegateCommand Left2RightCommand
{
get
{
if (this._left2rightCommand == null)
{
this._left2rightCommand = new DelegateCommand(_ =>
{
this.

});
}
return this._left2rightCommand;
}
}

[hihijiji]

追記したコードで動かないならXAML側の問題ですね。

[pomupomu_purin]

ありがとうございます。
実はまだ試行錯誤中なのですが、ベストアンサーが遅くなってしまいますので、一旦選ばせていただきました。