かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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 ストアアプリの画面作成が捗りますね!!