へっぽこプログラマーの備忘録
プログラムを中心とした個人的なメモ用のブログです。 タイトルは迷走中。
内容の保証はできませんのであしからずご了承ください。
menu
keyboard_arrow_up
Top
search
close
home
ホーム
computer
PC一般
construction
開発環境・ツール
code
プログラミング
home
ホーム
computer
PC一般
construction
開発環境・ツール
code
プログラミング
Home
›
WPF
›
WPF + MVVM の勉強3:コマンドを実装する
2016/09/18
WPF + MVVM の勉強3:コマンドを実装する
update
event_note
label
C#
label
MVVM
label
WPF
C# も WindowsForms もちょっとしか触ったことがない人が、WPF + MVVM でアプリケーションを作成するために勉強したことをまとめてみる記事3回目です。 間違っているところがあれば指摘していただけると嬉しいです。
[前回までの記事](http://kuttsun.blogspot.jp/2016/09/wpf-mvvm_12.html)で、データバインディングとプロパティの変更を通知する仕組みについて勉強してきました。 今回は、新たにボタンを追加し、ボタンを押すとテキストボックスの中身を表示するようにしてみます。 具体的には、ボタンを押したときに実行されるコマンドクラスを作成して ViewModel でインスタンス化し、データバインディングにより View に結びつける、ということになるのだと思います。 ## 作成するサンプルプログラム [前回までに作成したプログラム](http://kuttsun.blogspot.jp/2016/09/wpf-mvvm_12.html)にボタンを追加し、ボタンを押すとテキストボックスの中身をメッセージボックスで表示します。 テキストボックスに何も入力されていない場合はボタンを無効にしておきます。
## コマンドの実装 WPF + MVVM でコマンドの仕組みを使う際には `ICommand` インターフェイスを実装したクラスを作成するそうです。 ```cs ///
/// コマンドの実装 ///
class ButtonCommand : ICommand { private MainWindowViewModel MainWindow; ///
/// コマンドを実行するかどうかに影響するような変更があった場合に発生する ///
public event EventHandler CanExecuteChanged; ///
/// CanExecuteChangedイベントを発行する ///
public void OnCanExecuteChanged() { CanExecuteChanged?.Invoke(this, EventArgs.Empty); } ///
/// 現在の状態でコマンドが実行可能かどうかを決定するメソッドを定義 ///
///
コマンドで使用されたデータ。 コマンドにデータを渡す必要がない場合は、このオブジェクトを null に設定できる。 ///
コマンドを実行できる場合は true。それ以外の場合は false。
public bool CanExecute(object parameter) { return (MainWindow?.SampleText == string.Empty ? false : true); } ///
/// コマンドが起動される際に呼び出すメソッドを定義 ///
///
コマンドで使用されたデータ。 コマンドにデータを渡す必要がない場合は、このオブジェクトを null に設定できる。 public void Execute(object parameter) { MessageBox.Show(MainWindow.SampleText); } ///
/// コンストラクタ ///
///
ViewModelのインスタンスへの参照 public ButtonCommand(MainWindowViewModel mainWindow) { MainWindow = mainWindow; } } ``` ## ViewModel へのコマンドの追加 Button に対するコマンドクラスを作成したので、ViewModel に実装します。 ```cs ///
/// MainWindowに対するViewModel ///
class MainWindowViewModel : ViewModelBase { // バインディング対象のプロパティ public ButtonCommand Button { get; set; } // バインディングされる値を保持するフィールド private string sampleText_; // バインディング対象のプロパティ public string SampleText { get { return sampleText_; } set { sampleText_ = value; // 変更をViewに通知する OnPropertyChanged(nameof(SampleText)); // ボタンの無効表示に影響するので、CanExecuteChanged イベントを発行する Button?.OnCanExecuteChanged(); // ラベルの値も連動させる SampleLabel = value; } } // バインディングされる値を保持するフィールド private string sampleLabel_ = ""; // バインディング対象のプロパティ public string SampleLabel { get { return sampleLabel_; } set { sampleLabel_ = value; // 変更をViewに通知する OnPropertyChanged(nameof(SampleLabel)); } } ///
/// コンストラクタ ///
public MainWindowViewModel() { SampleText = "Sample"; SampleLabel = "Sample"; Button = new ButtonCommand(this); } } ``` ## データバインディング XAML に Button を追加し、データバインディングにより、ViewModel の Button プロパティとバインドします。 コードビハインドは[最初のときのまま](http://kuttsun.blogspot.jp/2016/09/wpf-mvvm.html)で変更ありません。 ```xml
``` ## CanExecuteChanged イベントの発行 今回一番悩んだのがここでした。 上記のコマンドを実装して、Button コントロールにバインドしただけでは Button が無効表示にならなかったのです。 いろいろ調べてみると、どうやら ViewModel の `PropertyChanged` イベントが発生した場合などに `CanExecuteChanged` イベントを発行する必要があるようです。 以下の場所で `CanExecuteChanged` イベントを発行しています。 ```cs // ボタンの無効表示に影響するので、CanExecuteChanged イベントを発行する Button?.OnCanExecuteChanged(); ``` 当たり前と言えば当たり前なのですが、WPF 初心者の私はかなり悩みました。 確かに、データバインディングにより Button とコマンドは関連付けられていますが、TextBox と Button の関連付けはどこにもされていないので、ViewModel の `PropertyChanged` イベントが発生したタイミングで明示的に `CanExecuteChanged` イベントを発行する必要があるということなのでしょう。 ## 改善すべき点 `MainWindowViewModel` クラスと `ButtonCommand` クラスが互いにインスタンスを保持しているので結合度が強すぎますね。 普通は `ICommand` インタフェースを実装した `DelegateCommand` や `RelayCommand` といったヘルパークラスを作成するみたいです。 次回はここらへんを改善していきたいと思います。 ## その他に気になること `ICommand` インタフェースの実装は ViewModel で合っているのかどうかが気になります。 また、メッセージボックスの表示を ViewModel で行っていますが、MVVM 的にこれは正しいのでしょうか? メッセージボックスなんだから View の責務のような気がしてます。 ## 参考URL - http://blog.nakajix.jp/entry/20110702/1309611572 - http://blog.kazuakix.jp/entry/2014/11/10/000359 - http://sourcechord.hatenablog.com/entry/2014/01/13/200039 - http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_03.html - http://www.atmarkit.co.jp/ait/articles/1011/09/news102_3.html - https://code.msdn.microsoft.com/windowsdesktop/MVVM-d8261534 - http://blog.axon.jp/?p=37 - http://blog.hiros-dot.net/?p=5742 - http://blogs.bitlan.net/ito/?p=360 - http://yujiro15.net/YKSoftware/MVVM_ICommand.html
tweet
facebook
Pocket
B!
はてブ
LINE
chevron_left
chevron_right
Translate
Popular Posts
TortoiseGit でコミットメッセージを変更する
image
NO IMAGE
smbclient で session setup failed: NT_STATUS_LOGON_FAILURE が表示される
Docker for Windows の設定
[Python] 文字列の判定で、None と空文字を同時に判定する
TortoiseGit でブランチ間の差分を見る
image
NO IMAGE
マージ元ブランチとマージ先ブランチ
[Python] matplotlib で plot する際に "Tcl_AsyncDelete: async handler deleted by the wrong thread" というエラーがでる
[Python] Tesseract で OCR を行ったら `UnicodeEncodeError: 'ascii' codec can't encode characters` のエラーが表示された
image
NO IMAGE
GitLab Runner でクローンする URL を変更する
image
NO IMAGE
Visual Studio で文字がにじむ(ぼやける)
Labels
.NET Core
31
.NET Framework
17
.NET Standard
2
AdminLTE
1
AI
1
Apache
3
AppVeyor
2
AsciiDoc
3
ASP.NET Core
55
Atom
4
AWS
5
AWS Cloud9
4
blockdiag
1
Blogger
13
Bootstrap
3
C/C++
6
C#
106
CentOS
3
Chrome
1
Chronograf
3
chrony
1
Codecov
1
CSS
1
Docker
79
DokuWiki
4
Doxygen
1
draw.io
1
EasyTag
1
Electron
1
Electron.NET
2
Entity Framework Core
9
Excel
2
FFmpeg
3
Firefox
6
Flask
1
Git
19
GitBook
4
GitBucket
7
GitHub
7
GitLab
39
Go
1
Google
1
Google Cloud Platform
1
Grafana
13
GStreamer
2
HTML
5
IIS
8
InfluxDB
14
JavaScript
15
Jenkins
7
Linux
34
Log4View
1
MahApps.Metro
3
MaterialDesignInXamlToolkit
1
MkDocs
2
MongoDB
5
MVC
1
MVVM
6
nginx
3
NLog
3
Node.js
8
npm
1
NVIDIA
3
onvif
1
OpenAPI
2
OpenCV
4
OpenSSL
3
OpenVINO
2
ownCloud
2
pandas
1
Pine Script
1
PlantUML
5
Portainer
3
PowerShell
8
Prism
2
PySide
17
Python
85
PyTorch
1
RabbitVCS
1
Razor
3
Redmine
33
Redoc
1
remark.js
2
rocketchat
10
Ruby
3
scikit-learn
1
SignalR
1
Slack
1
Socket.IO
1
SonarQube
5
Sphinx
10
SQL Server
5
SQLite
1
StableDiffusion
1
Subversion
2
Swagger
1
Swarmpit
1
Syslog
3
Telegraf
6
Tesseract
3
TestLink
2
Tomcat
2
TortoiseGit
11
TortoiseSVN
2
Trading View
1
Traefik
3
Travis CI
1
Ubuntu
31
Visual Studio
39
Visual Studio Code
10
VSCode
8
Vue.js
8
Windows
62
Windows 10
5
Windows ADK
1
Windows API
2
Windows Embedded
4
wkhtmltopdf
2
Word
3
WPF
12
WSL
5
WSL2
5
Xamarin
1
xUnit
5
yaml
1
yolo
1
アプリケーション
1
デザインパターン
1
テスト
1
バッチファイル
2
プログラミング
4
ライセンス
1
暗号資産(仮想通貨)
1
英語
2
確定申告
1
機械学習
1
強化学習
1
雑記
1
書籍
1
数学
1
正規表現
1
Blog Archive
►
2024
(8)
►
4月
(1)
►
3月
(1)
►
2月
(5)
►
1月
(1)
►
2023
(30)
►
12月
(3)
►
11月
(5)
►
10月
(2)
►
9月
(1)
►
8月
(2)
►
7月
(4)
►
6月
(2)
►
5月
(3)
►
4月
(2)
►
3月
(2)
►
2月
(3)
►
1月
(1)
►
2022
(106)
►
12月
(5)
►
11月
(1)
►
10月
(3)
►
9月
(6)
►
8月
(7)
►
7月
(6)
►
6月
(13)
►
5月
(9)
►
4月
(15)
►
3月
(11)
►
2月
(14)
►
1月
(16)
►
2021
(85)
►
12月
(11)
►
11月
(6)
►
10月
(4)
►
9月
(10)
►
8月
(8)
►
7月
(4)
►
6月
(18)
►
5月
(7)
►
4月
(8)
►
3月
(2)
►
2月
(2)
►
1月
(5)
►
2020
(56)
►
12月
(1)
►
11月
(3)
►
10月
(3)
►
9月
(3)
►
8月
(3)
►
7月
(7)
►
6月
(7)
►
5月
(2)
►
4月
(6)
►
3月
(6)
►
2月
(3)
►
1月
(12)
►
2019
(92)
►
12月
(13)
►
11月
(9)
►
10月
(3)
►
9月
(2)
►
8月
(3)
►
7月
(5)
►
6月
(11)
►
5月
(6)
►
4月
(17)
►
3月
(9)
►
2月
(6)
►
1月
(8)
►
2018
(100)
►
12月
(1)
►
11月
(11)
►
10月
(8)
►
9月
(6)
►
8月
(10)
►
7月
(10)
►
6月
(8)
►
5月
(9)
►
4月
(8)
►
3月
(14)
►
2月
(4)
►
1月
(11)
►
2017
(117)
►
12月
(14)
►
11月
(20)
►
10月
(17)
►
9月
(19)
►
8月
(10)
►
7月
(8)
►
6月
(3)
►
5月
(6)
►
4月
(5)
►
3月
(2)
►
2月
(8)
►
1月
(5)
▼
2016
(91)
►
12月
(5)
►
11月
(9)
►
10月
(11)
▼
9月
(9)
GitLab を docker-compose で動かしてみる
定義済みデリゲート
WPF + MVVM の勉強3:コマンドを実装する
ナイーブソリューションとは何ぞや?
GitHub Gist のコードをブログへ埋め込むいろいろな方法
WPF + MVVM の勉強2:プロパティの変更通知を実装する
WPF + MVVM の勉強1:データバインディング
blockdiagのインストール
デリゲートとイベントの違い
►
8月
(6)
►
7月
(14)
►
6月
(14)
►
5月
(11)
►
4月
(10)
►
3月
(2)
►
2015
(23)
►
12月
(4)
►
11月
(2)
►
10月
(8)
►
9月
(8)
►
7月
(1)
►
2013
(3)
►
11月
(1)
►
9月
(1)
►
7月
(1)
►
2012
(2)
►
7月
(1)
►
6月
(1)
►
2011
(1)
►
9月
(1)
►
2009
(1)
►
7月
(1)
►
2008
(2)
►
11月
(1)
►
7月
(1)
►
2007
(3)
►
10月
(3)