2014/01/18のめとべや東京 3での発表資料です

1. XAML + C#で開発するときの
Visual Studio 2013(とBlend)の
便利機能
2013/01/18 めとべや東京 #3
大田 一希

2. 自己紹介

名前
– 大田 一希(おおた かずき)
– かずき

おしごと
– 都内でSIer. Java, C# etc…

プライベート
– Twitter @okazuki
– ブログ かずきのBlog@hatena
http://okazuki.hatenablog.com/
(WPF, C#, Rx, Java, のちの自分のためのメモ)

3. 注意事項

記載の内容は個人の見解であり、所属する企業を代表するもの
ではありません。

4. もくじ

XAML + C#開発のVS2013便利機能
–
–
–
–
–
–
VS2013で強化された機能の全体像
今回のターゲット
コードエディタ関連の便利機能
サンプルデータ
お知らせ
まとめ

5. VS2013で強化された機能の全体像

@tanaka_733さんの「New Features in Visual Studio 2013」
を参照のこと
– https://speakerdeck.com/tanaka733/new-features-in-visual-studio-2013
– ただしUltimateに限るもチラホラ
CodeLens
 コードマップによるデバッグ
 etc…


6. 今回のターゲットと目標

「※ただしUltimateのみ」の機能は除外

ストアアプリを開発してて、知っとくと便利という機能に
フォーカス

１つくらい実践で使ってみようかなという機能に出会ってもら
う

7. コードエディタの改善点

8. XAMLのインテリセンス

以下の要素でインテリセンスが強化されています
– StaticResource
– Binding
– StyleのProperty
StaticResourceのResourceKeyや
BindingのPathにインテリセンスが効く

9. 定義へ移動（ResourceKey）

XAMLでも利用可能に
– ショートカット：F12
ResourceKeyから該当する
リソースの定義へ移動

10. 定義へ移動（XAMLのタグ）

XAMLでも利用可能に
– ショートカット：F12
XAMLから該当するクラスの
オブジェクトブラウザへ移動

11. 定義へ移動（BindingのPath）

XAMLでも利用可能に
– ショートカット：F12
BindingのPathから該当する
プロパティへ移動

12. コードスニペット

C#ではお馴染み
– 組み込みのコードスニペットの例：prop
public int Hoge { get; set; }
– 自作例：mvvmprop
private int hoge;
public int Hoge
{
get { return hoge; }
set { this.Set(ref hoge, value); }
}

13. コードスニペット(XAML)

XAMLでのコードスニペット
– C#みたいにショートカットうってtab tabで展開はされない。
– Ctrl + K, S(Ctrl + K, X)でコードスニペット挿入

手軽に使うにはちょっとつらい…

14. コードスニペットの作り方

ありものを参考にして作るのが簡単
– ツール→コードスニペットマネージャ
2
1
パスをコピーする
元にする
スニペットを選ぶ

15. コードスニペットの作り方

既存のファイルと、MSDNを参考に頑張る
– MSDN:コード スニペットの作成
http://msdn.microsoft.com/ja-jp/library/ms165393(v=vs.100).aspx
– このタグだけ気を付けよう
Title：スニペットのタイトル。VS上で表示される。
 Author：自分にしておきましょう（Microsoftのままだとまずい）
 Shortcut：C#とかだと効果を発揮するけどXAMLだと意味はなさそう
 Literal：可変の場所を定義する

– ID：プレースホルダーのID
– Default：デフォルト値
– ToolTip：簡易的な説明文

Code：コードスニペットで挿入するコードを書く

16. コードスニペットのインポート

作成した****.snippetをコードスニペットマネージャで該当の
言語を選択してインポート

エディタでCtrl+K, X（Ctrl+K, S)で使用

17. XAMLのコードスニペット所感

手書きXAMLで気持ちよく使うのは辛そう
– プロジェクトで固定の定型句
（これもItemTemplateにしたほうが幸せかもしれない）
– もう少し大規模な定型のパネル
（UserControlやテンプレートコントロールにしたほうが幸せかもしれな
い）

18. コードエディタの改善点まとめ

定義へ移動

インテリセンスの強化
– リソースキー
– Bindingのパス
– タグ

コードスニペット
– ちょっと使いどころが難しい

19. サンプルデータ

20. Blendで使えるアレ

データウィンドウから作成できる
XAML
クラス

21. JSONもサンプルデータに使えるようになりました

JSON形式のデータを作成（T4テンプレートあたりで作ると簡
単）

22. クラスを生成

JSONをクラスとして貼り付ける
(編集メニューの形式を選択して貼り付けから)

23. Pageクラスのd:DataContextに設定

SourceにJSONへのパス、Typeに対応するクラスを指定する
d:DataContext="{d:DesignData
Type=JsonDataSource:Rootobject,
Source=/SampleData/JsonDataSource/JsonDataSource.json}"

24. インテリセンスが効いてデザイナでデータが見れ
る

25. サンプルデータ

JSON形式が利用可能になりました
– 以下のようなフローが可能に
JSONでデータをざっくりつくる
 T4テンプレートでそれなりの量のデータにする
 JSONからクラスを作成する
 d:DataContext={d:DesingData …}


うれしいこと
– d:DataContextを指定することで、Bindingのインテリセンスが効くように
なる
– データの作成も割と容易（XAMLでテストデータ作るより楽（主観））

かなしいこと
– 日本語が使えない・・・

26. 最後にお知らせ
Prism for Windows Runtime
Windows 8.1対応してました

27. Prism for Windows Runtime

Windows ストア アプリでの業務アプリ向けフレームワークが
Windows 8.1対応

リソース
– MSDN: Developing a Windows Store business app using C#, XAML, and
Prism for the Windows Runtime

http://msdn.microsoft.com/en-us/library/windows/apps/xx130643.aspx
– CodePlex: Prism for Windows Runtime

http://prismwindowsruntime.codeplex.com/
– NuGet
http://www.nuget.org/packages/Prism.StoreApps/
 http://www.nuget.org/packages/Prism.PubSubEvents/


28. 基本的にWindows 8の頃と変わらない

参考情報 めとべや東京 2013/7/6
– Prism for Wndows Rntime入門してみた
http://www.slideshare.net/okazuki0130/prism-for-windows-runtime-23964695
Flyout独自サポート消滅 → 8.1で追加されたFlyoutコントロール, SettingsFlyoutを使
おう
 SearchContractのサポートの消滅 → 8.1で追加されたSearchBoxコントロールを使おう


プロジェクトテンプレートを使うのが楽
– Prism for the Windows Runtime Templates (Win 8.1)
http://visualstudiogallery.msdn.microsoft.com/2a6c37e4-fe9a-4a93-baaea9bce4cf60c7

29. まとめ

30. まとめ

細かな使い勝手向上
– インテリセンス
– コードスニペット
– サンプルデータ

JSONサポート
– 細かいところですが、きちんと進化していってる。

Prism for Windows Runtimeも、今ストアアプリ開発をするな
ら悪くない選択肢だと思うので検討をしてみてもいいと思いま
す。