C#의 WPF는 최근 트랜드에 맞게 디자인과 코딩을 분리하려고 노력을 많이 하고 있습니다.

이번에는 디자인을 grid로 구성하여 창 크기 변경에 유연하게 처리하는 방식에 대해서 알아보겠습니다.

우선 디자인에 사용되는 xaml 코드를 다음과 같이 편집합니다.

<Window x:Class="Sample1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Sample1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="36"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Button x:Name="button" Content="Button" Click="button_Click" Grid.Column="0" Grid.Row="0"/>
        <Label x:Name="label" Grid.Column="1" Grid.Row="0" VerticalContentAlignment="Center"/>

    </Grid>
</Window>

우선 Grid 태그 안쪽에 Grid.ColumnDefinitions와 Grid.RowDefinitions 태그를 사용하여 행과 열을 미리 설정해둘 수 있습니다.

C# Window Form의 TableLayoutPanel과 HTML의 table 태그와 사용법이 비슷합니다.

행과 열을 설정하고 나면 각 컴포넌트에는 Grid.Column, Grid.Row 속성을 추가하여 배치를 할 수 있습니다.

위의 예제는 2*2 모양의 테이블이며 우측과 하단으로는 길이, 넓이가 *로 설정되어 가변 길이가 적용되어있습니다.

이렇게 하여 실행을 하여 버튼을 누르면 다음과 같은 결과가 나옵니다.