画面に複数アイテムをカスタマイズして出すなら、ユーザーコントロールを作ろう！

#wpdev_jp #win8dev_jp

さて、ユーザーコントロールを作ってみましょう。簡単です。今回はポラロイド写真カスタムコントロールです。

まずはホストとなるプロジェクトを作成。

 

プロジェクト＞新しい項目を追加＞ユーザーコントロールをえらんで、Polaroid と名付けましょう。MyUserControl1 はやめましょうね。ちなみにポラロイドの語源は偏光板(ポラライザー)とセルロイドの合成語らしいです。で、途中で気が付いたのですが全然ポラロイドではありませんでした。ごめんなさい

さぁできました。ユーザーコントロールの画面サイズは仮のものです配置してユーザーが変えられるにするかどうかも開発者次第です。画面設計も画面サイズが可変になることを想定して Grid でうまく作りましょう。

まずは影用のRectangle を配置します。

Margin の 左と上を30に設定して、HolizontalAlignment / VerticalAlignment を Stretch に、Width と Height は自動に設定 ボタンを押します。

ブラシのFillは黒にして、Strokeはなし、Opacity は 30%位にしておきましょう。

今度はImageを貼りつけます。

Margin の 右と下を30に設定して、HolizontalAlignment / VerticalAlignment を Stretch に、Width と Height は自動に設定 ボタンを押します。Margin の設定位置以外はRectangle と一緒です。

では、プロパティを作りましょう。 まずは画像を設定する ImageSource 型の ImgSource を作りましょう。

Ctrl-S でいったんXAML側を保存して、F7でコード画面に移ります。

クラスの下に場所を作って、ここで、 propdp と打ちます。

それから Tab x2 を打ちます。依存プロパティができました。簡単！

Int を ImagaSource に変えてやるとほかのところもすべて自動で変わります。すごい！

MyProperty を imgSource に変更しましょう。こちらも関連個所が自動で変わります。

最後に、最終行の ownerclass を今回のユーザーコントロールの親クラスである、Polaroid に変更します。OK！

 

Ctrl-Shift-B でいったんコンパイルして画面デザインに移ります。配置したImageコントロールを選択して、

 

バインドの種類は ElementName, 要素名は UserControl を選択します。カスタムにチェックを入れて、パスの欄にs先ほどの imgSourced を直接入力します。

imgSource に何も入っていないので変わりませんが、これでできたはず。Ctrl-Shift-Bでコンパイルして、MainPage.xamlに移動します。

ほら、ツールボックスのコントロールに Polaroid があるのでドラッグ&ドロップして配置します。さて、表示する画像を何でもいいので(jpg/png)プロジェクトに配置してください。追加したら Polaroid コントロールを選択して、imgSourceプロパティから画像を設定します。

あ、画像がいっぱいに表示されてないですね。UserControl の画面に行ってImage のStretch を UniformToFill にしておきましょう。

あとは、画面の背景が黒で影が見づらいので白にします。デバイスタブでテーマをライトに変えましょう。

うん。いい感じですね。

1個だけ使うなら、ユーザーコントロールはいりません。やっぱり複数使わないとね。

簡単でしょ？

コードは書いたけど、Propdp くらい？ 一番長く打ったのは ImageSource のクラス名かも。タイプ数なら30文字に満たない。

やっぱり Visual Studio 2012 はすごいです。