Computer Science/Etc

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

TwinParadox 2018. 12. 16. 19:56
728x90

개인적으로 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을 적용하면 된다.

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




계산기 - Grid 레이아웃





깃허브 주소

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>




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









728x90