【Windowsデスクトップアプリ】WPFアプリ実装基本TIPS〜実務で使えるリンクまとめ〜

#WPFアプリ実装基本まとめ

はじめまして、渋谷でネイティブアプリエンジニアをしているYokiです👋
25才の2年目エンジニアとして働いています。

2018年2月〜6月ぐらいまでWindowsのデスクトップアプリを開発することがあり、その際に参考にしたものを
本記事ではまとめました。

誰かの参考になると幸いです😄

##基本事項  

・コントロールとはなんぞや
→ コントロールは、ユーザーとの対話を担う要素で、GUIアプリケーション開発の中心的存在といえる。コントロールは、マウスやキーボードなどのユーザー操作を受け取ったり、処理の途中経過や結果を適宜表示したりするために利用する。



・デバッグコードとして出力ウィンドウにメッセージを出力したいときは System.Diagnostics.Debug クラスを使う。
→ System.Console クラスの WriteLine() メソッドでも同様に出力ウィンドウにメッセージを出力させることができ ますが、こちらは Release モードでコンパイルしてもコードとして残ってしまうため、Release モードでもどこかにメッセージが出力されることになります。
コード上で "System.Diagnostics.Debug.WriteLine" と記述した後、"Debug" の部分にキーボードカーソルを置いてから F12 キーを押してみましょう。



##機能処理とかC#とかとか

・String, string あるけどどっち使うの問題
[みんな気になるC#のstringとStringの違い。](https://clickan.click/string-difference/)

・命名規約
[JavaとC#の命名規約まとめ （JavaプログラマーがC#でプログラムを書いて引っかかったところ　その３）](http://d.hatena.ne.jp/chiheisen/20110529/1306676847)

・Git Ignore設定
[git ignore](https://github.com/github/gitignore/blob/master/VisualStudio.gitignore) 

・リストビュー作成
[Add Items to Columns in a WPF ListView](https://stackoverflow.com/questions/15865829/add-items-to-columns-in-a-wpf-listview)

・リストにチェックボックスを配置する
[Add Items to Columns in a WPF ListView](https://stackoverflow.com/questions/45446916/c-sharp-wpf-create-checkboxes-for-each-item-in-listview)

・ファイル保存（今回はdbファイル持ってきたかったので参考にした）
[ファイルをダウンロードし保存する](https://dobon.net/vb/dotnet/internet/downloadfile.html)  

・APIのレスポンスからバイナリファイルを取得して保存する
[HttpClient でファイルを非同期でダウンロードする](http://posnum.hatenablog.com/entry/2014/10/13/160230)


``` 
string fileName = "test.db"
```
とかにすると、持ってきたファイルはプロジェクトないのbinフォルダ内に保存される。（デスクトップとかにファイル持つのを回避できる）

・API通信を Json.NET（ライブラリ） を使用してやってみる
[C#で気象情報REST API(WeatherHacks)を使ってみる](http://www.baku-dreameater.net/archives/8741)

・C#での using について
[C# でファイル開くなら using を使おう](http://yohshiy.blog.fc2.com/blog-entry-293.html)

・C#での同期/非同期プログラミングについて
[Async および Await を使用した非同期プログラミング (C#)](https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/concepts/async/)  

・通信処理でCookieをセットする方法について
>既定ではHttpClient内部のHttpClientHandlerによりCookieヘッダーは自動設定されます。このとき手動設定したCookieヘッダーは取り除かれるのでこのようなことが起こります。UseCookiesをfalseに設定したHttpClientHandlerをHttpClientのコンストラクタに与えることで、この自動設定を無効にすることができます。
var client = new HttpClient(new HttpClientHandler { UseCookies = false });
client.DefaultRequestHeaders.Add("Cookie", "name=value");
var response = await client.GetAsync("http://example.com/");  

・簡単なコールバック
[Fire callback after async Task method](https://stackoverflow.com/questions/19003594/fire-callback-after-async-task-method)  

・オブジェクト型を辞書型に変換する
[How to convert object to Dictionary<TKey, TValue> in C#?](https://stackoverflow.com/questions/11576886/how-to-convert-object-to-dictionarytkey-tvalue-in-c)
↑ IDictionary　の I　は消す必要あり  

・コレクション要素をグルーピングする
[LINQでn個ずつグルーピング](http://ichiroku11.hatenablog.jp/entry/2015/04/16/230309)  

.ビルド構成について
[VS.NETでデバッグ版／リリース版以外のビルド構成を追加するには？](http://www.atmarkit.co.jp/fdotnet/dotnettips/249addprojconf/addprojconf.html)

・構成マネージャー
[デバッグビルドでのみ特定のコードがコンパイルされるようにする
条件付きコンパイル定数を使用する](https://dobon.net/vb/dotnet/programing/define.html)

・Content-Type に boundary を入れたい時の対処
[Wrong Content-Type header generated using MultipartFormDataContent](https://stackoverflow.com/questions/21569770/wrong-content-type-header-generated-using-multipartformdatacontent?rq=1)  

・SQLiteをいじる（導入から入出力まで）
[SQLiteを使って環境設定からデータの保存・読み出しまで](http://dotnetcsharptips.seesaa.net/category/26325844-1.html)

・SQLiteにパスワードをつける
→ GDPR（EU一般データ保護規則）などのセキュリティ面を考慮して、DBなどの情報ファイルはちゃんと管理したいものです、、
で、例えばSQLiteをローカルに持つアプリならパスワードつけとこうぜって話です
[System.Data.SQLite の暗号化について](http://d.hatena.ne.jp/indication/20170228/1488283560)  

・CharlsをWindowsでもつかいたいよね
[Charles Proxy を利用したパケット情報の収集方法（Windows）](https://helpx.adobe.com/jp/x-productkb/global/how-to-get-packet-information-with-charles-jp-html.html)

・テキストボックスの入力制限について
[WPF テキストボックスの設定色々](http://tizio1976.blogspot.jp/2014/02/wpf.html)
[[XAML] WPF で IME (かな漢字変換) を切り替えるには (Windows フォームから WPF へ)]
[IME制御](http://vbegg.webcrow.jp/WPF/Introduction/Other/IMEs/IMEs.html)
(https://code.msdn.microsoft.com/windowsdesktop/XAML-WPF-IME-Windows-WPF-9ef457d7)

##困ったときの対処（エラー関係とか）

・名前空間がないだと!?
srcで名前空間設定したのにエラーがでるとき
[clr-namespace:[名前空間] に存在しません。](http://matsuura.0t0.jp/document/page?document=c7ad2e90f3a7f15706645a7f656496de)  
→ 確かにこれで（１個目の対応で）直るけど、一旦srcのところ（エラーが出ているところ）をコメントアウトしてビルド、コメントアウトしたところを元に戻すとエラー解消されていた

・アクセシビリティに一貫性がないだと!?
[アクセシビリティに一貫性がありません と言われる](http://var.blog.jp/archives/51984348.html)  

・オブジェクト参照がオブジェクト インスタンスに設定されていません。
[用語「オブジェクト参照がオブジェクト インスタンスに設定されていません。」について](http://bakera.jp/glossary/オブジェクト参照がオブジェクト%20インスタンスに設定されていません%E3%80%82)

##配布するときのあれこれ
・いい感じにまとまってる資料を探してここに行き着いた
[WPF アプリケーションの配布](http://c1.grapecity.com/help/web/common/c1studio/index.htm#!Documents/wpf3.htm)

・ClickOnceに関して
[WPF勉強(10) アプリ配布方法について ClickOnce編](http://yokuarunanika.blogspot.jp/2014/12/wpf10-clickonce.html)  
→　ClickOnceはなんか証明書とかややこしそう  

・インストーラーの作成
[VisualStudioInstallerの使い方](http://junkbox.wicurio.com/index.php?VisualStudioInstallerの使い方)

・XCOPY？
[.NET アプリケーションを XCOPY 配置で配布する](http://kuttsun.blogspot.jp/2017/11/net-xcopy.html)  
>XCopy ではバージョン管理、アンインストール、およびロールバックがサポートされず、それらをサポートするにはアプリケーション側で実装する必要があり、そんなことをするくらいならインストーラーを作成すべきだと思います。


##用語
・データコンテキスト
[【WPF基礎】脱WPF初心者のための基礎知識　その１～DataContextってなんぞ？～](http://inuinuwanwanilovecat.seesaa.net/article/395905033.html)
>「ｘｘｘオブジェクトが扱うデータはhogeオブジェクトが持っているので(データ環境の実体はhogeオブジェクト)、DataContextを通してアクセスする」
WPF では UI からプロパティが変更されたことはデータコンテキストに自動的に通知されますが、データコンテキストからプロパティが変更されたことは自動的には通知されません。つまり、MainViewModel側から明示的にプロパティ変更通知をおこなう必要があります。これは INotifyPropertyChanged インターフェースによって実現できる。

・コードビハインド
[参考](http://ufcpp.net/study/dotnet/wpf_xamlcode.html) 
イベント処理などのプログラムコードは、XAML中に記述するのではなく、 XAMLとは別ファイルにすることが可能です。 このように、XAML で記述した GUI のイベント処理などを別ファイルで与えることを コードビハインド（code-behind）といいます。

・ASP.NET 【 Active Server Pages .NET 】 ASPX  
ASP.NETとは、.NET Frameworkで提供されるWebサービス向けのクラスライブラリ。Windowsサーバ上でダイナミックなWebページを動作させるための基盤となるソフトウェアで、WebアプリケーションやWebサービスの開発・構築に用いられる。

##デザインとかとか


・フォントファイルを取り込んで使用する
[フォントをアプリケーションに埋め込む(Visual Studio編)](https://mediaforcelabs.g.hatena.ne.jp/coma2/20091028/1256745244)  

・リソースディクショナリーを使用して再利用ビューを作成する
[WPFサンプル:別XAMLに定義したリソースをMergedDictionaries で読みこむ](http://gushwell.ldblog.jp/archives/52291307.html)

・均等配置
[WPF 等間隔で横並びにする方法](https://teratail.com/questions/31514)

・ホバーアクションとか
[[WPF] マウスオーバー時のボタンのボーダーと背景色をデフォルトから変更する](http://gootara.org/library/2016/07/wpf-hvr.html)


・リソースから画像を読み込む方法
[[WPF/XAML] リソースから画像を読み込む](http://mithrilworks.jp/others/program/xaml/resource.html)

・windowリサイズ時のimageの挙動についてストレッチの設定に依存する
[Stretch 列挙型](https://msdn.microsoft.com/ja-jp/library/system.windows.media.stretch(v=vs.110).aspx)  

・リストボックスの中のitemTemplateを横幅いっぱいに設定するには 
[How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox?](https://stackoverflow.com/questions/838828/how-to-get-a-listbox-itemtemplate-to-stretch-horizontally-the-full-width-of-the?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)

スクロールバーのデザインをMacぽくしたいとき
[How to create Apple MacOS like Scrollbar in WPF](https://blog.jsinh.in/how-to-create-apple-macos-like-scrollbar-in-wpf/#.WrNcgmbANBw)
 
・用意する画像のパターンについて
↓　多分これ
[Using file or image resources (XAML)](https://docs.microsoft.com/en-us/previous-versions/windows/apps/hh965325(v=win.10))
  
・普通の画面遷移
[NavigationWindowを使った画面遷移](http://sourcechord.hatenablog.com/entry/20130831/1377942291)

・アプリアイコン
[アイコン](https://msdn.microsoft.com/ja-jp/library/aa511280.aspx)
>アプリケーション アイコンおよびコントロール パネルのアイテム: 16 × 16、32 × 32、48 × 48、256 × 256 でフル セットとなります。(コードで 32 ～ 256 に拡大縮小します)。.ico ファイル形式である必要があります。クラシック モードの場合、フル セットは 16 × 16、24 × 24、32 × 32、48 × 48 および 64 × 64 になります。

・マテリアルデザインキット
[参考](http://nineworks2.blog.fc2.com/?tag=MaterialDesignToolkit&page=6)

## UI参考リンク

・ライブラリを使用したDrawer & PopUp Menuの実装  
使用ライブラリ：[MaterialDesignInXamlToolkit](https://github.com/ButchersBoy/MaterialDesignInXamlToolkit)（MIT　ライセンス）  
→　アイコン、ポップアップメニューで利用  

[Youtube Navigation Drawer & PopUp Menu](https://www.youtube.com/watch?v=YQ1EJJZBHyE)

![スクリーンショット 2018-02-05 11.44.37.png](https://qiita-image-store.s3.amazonaws.com/0/138735/0529934b-9661-3a98-10a4-65018a07e75f.png)
![スクリーンショット 2018-02-05 11.44.50.png](https://qiita-image-store.s3.amazonaws.com/0/138735/d65ed645-4937-af2b-c91a-29e89f7dd31c.png)
![スクリーンショット 2018-02-05 11.44.59.png](https://qiita-image-store.s3.amazonaws.com/0/138735/6fdaba11-1875-9dbc-5ca4-85f70dec0b20.png)


・ライブラリを使用したハンバーガーメニューの実装  
使用したライブラリ：[HamburgerMenu](https://github.com/alicanerdogan/HamburgerMenu)  （MIT　ライセンス） 

![スクリーンショット 2018-02-02 18.15.16.png](https://qiita-image-store.s3.amazonaws.com/0/138735/5ff046d8-0a40-7fe5-21f8-e13aeec4e303.png)  
![スクリーンショット 2018-02-02 18.15.18.png](https://qiita-image-store.s3.amazonaws.com/0/138735/2f55af7b-fcda-99e9-4935-6aee3d6e00b8.png)

・グローバルメニュー  
[WPFサンプル:NavigationServiceを使ったページ遷移](http://gushwell.ldblog.jp/archives/52335648.html)  

![global1](http://livedoor.blogimg.jp/gushwell/imgs/3/c/3c295004.png)
![global2](http://livedoor.blogimg.jp/gushwell/imgs/1/9/1910e0f9.png)


・ダッシュボードライクな画面  

[Designing a Dashboard in WPF Visual C#](https://www.youtube.com/watch?v=jySYq5QJZes)


![スクリーンショット 2018-02-02 18.12.50.png](https://qiita-image-store.s3.amazonaws.com/0/138735/4636baa4-8fc2-103c-382f-dbf0e3625b96.png)