nprogram’s blog

気ままに、プログラミングのトピックについて書いていきます

WPFで登録・削除可能なリストを作成する [C#][WPF][Prism][MVVM]

はじめに

WPFで登録・削除可能なリストを作成します。
MVVM(Model・View・ViewModel)のプロジェクトにしました。

MVVMの形にするため、以下のようにフォルダ分けしています。

  • Modelsフォルダ
  • ViewModelsフォルダ
  • Viewsフォルダ

Prismでは、以下の機能を使用しています。

  • BindableBase
  • DelegateCommand

環境

  • OS : Windows 10
  • IDE : Visual Studio Community 2017 (Version 15.71)
  • Prism : 6.3.0

[アプリイメージ]

f:id:nprogram:20180617151748p:plain

[クラス図]

f:id:nprogram:20180617163408p:plain

[コードについて]

データコンテキストには、ViewModel.xaml.csで、MainViewModelクラスのインスタンスを設定しています。 これにより、MainViewModelが持つプロパティを画面(MainView.xaml)からアクセスできるようにしています。

[App.xaml.cs]

    /// <summary>
    /// App.xaml の相互作用ロジック
    /// </summary>
    public partial class App : Application
    {
        protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);

            var w = new MainView();
            var vm = new MainViewModel();

            w.DataContext = vm;
            w.Show();
        }
    }

追加ボタンを押したときは、追加コマンドが実行され、AddCommandExecuteメソッドが呼び出されます。

[ViewModel.xaml]

            <Button Content="データ追加"
                    Command ="{Binding AddCommand, Mode=OneWay}"></Button>

[MainViewModel.cs]

        private DelegateCommand _AddComamnd;
        public DelegateCommand AddCommand
        {
            get { return _AddComamnd = _AddComamnd ?? new DelegateCommand(AddCommandExecute); }
        }

[MainViewModel.cs]

        private void AddCommandExecute()
        {
            Book addBook = new Book(books.GetList().Count + 1, Book.Title, Book.Author, Book.Price);
            books.Add(addBook);

            CollectionList.Add(addBook);
        }

削除ボタンを押したときも、基本的な動作は同じです。削除コマンドが実行され、DelCommandExecuteメソッドが呼び出されます。
なお、削除ボタンは、リスト選択時のみ、有効となるように、IsEnabledプロパティをDataGridSelectedItems.Countにバインドしています。 また、CommandParameterには、選択したアイテム(Bookクラス)を渡しています。
これにより、DelCommandExecuteメソッド内で、IDの値で削除対象のアイテムを特定して削除しています。

全削除ボタンは、DataGridの要素が一つ以上ある場合のみ、有効になるようにしています。

[MainView.xaml]

        <StackPanel Orientation="Vertical" DockPanel.Dock="Top">
            <Button Content="データ追加"
                    Command ="{Binding AddCommand, Mode=OneWay}"></Button>
            <Button Content="データ削除"
                    Command ="{Binding DelComamnd}"
                    CommandParameter="{Binding ElementName=nameBookList, Path=SelectedItem}"
                    IsEnabled="{Binding ElementName=nameBookList, Path=SelectedItems.Count}"/>
            <Button Content="データ全削除"
                    Command ="{Binding DelAllComamnd, Mode=OneWay}"
                    IsEnabled="{Binding ElementName=nameBookList, Path=Items.Count}"/>
        </StackPanel>

ソースコード

Gitにコードをアップロードしました。
よろしければ、ダウンロードしてみてください。

github.com

あとがき

WPFで登録・削除可能なリストを作成しました。
次は、アプリ終了時のリスト状態を記憶できるように、SQLiteを使用して、データ永続化を取り入れたいと思います。

⇒以下の記事で記載しました。
(WPF SQLiteを用いたデータ永続化 [C#][WPF][SQLite] - nprogram’s blog)

MVVMでないWPFで登録・削除可能なリストを作成する方法についても記載しました。
よろしければ、見てください。(^^♪
(WPFで登録と削除が可能なリストを作成します [C#][WPF] - nprogram’s blog)