WPFで実践アプリ開発！ 第二章 UI

1. WPFで実践アプリ開発！ 第二章 UI Ryosuke Uchiyama step63r
2. Windowsプログラミングの変遷 • Win32 API • C/C++向けのWindows GUI開発ライブラリ • 大規模なアプリケーション開発は大変で、難易度も高い • Microsoft Foundation Class（MFC） • C++向けのWin32 APIラッパークラス群 • 依然として仕様が難解で、あんまり知名度が上がらなかった（らしい） • Microsoft .NET Framework • WindowsアプリやWebアプリの開発・実行環境 • 共通言語基盤（Common Language Interface: CLI）の、MS自身の実装（Common Language Runtime: CLR）を保証 • WinForms, WPF, UWP（WinRT）など多くのUIライブラリ、プログラミングモデルを確立 • .NET Core • クロスプラットフォームマネージソフトウェアフレームワーク（長い） C++ C++ VB C# VB C# 時代はネイティブからマネージへ 前 回 の あ ら す じ
3. これからどうなる？Windowsプログラミング 前 回 の あ ら す じ
4. データバインドに特化したUIフレームワーク XAMLデザイナー コードビハインド 前 回 の あ ら す じ
5. これから作っていくもの
6. ToDoWpf • やることリストを表示するアプリケーション • 「やること」を追加、削除、編集する機能 • 期日や優先度でソートする機能 • 期限切れを可視化する機能 • 通知領域に常駐する機能 • 詳細メモを登録する機能 • and so on...
7. ソースコード step63r/ToDoWpf https://github.com/step63r/ToDoWpf
8. UIを実装する #84c500a MVVM化する #bda66d5 タスクの保存機能を実装する #eac821a タスクの削除機能を実装する #6ee9fba タスクをモデル化する #ef5baef 期限や優先度を可視化する #6c7e455 常駐機能を実装する #e9da2b9 ウィンドウ設定を保存する #e39d551 詳細メモを登録できるようにする #9e734f9 step63r/ToDoWpf コードビハインドで最低限のロジックを実装する #91176b6
9. UIを実装する #84c500a MVVM化する #bda66d5 タスクの保存機能を実装する #eac821a タスクの削除機能を実装する #6ee9fba タスクをモデル化する #ef5baef 期限や優先度を可視化する #6c7e455 常駐機能を実装する #e9da2b9 ウィンドウ設定を保存する #e39d551 詳細メモを登録できるようにする #9e734f9 step63r/ToDoWpf コードビハインドで最低限のロジックを実装する #91176b6
10. イベント駆動型の欠点 • データの状態遷移が把握しづらい • データをUI（コントロール）へセットする行が多くなりがち • テストが自動化しにくい • コードビハインドで色々やりがち→バグの温床👻 • UIスレッドで重い処理をやると死ぬ • UIスレッド以外からUI要素を弄ると死ぬ
11. UIスレッド以外からUI要素を弄ると死ぬ private void btnInputTask_Click(object sender, RoutedEventArgs e) { Task.Run(() => { lbTasks.Items.Add(tbInputTask.Text); tbInputTask.Text = string.Empty; }); }
12. MVVM (Model-View-ViewModel)
13. UIとロジックを分離するためのソフトウェアアーキテクチャパターン • Model • アプリケーションのデータと手続き（ビジネス ロジック）を表現する • Modelの情報はViewModelを介してViewへ伝達 される • Model自身はViewの描画を知らない（知る必要 がない） • View • UIへの入力とUIからの出力を担当する • ViewModelに含まれたデータをデータバイン ディング機構などによって自動的に描画する • Viewそのものに複雑なロジックは含まない • ViewModel • ViewとModelの間の情報伝達を担当する • ViewModelの変更は自動的にViewへ反映される
14. ViewModel基底クラスの実装 public abstract class ViewModelBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void RaisePropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new ProperthChangedEventArgs(propertyName)); } }
15. コマンドの実装 public class RelayCommand : ICommand { private Action _action; public RelayCommand(Action action) { _action = action; } public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return _action != null; } public void Execute(object parameter) { _action?.Invoke(); } }
16. そんなことをしなくても… Prism Library MVVM Light Toolkit Livet Catel
17. UIを実装する #84c500a MVVM化する #bda66d5 タスクの保存機能を実装する #eac821a タスクの削除機能を実装する #6ee9fba タスクをモデル化する #ef5baef 期限や優先度を可視化する #6c7e455 常駐機能を実装する #e9da2b9 ウィンドウ設定を保存する #e39d551 詳細メモを登録できるようにする #9e734f9 step63r/ToDoWpf コードビハインドで最低限のロジックを実装する #91176b6
18. Appendix
19. 参考文献 • Windows Presentation Foundation - Wikipedia • 連載：WPF入門 - ＠IT • Model View ViewModel – Wikipedia