かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Blend for VS2013を使ってデザイン時のDataContextを設定する

Blend for Visual Studio 2013 RCでの情報です。

デザイン時DataContext

BlendやVisual Studioのデザイナがデータバインディングをするときにデータコンテキストに何があるのかを識別させてやると、プロパティ名とかが画面に表示されてとても捗ります。Blend for VS2012までは、このデザイン時DataContextの設定をするには、XAMLを直うちしなければいけませんでした。

例えば、App16という名前空間にあるMainPageViewModelを設定する場合は、以下の省略~省略の間のXAMLを手打ちです。手打ち。手打ちXAMLerにとってはお手のものですが、結構人に教えるときつらいです。

<Page
    ...省略...
    xmlns:local="using:App16"
    d:DataContext="{d:DesignInstance local:MainPageViewModel, IsDesignTimeCreatable=True}">
    ...省略...
</Page>

Blend for VS2013では、これがGUIで設定できます。素晴らしきかなGUI。

f:id:okazuki:20130930201649p:plain

  • データウィンドウを選択
  • デザイン時DataContextの設定を選択
  • DataContextに設定したい型を選択して
  • OKを押す

たったこれだけで、デザイン時DataContextが設定されます。

f:id:okazuki:20130930201941j:plain

データコンテキストを設定できたら、あとは画面にぽとぺたでバインディングを作れます。例えば何もないところい適当にプロパティをぽとっとすると…

f:id:okazuki:20130930202049j:plain

TextBlockが作成されます。TextBoxにぽとっと落そうとするといい感じにBindingしようとしてくれます。

f:id:okazuki:20130930202153j:plain

これで、Windows ストアアプリの画面作成が捗りますね!!