📖 wpf-panels-practice - Git hub に上げたもの
「 Grid とか StackPanel とか WrapPanel って何なんだぜ?」
「 Web系で言う テーブルレイアウトと リスト構造と フローレイアウトだな」
「 👆 Microsoftの流儀だと レイアウトではなく パネルと呼ぶみたいだけど」
「 👆 とりあえず 一番よく見かける Grid から説明しようぜ?」
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
「 👆 まず、行数、列数を決めるんだぜ。 列が先でも 行が先でも どっちでもいい」
「 👆 デザイナーに なんか グリッド(格子線)が引かれていて 数が振られていることに気づけだぜ」
「 1*
って何なのよ! そんな 他で見たことのないような数の書き方 何なのよ!」
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="6*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
</Grid>
「 👆 行には Height(ハイト;高さ)、列には Width(ウィトゥス;横幅)を指定できるぜ」
「 👆 数の末尾の *
(アスタリスク)を外せば ピクセル指定ができるが、ここで注意してほしい」
「 👆 Windowsのディスプレイ設定で 拡大が 150% になっていると、
XAML で幅 100 と指定すると 画面上でピクセルを数えると幅 150 pixel になってるぜ」
「 開発者みんなで ディスプレイの拡大率を 100% にしてないと 納品物のピクセル サイズが噛み合わないわよ。
拡大率 100% って、字が ちっちゃいし、 頭が ぶやーって ふらついて 目が しょぼしょぼ しちゃう」
📖 Windowsのディスプレイとモニター いまだ96DPIが基準
「 ここで ちょっと ファイル名を変えるぜ。 MainWindow.xaml から Grid1Window.xaml へ。
気にするなだぜ」
<Button Grid.Row="1" Grid.Column="2"
Width="200" Height="100"
Content="適当に置いたボタン"/>
「 👆 Grid.Row
で何行目か、 Grid.Column
で何列目かを指定できるぜ。指定しなければ 0 だぜ。
数は 0 から始まるんで ややこしいな」
「 👆 Auto
って書くと サイズを指定するのではなくて、中に入っているものの大きさにフィットするぜ」
「 Auto
って 何が自動なのよ! って ずっと思ってたのよね」
「 多分 全体の長さから Auto
は含まれてなくなると思うぜ。 1*
とか 2*
の比の対象から外れるんだと思うぜ」
「 とんがっているデザイナーでもなければ 一般人、事実上、 ガチガチに設計できなくて、微妙な位置にボタンがちょっぴり はみ出していて
それも完全再現しなければならないとき お父んが キレてるやつだろ」
「 なんか センスで すっ と置かれてるやつ あるよな。
おお、グリッド 使えね、みたいな。 ただ グリッドにはまだ技がある。以下に説明を続けるから 習得しろだぜ」
「 👆 グリッドって プログラムを実行した画面で見えないから、 目に見える枠線である Border
を置こうぜ。
行と列を指定しなかったときは 0行0列目 に置かれるぜ。 置かれているな」
「 👆 [Ctrl]
キーを押しながら マウス ホイールを回すと 拡大縮小してくれるぜ。
コードビハインドを表示してるとこ、なんか ダブル スクリーンみたいなとこの真ん中に 矢印とか タテボウ ヨコボウ みたいなアイコンがあるが
クリックして見ろだぜ。見やすい配置を選べだぜ」
「 そして Grid.Row
、 Grid.Column
の指定を理解しろだぜ。 もうマスターしたな?」
「 👆 Grid.RowSpan
で行をぶち通すぜ。 Grid.ColumnSpan
で列をぶち通すぜ」
「 Excel は 表計算ソフトだぜ。 表計算ソフトで セル結合すると 計算できなくなって 悪名高いんだぜ。
グリッドのレイアウトでは 計算しないから 必要なら どんどん使えだぜ」
「 ネスト、 日本語で言うと 入れ子(いれこ) は プログラミングで よく出てくる。 言葉を覚えておけだぜ」
<!-- 1行目と2行目の吹き抜け -->
<Grid Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="3">
<!-- 3行2列 -->
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<!-- 0行目 -->
<Border BorderThickness="8" BorderBrush="Bisque"/>
<Border Grid.Column="1" BorderThickness="8" BorderBrush="Maroon"/>
<!-- 1行目 -->
<Border Grid.Row="1" BorderThickness="8" BorderBrush="Peru"/>
<Border Grid.Row="1" Grid.Column="1" BorderThickness="8" BorderBrush="Sienna"/>
<!-- 2行目 -->
<Border Grid.Row="2" BorderThickness="8" BorderBrush="RoyalBlue"/>
<Border Grid.Row="2" Grid.Column="1" BorderThickness="8" BorderBrush="Turquoise"/>
</Grid>
「 超よく使うわよ 入れ子グリッドって。 美術を失敗したようなレイアウトを完全再現するために」
「 隙間があれば 詰め込みたがる 空き面積有効活用マン っているよな」
「 👆 これはまだ グリッド感 があるが、 ほとんどのレイアウトは ちょっと はみ出てるか、 ちょっと長さが足りてないんだぜ。
ずれてる、というのもある」
Crieitは個人で開発中です。
興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!