VS2012を使ってXAMLをデザイン！その１ - C#でプログラミングあれこれ

ちょっとRxを離れてVisual Studio2012を使ったユーザーコントロールの設計を説明するよ！
こういうのって我流だと中々身につかないことが多いけど、関西勉強会仲間のみつばたん(id:c-mitsuba)にExpression Blend勉強会でいろいろ教えてもらったんで、それをおすそわけ。

Expression Blend勉強会
http://cafe-blend.hatenablog.com/

ここでやるのは、正式名称なんて言うのか知らないけどGUIデザイン画面でよくある、対象図形のリサイズと移動をするためにハンドルがついた枠のデザインを作る手順。（なんて正式名称なんていうのかしらね？）
最終形は↓こんな感じ。（一応デザインはダサい仕上げにしています・・・いやいや負け惜しみとかではなく、たぶん）

順番に行きます。
１．まずはユーザーコントロールの作成

ソリューションエクスプローラのプロジェクト上で右クリックからのユーザーコントロールの作成。
名前は何でも良いけどここではShapeFrameにしてみました。

それで↓こういう感じのスケルトンが生成されます。

２．ベースのグリッドを９分割にする
XAMLのコード上のGridが選択されている状態で、デザイン画面上にマウスカーソルを持っていくとオレンジ色のナイフ線が出ます。

で、よりVS2012を使いこなす感じで言うならば、ドキュメントアウトラインのウィンドウを開いてXAMLのアウトライン上でGridを選ぶ方が良いです。

※XAML直でも全然問題ない。

で、オレンジのナイフ線が良い感じの幅になった時にクリックしてザクっと切る。

同じ要領で、縦線をもう１本と水平線を２つ切る。

その時点でXAMLのコードは

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="19*"/>
        <RowDefinition Height="260*"/>
        <RowDefinition Height="21*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="16*"/>
        <ColumnDefinition Width="267*"/>
        <ColumnDefinition Width="17*"/>
    </Grid.ColumnDefinitions>

</Grid>

↑こんな感じになってると思います。数値はだいたいで良いです。
それを、少し数値を整えます。切った幅を15にそろえて、かつ*（アスタリスク）を外す。*つきの真ん中の数値を300にする。
要するに切った幅を15ピクセル固定にして、間の幅を初期値300ピクセルで収縮可能にします。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="15"/>
        <RowDefinition Height="300*"/>
        <RowDefinition Height="15"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="15"/>
        <ColumnDefinition Width="300*"/>
        <ColumnDefinition Width="15"/>
    </Grid.ColumnDefinitions>
</Grid>

３．４隅にハンドルを追加していく。
Gridが選択されている状態で、ツールボックス中のRectangleをダブルクリックします。

で、こうなる。

結構わけのワカラン位置にデフォルトの変な属性つきで、好き勝手に自己主張する形でRectangleが産み落とされる。ハミ出しまくってるしね。

この後の手順がCafe Blend勉強会で教えてもらって自分的にメッチャ役に立ったところ。無駄にXAMLを直接編集する機会がメチャ減った。
今産み落とされた野生のRectangleをVS2012のプロパティ画面で調整していく。
草むらから飛び出してきたばっかりの野生のRectangleは↓こんな感じのはずで、注目するのはレイアウトグループのプロパティ

それを６カ所だけ変更する。

そしたら↓こんな見た目に！

※デフォルト値が省略されるんで、XAMLの記述もすっきり。

理屈的にはGrid(格子）なので、３ｘ３のマス目になってる。左上が0,0で右下が2,2。蛇足ながらど真ん中の広いところが1,1になる。
で、CSSのグリッドレイアウトとかHTMLのTABLEタグと同じようにCOLSPANとROWSPANでセルのマージ（結合）が表現出来る。

１つ目のRectangleはRow=0,Col=0に配置されたんやけど、それぞれがデフォルト値なんで省略されて

<Rectangle Fill="#FFF4F4F5" Stroke="Black"/>

になってるけど、冗長に書くなら

<Rectangle Fill="#FFF4F4F5" Stroke="Black" Grid.Row="0" Grid.Column="0"/>

になる。
ここまで左上隅にハンドルを置けたことになる。続いて右下隅に配置してみる。

このままだと見た目的にちょっとよくわからないんで、アバンギャルドに色付けしてみる。
プロパティのブラシブロックを開いて、ちょっちょっと直す。

したら、XAMLは↓こんな感じ。

※この辺はXAML直のが早い？だけど、GUIで編集する癖を身体に覚えさせるのも大事なのです。

ここで試しに動かしてみよう！
まず、１度ビルドしてみる。コードを書いていないのでコンパイルエラーが出る可能性はゼロなので安心です。
ユーザーコントロールのタブからMainWindow.xamlのタブに移動して、ツールボックスを見るとShapeFrameコントロールができているはず。

で、MainWindowを選択した状態でShapeFrameコントロールをダブルクリックすると野生のShapeFrameが配置されます。

クチャクチャってなってるんで、良い感じのサイズに並べなおす。

で、実行！

千里の道も１歩から。ステップバイステップで。
VS2012は相当高機能になっています、直観的なインターフェースであるからいきなりでも何とかなる領域も多いんですがこういうデザインなどは我流ではハードルが高い面もあるかと思います。

長くなってきたのでわけます。つづく。