とあるサイトに書いてあったことが気になりました。

http://blogs.wankuma.com/unyora/archive/2009/05/26/173608.aspx

 

先日、わんくま勉強会が開催された際に中さんがいらっしゃったので直接疑問をぶつけてみました。

う→うつせみ

中→中さん

 

う「そういえば、WPFのレイアウトの基本がGridと書いてあったのをみたんですが」

中「うん。そうだよ」

う「利点というか、理由が思いつかないんですが」

中「ウインドウのサイズを最大化するときに、コントロールのサイズが変わるし。
　　それに、フォントサイズを変えたときにも有効ですよ」

う「フォントサイズを変更させるとは考えていませんでした。」

中「フォントサイズ変更の時にはスクロールさせるようにしておいて、
　　標準サイズの時にはスクロールせずに収まるようにしておくといいよ」

 

早速試してみました
（本当は自宅で日曜日に試して現在作成中のソースを書き換え中）

元々のソースは以下の通り
(XAMLのレイアウトエディタ（と表現していいのか）でドラッグアンドドロップ＋ぷち整形)

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Label Height="24" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,12,20,0" Name="textBox1" VerticalAlignment="Top" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,42,0,0" Name="label2" VerticalAlignment="Top" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,42,20,0" Name="textBox2" VerticalAlignment="Top" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,72,0,0" Name="label3" VerticalAlignment="Top" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,72,20,0" Name="textBox3" VerticalAlignment="Top" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,102,0,0" Name="label4" VerticalAlignment="Top" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,102,20,0" Name="textBox4" VerticalAlignment="Top" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,0,0,106" Name="label5" VerticalAlignment="Bottom" Width="120">Label</Label>
        <Label Height="24" HorizontalAlignment="Left" Margin="12,0,0,76" Name="label6" VerticalAlignment="Bottom" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,0,20,76" Name="textBox6" VerticalAlignment="Bottom" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,0,0,46" Name="label7" VerticalAlignment="Bottom" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,0,20,46" Name="textBox7" VerticalAlignment="Bottom" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,0,0,16" Name="label8" VerticalAlignment="Bottom" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,0,20,16" Name="textBox8" VerticalAlignment="Bottom" />
        <ComboBox Height="24" Margin="138,0,20,106" Name="comboBox1" VerticalAlignment="Bottom" />
    </Grid>
</Window>

実行画面

image image
リサイズ前 リサイズ後

（いつもは全部のコントロールを左上を起点に書き直してるんですけどね。）

 

さらに上記でフォントサイズを変更

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" FontSize="18" >
    <Grid>
        <Label Height="24" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,12,20,0" Name="textBox1" VerticalAlignment="Top" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,42,0,0" Name="label2" VerticalAlignment="Top" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,42,20,0" Name="textBox2" VerticalAlignment="Top" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,72,0,0" Name="label3" VerticalAlignment="Top" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,72,20,0" Name="textBox3" VerticalAlignment="Top" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,102,0,0" Name="label4" VerticalAlignment="Top" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,102,20,0" Name="textBox4" VerticalAlignment="Top" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,0,0,106" Name="label5" VerticalAlignment="Bottom" Width="120">Label</Label>
        <Label Height="24" HorizontalAlignment="Left" Margin="12,0,0,76" Name="label6" VerticalAlignment="Bottom" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,0,20,76" Name="textBox6" VerticalAlignment="Bottom" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,0,0,46" Name="label7" VerticalAlignment="Bottom" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,0,20,46" Name="textBox7" VerticalAlignment="Bottom" />
        <Label Height="24" HorizontalAlignment="Left" Margin="12,0,0,16" Name="label8" VerticalAlignment="Bottom" Width="120">Label</Label>
        <TextBox Height="24" Margin="138,0,20,16" Name="textBox8" VerticalAlignment="Bottom" />
        <ComboBox Height="24" Margin="138,0,20,106" Name="comboBox1" VerticalAlignment="Bottom" />
    </Grid>
</Window>


 

image image
フォントサイズ変更前 リサイズ変更後

 

レイアウトの崩れがしゃれにならないレベル。。。


ということでGridにしてみる。
（これはツールを使わず記述）

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="4" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="5" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="6" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="7" Grid.Column="0" />

            <TextBox Grid.Row="0" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="1" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="2" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="3" Grid.Column="1" Margin="2" />
            <ComboBox Grid.Row="4" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="5" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="6" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="7" Grid.Column="1" Margin="2" />
        </Grid>
    </ScrollViewer>
</Window>

ソース自体もかなり読みやすくなり、すっきり。で実行

image image
リサイズ前 リサイズ後

フォントサイズも変更

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" FontSize="18">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="4" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="5" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="6" Grid.Column="0" />
            <Label Content="Label" HorizontalAlignment="Right" Grid.Row="7" Grid.Column="0" />

            <TextBox Grid.Row="0" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="1" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="2" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="3" Grid.Column="1" Margin="2" />
            <ComboBox Grid.Row="4" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="5" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="6" Grid.Column="1" Margin="2" />
            <TextBox Grid.Row="7" Grid.Column="1" Margin="2" />
        </Grid>
    </ScrollViewer>
</Window>

実行してみると…

image image
リサイズ前 リサイズ後

スクロールバーが出るのが気になりますが、これに関してはウインドウサイズの変更で対応。

 

今までBlend等を使ってレイアウトをしていました。

中さんが「手で書いた方がいい」と言っていたのがよくわかりました。

 

こういう情報が戴けるから勉強会は楽しいんです。

楽しいついでにスピーカーをしてみませんか？（宣伝してみる）

下記スレッドでお待ちしております＾＾

福岡勉強会#08準備スレッド