[WPF] WPF Grid 패널 사용 방법

안녕하세요.

 

오늘은 WPF Gird 패널 사용 방법에 대해서 알려 드리려고 합니다.

 

제가 요새 개인적으로 WPF를 기초부터 하나하나 공부중인데요. 오늘은 레이아웃 그 중에서도 가장 기본이면서 제일 중요한 Gird 패널 사용방법을 익혀 보려고 합니다.

 

공부 방법은 그냥 이렇습니다.

 

윈도우 탐색기 혹은 용량 확인량의 UI를 보고 거진 비슷하게 한번 만들어 보자 생각하면서 그리드 영역을 나누고 그려주면 됩니다.

 

다른 완성된 프로젝트를 보면서 레이아웃 연습해도 많이 도움이 되니 참고하시면 좋을 듯 합니다.

 

저는 참고로 요새 에듀캐스트 강좌를 듣고 있고, 오늘 예제 코드는 에듀캐스트 WPF 강좌에서 배운 내용을 복습한 것입니다.

 

Xaml 코드

<Window x:Class="LayoutTest.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:LayoutTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="400">
    <Grid ShowGridLines="False" Margin="10" Background="Beige">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
 
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
 
        <Rectangle Fill="#ffffff" Grid.Row="0" Grid.Column="0"
                   Grid.RowSpan="8" Grid.ColumnSpan="3"/>
 
        <Label Grid.Row="0" Grid.Column="0" Content="종류:"/>
        <Label Grid.Row="0" Grid.Column="1" Content="로컬디스크"/>
 
        <Label Grid.Row="1" Grid.Column="0" Content="파일시스템:"/>
        <Label Grid.Row="1" Grid.Column="1" Content="NTFS"/>
 
        <Rectangle Grid.Row="2" Grid.ColumnSpan="3" Height="1" Fill="Black"/>
 
        <Label Grid.Row="3" Grid.Column="0" Content="사용중인 공간:"/>
        <Label Grid.Row="3" Grid.Column="1" Content="123,456,789 바이트"/>
        <Label Grid.Row="3" Grid.Column="2" Content="123GB"/>
 
        <Label Grid.Row="4" Grid.Column="0" Content="사용가능 공간:"/>
        <Label Grid.Row="4" Grid.Column="1" Content="123,456,788 바이트"/>
        <Label Grid.Row="4" Grid.Column="2" Content="123GB"/>
 
        <Rectangle Grid.Row="5" Grid.ColumnSpan="3" Height="1" Fill="Black"/>
 
        <Label Grid.Row="6" Grid.Column="0" Content="용량:"/>
        <Label Grid.Row="6" Grid.Column="1" Content="123,456,788 바이트"/>
        <Label Grid.Row="6" Grid.Column="2" Content="123GB"/>
 
        <Rectangle Grid.Row="5" Grid.ColumnSpan="3" Height="1" Fill="Black"/>
 
        <Grid Grid.Row="9" Grid.Column="0" Grid.ColumnSpan="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
 
            <Button Grid.Column="1" Content="확인" Margin="2"/>
            <Button Grid.Column="2" Content="취소" Margin="2"/>
            <Button Grid.Column="3" Content="적용" Margin="2"/>
        </Grid>
    </Grid>
</Window>
 

 

실행 결과

 

 

위와 같이 Grid 컨트롤을 이용하여 행과 열을 다루면서 내가 원하는 위치에 자유롭게 다양한 컨트롤들을 배치해 보았습니다.

 

감사합니다.^^