[WPF] Grid 레이아웃과 Col, Row를 이용해서 WPF의 윈도우 레이아웃 짜기

개인적으로 WPF를 이용해서 간단한 윈도우 응용 프로그램을 만들어 보고 있는데, 여기서는 레이아웃을 XAML로 작성한다. 국내에는 WPF 관련한 자료가 많은 편은 아니고, 닷넷은 아무래도 MSDN 문서가 많은 걸 알려주어서 애용하는 편이다.

https://docs.microsoft.com/ko-kr/dotnet/framework/wpf/controls/how-to-create-a-grid-element?

Grid 레이아웃을 다루는 기초적인 방법으로, Grid.RowDefinitons, Grid.ColDefinitions을 이용해서 행과 열의 개념을 가진 표(Table)처럼 레이아웃을 다루는 방법이 있다.

픽셀(px)를 이용하는 절대적인 크기가 아니라 상대적인 크기 비율만 조정하고 싶을 때는 *을 이용한다.

병합을 이용해서 열이 여러 개일 필요가 없는 레이아웃에는 ColSpan을 적용하면 된다.

실습을 위해서 계산기의 레이아웃을 한번 짜봤다.

깃허브 주소

https://github.com/Twinparadox/Self-Study/blob/master/WPF/Calculator/Calculator/MainWindow.xaml

소스 코드

<Window x:Class="Calculator.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:Calculator"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="500">
    <Grid x:Name="grid">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label
            Grid.ColumnSpan="5" Content="0" HorizontalContentAlignment="Right" VerticalAlignment="Bottom"
            Height=""/>
        <Button Content="%" Grid.Row="1" Grid.Column="0" x:Name="buttonPercent"/>
        <Button Content="C" Grid.Row="1" Grid.Column="1" x:Name="buttonESC"/>
        <Button Content="CE" Grid.Row="1" Grid.Column="2" x:Name="buttonDelete" Click="buttonDelete_Click"/>
        <Button Content="Back" Grid.Row="1" Grid.Column="3" x:Name="buttonBack"/>
        <Button Content="/" Grid.Row="1" Grid.Column="4" x:Name="buttonDevide"/>

        <Button Content="Root" Grid.Row="2" Grid.Column="0" x:Name="buttonRoot"/>
        <Button Content="7" Grid.Row="2" Grid.Column="1" x:Name="button7"/>
        <Button Content="8" Grid.Row="2" Grid.Column="2" x:Name="button8"/>
        <Button Content="9" Grid.Row="2" Grid.Column="3" x:Name="button9"/>
        <Button Content="*" Grid.Row="2" Grid.Column="4" x:Name="buttonMutiple"/>

        <Button Content="Square" Grid.Row="3" Grid.Column="0" x:Name="buttonSquare"/>
        <Button Content="4" Grid.Row="3" Grid.Column="1" x:Name="button4"/>
        <Button Content="5" Grid.Row="3" Grid.Column="2" x:Name="button5"/>
        <Button Content="6" Grid.Row="3" Grid.Column="3" x:Name="button6"/>
        <Button Content="―" Grid.Row="3" Grid.Column="4" x:Name="buttonMinus"/>

        <Button Content="Cube" Grid.Row="4" Grid.Column="0" x:Name="buttonCube"/>
        <Button Content="1" Grid.Row="4" Grid.Column="1" x:Name="button1"/>
        <Button Content="2" Grid.Row="4" Grid.Column="2" x:Name="button2"/>
        <Button Content="3" Grid.Row="4" Grid.Column="3" x:Name="button3"/>
        <Button Content="+" Grid.Row="4" Grid.Column="4" x:Name="buttonPlus"/>

        <Button Content="1/x" Grid.Row="5" Grid.Column="0" x:Name="buttonDivideX"/>
        <Button Content="±" Grid.Row="5" Grid.Column="1" x:Name="buttonPM"/>
        <Button Content="0" Grid.Row="5" Grid.Column="2" x:Name="button0"/>
        <Button Content="." Grid.Row="5" Grid.Column="3" x:Name="buttonDot"/>
        <Button Content="=" Grid.Row="5" Grid.Column="4" x:Name="buttonEqual"/>
    </Grid>
</Window>

간단한 레이아웃을 짤 때는 그리드 레이아웃을 이용하는 것도 하나의 방법이다. 레이아웃이 다소 복잡해져서 병합에, 병합을 거듭해야 하는 상황이면 조금 다르겠지만 간단한 컨트롤 몇 개 들어가는 정도라면 문제 없을 것 같다.