XAML + C# で開発するときのVisual Studio 2013( と Blend) の便利機能

2013/01/18 めとべや東京 #3大田　一希

自己紹介

名前– 大田　一希 ( おおた　かずき )– かずき

おしごと– 都内で SIer. Java, C# etc…

プライベート– Twitter @okazuki– ブログ かずきの Blog@hatena

http://okazuki.hatenablog.com/(WPF, C#, Rx, Java, のちの自分のためのメモ )

注意事項

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

もくじ

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

VS2013 で強化された機能の全体像

@tanaka_733 さんの「 New Features in Visual Studio 2013 」を参照のこと– https://speakerdeck.com/tanaka733/new-features-in-visual-studio-2013

– ただし Ultimate に限るもチラホラ CodeLens コードマップによるデバッグ etc…

今回のターゲットと目標

「※ただし Ultimate のみ」の機能は除外

ストアアプリを開発してて、知っとくと便利という機能にフォーカス

１つくらい実践で使ってみようかなという機能に出会ってもらう

コードエディタの改善点

XAML のインテリセンス

以下の要素でインテリセンスが強化されています– StaticResource– Binding– Style の Property

StaticResourceの ResourceKeyやBindingの Pathにインテリセンスが効く

定義へ移動（ ResourceKey ）

XAML でも利用可能に– ショートカット： F12

ResourceKeyから該当するリソースの定義へ移動

定義へ移動（ XAML のタグ）

XAML でも利用可能に– ショートカット： F12

XAMLから該当するクラスのオブジェクトブラウザへ移動

定義へ移動（ Binding の Path ）

XAML でも利用可能に– ショートカット： F12

Bindingの Pathから該当するプロパティへ移動

コードスニペット

C# ではお馴染み– 組み込みのコードスニペットの例： prop

public int Hoge { get; set; }

– 自作例： mvvmpropprivate int hoge;public int Hoge{ get { return hoge; } set { this.Set(ref hoge, value); }}

コードスニペット (XAML)

XAML でのコードスニペット– C# みたいにショートカットうって tab tab で展開はされない。– Ctrl + K, S(Ctrl + K, X) でコードスニペット挿入

手軽に使うにはちょっとつらい…

コードスニペットの作り方

ありものを参考にして作るのが簡単– ツール→コードスニペットマネージャ

元にするスニペットを選ぶ

1パスをコピーする

2

コードスニペットの作り方

既存のファイルと、 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 ：コードスニペットで挿入するコードを書く

コードスニペットのインポート

作成した ****.snippet をコードスニペットマネージャで該当の言語を選択してインポート

エディタで Ctrl+K, X （ Ctrl+K, S) で使用

XAML のコードスニペット所感

手書き XAML で気持ちよく使うのは辛そう– プロジェクトで固定の定型句

（これも ItemTemplate にしたほうが幸せかもしれない）– もう少し大規模な定型のパネル

（ UserControl やテンプレートコントロールにしたほうが幸せかもしれない）

コードエディタの改善点まとめ

定義へ移動

インテリセンスの強化– リソースキー– Binding のパス– タグ

コードスニペット– ちょっと使いどころが難しい

サンプルデータ

Blend で使えるアレ

データウィンドウから作成できる

XAML

クラス

JSON もサンプルデータに使えるようになりました

JSON 形式のデータを作成（ T4 テンプレートあたりで作ると簡単）

クラスを生成

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

Page クラスの d:DataContext に設定

Source に JSON へのパス、 Type に対応するクラスを指定する

d:DataContext="{d:DesignData Type=JsonDataSource:Rootobject, Source=/SampleData/JsonDataSource/JsonDataSource.json}"

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

サンプルデータ

JSON 形式が利用可能になりました– 以下のようなフローが可能に

JSON でデータをざっくりつくる T4 テンプレートでそれなりの量のデータにする JSON からクラスを作成する d:DataContext={d:DesingData …}

うれしいこと– d:DataContext を指定することで、 Binding のインテリセンスが効くようにな

る– データの作成も割と容易（ XAML でテストデータ作るより楽（主観））

かなしいこと– 日本語が使えない・・・

最後にお知らせPrism for Windows Runtime

Windows 8.1 対応してました

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/

基本的に 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-baae-a9bce4cf60c7

まとめ

まとめ

細かな使い勝手向上– インテリセンス– コードスニペット– サンプルデータ

JSON サポート

– 細かいところですが、きちんと進化していってる。

Prism for Windows Runtime も、今ストアアプリ開発をするなら悪くない選択肢だと思うので検討をしてみてもいいと思います。