WPFのGridとかStackPanelとかWrapPanelって何なんだぜ(^~^)?

ずぱーん(^~^) ぴゅふー(^q^) 公開下書き

前の話し

📖 WPFって何だぜ(^~^)?

気の早い人向け

📖 wpf-panels-practice - Git hub に上げたもの

今回の話し

ramen-tabero-futsu2.png
「 Grid とか StackPanel とか WrapPanel って何なんだぜ?」

kifuwarabe-futsu.png
「 Web系で言う テーブルレイアウトと リスト構造と フローレイアウトだな」

ohkina-hiyoko-futsu2.png
「 目で見なきゃ分かんないわよ」

📖 Panels Overview

ohkina-hiyoko-futsu2.png
「 👆 Microsoftの流儀だと レイアウトではなく パネルと呼ぶみたいだけど」

Grid

20210916wpf70a1.png

ramen-tabero-futsu2.png
「 👆 とりあえず 一番よく見かける Grid から説明しようぜ?」

20210916wpf71a1.png

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
    </Grid>

ramen-tabero-futsu2.png
「 👆 まず、行数、列数を決めるんだぜ。 列が先でも 行が先でも どっちでもいい」

kifuwarabe-futsu.png
「 まず それが分からない」

20210916wpf72a1.png

ramen-tabero-futsu2.png
「 👆 こうだぜ。 例えば……」

20210916wpf73.png

ramen-tabero-futsu2.png
「 👆 デザイナーに なんか グリッド(格子線)が引かれていて 数が振られていることに気づけだぜ」

ohkina-hiyoko-futsu2.png
「 1* って何なのよ! そんな 他で見たことのないような数の書き方 何なのよ!」

ramen-tabero-futsu2.png
「 WPFのこの画面でしか見たことないけど、比だぜ」

20210916wpf74a1.png

    <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>

ramen-tabero-futsu2.png
「 👆 行には Height(ハイト;高さ)、列には Width(ウィトゥス;横幅)を指定できるぜ」

20210916wpf75a1.png

ramen-tabero-futsu2.png
「 👆 数の末尾の * (アスタリスク)を外せば ピクセル指定ができるが、ここで注意してほしい」

20210916wpf76a1.png

ramen-tabero-futsu2.png
「 👆 Windowsのディスプレイ設定で 拡大が 150% になっていると、
XAML で幅 100 と指定すると 画面上でピクセルを数えると幅 150 pixel になってるぜ」

ohkina-hiyoko-futsu2.png
「 開発者みんなで ディスプレイの拡大率を 100% にしてないと 納品物のピクセル サイズが噛み合わないわよ。
拡大率 100% って、字が ちっちゃいし、 頭が ぶやーって ふらついて 目が しょぼしょぼ しちゃう」

📖 Windowsのディスプレイとモニター いまだ96DPIが基準

kifuwarabe-futsu.png
「 👆 分かりづら」

ramen-tabero-futsu2.png
「 ここで ちょっと ファイル名を変えるぜ。 MainWindow.xaml から Grid1Window.xaml へ。
気にするなだぜ」

20210916wpf77a1.png

        <Button Grid.Row="1" Grid.Column="2"
                Width="200" Height="100"
                Content="適当に置いたボタン"/>

ramen-tabero-futsu2.png
「 👆 Grid.Row で何行目か、 Grid.Column で何列目かを指定できるぜ。指定しなければ 0 だぜ。
数は 0 から始まるんで ややこしいな」

20210916wpf78a1.png

ramen-tabero-futsu2.png
「 👆 Auto って書くと サイズを指定するのではなくて、中に入っているものの大きさにフィットするぜ」

ohkina-hiyoko-futsu2.png
「 Auto って 何が自動なのよ! って ずっと思ってたのよね」

ramen-tabero-futsu2.png
「 多分 全体の長さから Auto は含まれてなくなると思うぜ。 1* とか 2* の比の対象から外れるんだと思うぜ」

kifuwarabe-futsu.png
「 とんがっているデザイナーでもなければ 一般人、事実上、 ガチガチに設計できなくて、微妙な位置にボタンがちょっぴり はみ出していて
それも完全再現しなければならないとき お父んが キレてるやつだろ」

ramen-tabero-futsu2.png
「 なんか センスで すっ と置かれてるやつ あるよな。
おお、グリッド 使えね、みたいな。 ただ グリッドにはまだ技がある。以下に説明を続けるから 習得しろだぜ」

Border

20210916wpf79a1.png

ramen-tabero-futsu2.png
「 👆 グリッドって プログラムを実行した画面で見えないから、 目に見える枠線である Border を置こうぜ。
行と列を指定しなかったときは 0行0列目 に置かれるぜ。 置かれているな」

20210916wpf80a1.png

ramen-tabero-futsu2.png
「 👆 [Ctrl] キーを押しながら マウス ホイールを回すと 拡大縮小してくれるぜ。
コードビハインドを表示してるとこ、なんか ダブル スクリーンみたいなとこの真ん中に 矢印とか タテボウ ヨコボウ みたいなアイコンがあるが
クリックして見ろだぜ。見やすい配置を選べだぜ」

ramen-tabero-futsu2.png
「 そして Grid.RowGrid.Column の指定を理解しろだぜ。 もうマスターしたな?」

kifuwarabe-futsu.png
「 👆 おう任せろだぜ」

Grid.RowSpan, Grid.ColumnSpan

20210916wpf81a1.png

ramen-tabero-futsu2.png
「 👆 Grid.RowSpan で行をぶち通すぜ。 Grid.ColumnSpan で列をぶち通すぜ」

kifuwarabe-futsu.png
「 Excel で悪名高い セル結合 かだぜ?」

ramen-tabero-futsu2.png
「 Excel は 表計算ソフトだぜ。 表計算ソフトで セル結合すると 計算できなくなって 悪名高いんだぜ。
グリッドのレイアウトでは 計算しないから 必要なら どんどん使えだぜ」

Gridのネスト

ramen-tabero-futsu2.png
「 ネスト、 日本語で言うと 入れ子(いれこ) は プログラミングで よく出てくる。 言葉を覚えておけだぜ」

20210916wpf82a1.png

        <!-- 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>

ramen-tabero-futsu2.png
「 👆 Grid の中に Grid を入れれる」

kifuwarabe-futsu.png
「 ルックスを凝り過ぎた 本棚だぜ」

ohkina-hiyoko-futsu2.png
「 超よく使うわよ 入れ子グリッドって。 美術を失敗したようなレイアウトを完全再現するために」

ramen-tabero-futsu2.png
「 隙間があれば 詰め込みたがる 空き面積有効活用マン っているよな」

kifuwarabe-futsu.png
「 プログラマーを苦しめる元凶だぜ」

20210916wpf83.png

ramen-tabero-futsu2.png
「 👆 これはまだ グリッド感 があるが、 ほとんどのレイアウトは ちょっと はみ出てるか、 ちょっと長さが足りてないんだぜ。
ずれてる、というのもある」

kifuwarabe-futsu.png
「 センスで すっ と置いてるからな」

ramen-tabero-futsu2.png
「 まだまだ 戦い方を 紹介していく。時間があれば」

何度でもクリック!→

むずでょ@きふわらべ第29回世界コンピューター将棋選手権一次予選36位

光速のアカウント凍結されちゃったんで……。ゲームプログラムを独習中なんだぜ☆電王戦IIに出た棋士もコンピューターもみんな好きだぜ☆▲(パソコン将棋)WCSC29一次予選36位、SDT5予選42位▲(パソコン囲碁)AI竜星戦予選16位

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

むずでょ@きふわらべ第29回世界コンピューター将棋選手権一次予選36位 の最近の記事