WPF とことんきそる
WPF とこきそ
参考url http://msdn.microsoft.com/ja-jp/windows/cc811507.aspx
勝手に孤独に始まりました。wpfとこきそもうクラス多すぎで見るきもしないリファレンスなんですが
ゆっくりとやってみます。
崩れないレイアウト
XAMLのレイアウト機能を記事に沿って独断と偏見にみちた読解をしていきます。
まず最初は基本の 幅 高さ 余白 縦揃え 横揃えの方法
記事中では Ellipse(楕円)を使用しています。のでこちらはRectangle(四角)でやってみます。
| Rectangle | 要素 |
| Fill | 塗りの色 |
| Width | 四角の幅 |
| Height | 四角の高さ |
<Rectangle Fill="Aqua" Width="200" Height="150" />
青四角！この辺は、.NETやJAVA知ってる人なら見ただけで理解できるし知らない人でも英語がわかれば
楽かなー。
次は、可変するウィンドウだとウィンドウの大きさに合わせたりする処理が必要になってくるんだけど
これがMargin要素を使用することでクリア。余白は、ウィンドウとRectangleとの間事らしい。
ちなみに 左 上 右 下 CSSと一緒。
<Rectangle Fill="Aqua" Width="200" Height="150" Margin="20,20,20,20" />
| Margin | ウィンドウとこの場合はRectangleの間の値 |
C#とかでやるんであればResizeingイベント等で処理しなくちゃいけなくてUIロジックが
汚くなったりしてたから依存関係という面でみたら格段に楽！
冒頭で書いた縦揃え 横揃えは、 HorizontalAlignment と VerticalAlignment要素を使用
自分はこの要素名がかっこよくてたまらん。Vertical・・Vertical!!巻き舌なら技名。
<"Aqua" Width="200" Height="150" Margin="20,20,20,20"
VerticalAlignment="Center" HorizontalAlignment="Stretch" />
これでバーティコォーも覚えた。ﾊﾞｰﾃｨｺｫ
うん。
で、今まで何も考えずに<Grid></Grid>で閉じられた中に書いてみたけどここで
やっと説明が。
Gridというのはレイアウトライブラリ。間違ってもバーティコォライブラリではない。
Grid というレイアウトライブラリがあります。HTML でいうとテーブルみたいなものです。
この Grid にはテーブルのように行や列を増やしたり幅を固定したり自動にしたりすることができます。
このコードでは左には固定の幅をもったメニュー、右にはウィンドウの大きさに合わせて大きさが変わるコンテンツというようなレイアウトを実現しています。
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Rectangle Fill="Blue" Margin="20,20,20,20" Grid.Column="0" /> <Rectangle Fill="Red" Margin="20,20,20,20" Grid.Column="1" /> </Grid>
簡単に言うと Grid というエリアを縦に区切り、左の列の幅は 200 で固定して
右の列の幅は自動的に変わるようになっています。
Grid を区切るには Grid.ColumnDefinitions という子ノードを追加し
孫ノードに ColumnDefinition というノードを追加することで実現できます。
ColumnDefinition の数を増やすことにより列を増やすことができます。
固定されている列と自動的に幅が変わる列の動きを分かりやすくする為に、左の列に青く塗った楕円形、右の列に赤く塗った楕円形を配置しています。
配置する列を指定するには配置したいノードの要素に Grid.Column を追加します。
Grid.Column の値は ColumnDefinition を記述した順番に 0、1、2．．．と指定します。
？？？<Grid.ColumnDefinitions></Grid.ColumnDefinitions>これで子ノードを追加して・・
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
この2つで要素のWidth値を決めるの？いきなりちょっぴり無理指数が上がる。
えーと、孫の財産を勝手に保管場所を決めるって事？か・・？な？ちゃうね！
配置する列を指定するには配置したいノードの要素に Grid.Column を追加します
Grid.ColumnDefinitionのRectangleのGrid.Cokumnで指定する
で、<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
書いた順番にWidth値が150のColumnDefinitionが0番
Width値が"*"のColumnDefinitionが1番
なるへそ。
で、これを縦じゃなくて横区切りにするには
Column を Row に、Width を Height に変えるだけで実現できます
<ColumnDefinition Height="150"/>
<ColumnDefinition Height="*"/>
で孫ノードの要素の Grid.ColumnをGrid.Rowにしたらいいのか。
で記事が以外と展開が速い。あと独断と偏見に満ち満ちた意見なら縦割りはColumn.ｳﾞｧｰﾃｨｺｩ
順番に並べてくれるレイアウト StackPanel
<StackPanel Orientation="Vertical"> <Ellipse Fill="Blue" Width="300" Height="50" HorizontalAlignment="Left" /> <Ellipse Fill="Red" Width="300" Height="150" /> <Ellipse Fill="Green" Width="300" Height="100" HorizontalAlignment="Right" />
Orientation="Vertical"って何・・。リクリエーションなら知ってる。
と思ってたら、これはVertical！縦並べか。で案の定横並べは、Orientation="Horizontal"
うーん、判りやすい。将棋の枡とかオセロの枡とかならすぐに描写できそうだ。
将棋の横枡っていくつだ・・。
ちなみにStackPanelだと並べまくってエリアからはみ出すと表示されないが例えば
ブラウザや画面が小さい時に香車が表示されなくなったり角枡に黒があるの？白があるの？
ってことになる。
それじゃーこまんね？ってことでMS様は用意しておりました。
レイアウトライブラリ WrapPanel
勝手に改行 WrapPanel
なんかの漫画に似たようなのあったな・・。
ちょっと単純なコードの羅列なのでコピペ
<WrapPanel Orientation="Horizontal"< <Ellipse Width="50" Height="50" Fill="Red"/< <Ellipse Width="50" Height="50" Fill="Green"/< <Ellipse Width="50" Height="50" Fill="Blue"/< <Ellipse Width="50" Height="50" Fill="Red"/< <Ellipse Width="50" Height="50" Fill="Green"/< <Ellipse Width="50" Height="50" Fill="Blue"/< <Ellipse Width="50" Height="50" Fill="Red"/< <Ellipse Width="50" Height="50" Fill="Green"/< <Ellipse Width="50" Height="50" Fill="Blue"/< <Ellipse Width="50" Height="50" Fill="Red"/< <Ellipse Width="50" Height="50" Fill="Green"/< <Ellipse Width="50" Height="50" Fill="Blue"/< <Ellipse Width="50" Height="50" Fill="Red"/< <Ellipse Width="50" Height="50" Fill="Green"/< <Ellipse Width="50" Height="50" Fill="Blue"/< </WrapPanel<
例の如くOrientation="Horizontal これで横・縦で並べかえるわけか。
これなら香車が見えなくなることもないし、角枡に何が置かれているかわからなく
戦々恐々とオセロをやることもなくなる。ね。
投稿
0 件のコメント:
コメントを投稿