[C#] [WPF] Grid 나누기 (Definition) (Span)

WPF 프로그래밍을 하다 보면 Control을 적절히 분리하여 다른 Control들을 배치하여야 합니다.

이때 자주 사용하는 Control이 Grid입니다.

 

하지만 분리할 때에 단순히 Width, Height, Margin, Padding만을 사용한다면 안됩니다.

프로그램의 크기가 달라졌을 때나 변경사항이 생길 때 구조가 잡혀있지 않다면 굉장히 난감해지기 때문입니다.

(이 때문에 저는 ToolBox에서 Control들을 직접 Drag&Drop하여 Control들을 배치하지 않습니다.)

 

한 가지 예를 들어보겠습니다.

 

다음과 같은 프로그램이 있습니다.

해당 프로그램의 디자이너 코드는 다음과 같습니다.

<!-- MainWindow.xaml -->
<Window x:Class="WPF_Grid_Definition.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:WPF_Grid_Definition"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="600">
    <Grid>
        <Grid Width="400" Height="400" Background="red" Margin="192,0,0,169"/>

        <Grid Width="200" Height="200"  Background="Purple" Margin="392,0,0,369"/>

        <Grid Background="Aqua" Margin="0,200,200,0"/>

        <Grid Height="400" Background="Blue" Margin="0,0,400,169"/>

        <Grid Width="400" Background="Yellow" Margin="192,400,0,0"/>
    </Grid>
</Window>

.

이때 이 Window의 크기를 변경하거나 사용자가 임의로 크기를 변경하였을 때 아래 사진처럼 구조가 틀어져 버리게 됩니다.

Height="800" Width="1000" 으로 수정하였을 때 기존 형태가 사라져버리게 된다.

 

 

 

ColumnDefinition, RowDefinition

---

<!-- Window1.xaml -->
<Window x:Class="WPF_Grid_Definition.Window1"
        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:WPF_Grid_Definition"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/> <!-- Width="*" 과 같은 의미를 담고 있습니다. -->
        </Grid.ColumnDefinitions>
        <Grid x:Name="FirstGrid" Grid.Column="0" Background="Red"/>
        <Grid x:Name="SecondGrid" Grid.Column="1" Background="Orange"/>
        <Grid x:Name="ThirdGrid" Grid.Column="2" Background="Yellow"/>
        <Grid x:Name="FourthGrid" Grid.Column="3" Background="Green"/>
    </Grid>
</Window>

 

위 디자이너 코드의 결과는 아래 사진과 같습니다.

 

무지개떡 아닙니다.

위 코드를 해석하자면,

 

Grid의 Width 600중에 200은 FirstGrid, 나머지 남은 400을 2 : 1: 1 비율로 각각 SecondGrid, ThirdGrid, FourthGrid에게 할당해 주세요.

 

라는 의미와 같습니다.

 

 

Span

---

위의 예제에서 ColumnDefinition을 4개 선언한 뒤 4개의 Grid에게 Grid.Column을 이용하여 각각 지정해 주었습니다.

기본적으로 차례대로 Indexing이 되어 개수만큼 지정할 수 있습니다. 이때 한 Grid에게 두 칸을 지정해주고 싶을 때에 필요한 것이 Span입니다.

 

<!-- Window2.xaml -->
<Window x:Class="WPF_Grid_Definition.Window2"
        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:WPF_Grid_Definition"
        mc:Ignorable="d"
        Title="Window2" Height="450" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid x:Name="FirstGrid" Grid.Column="0" Background="Red"/>
        <Grid x:Name="SecondGrid" Grid.Column="1" Grid.ColumnSpan="2" Background="Orange"/>
        <Grid x:Name="FourthGrid" Grid.Column="3" Background="Green"/>
    </Grid>
</Window>

 

결과는 다음과 같습니다.

 

 

SecondGrid에게 Grid.CoulmnSpan 속성을 2로 지정하여 Column 1에서 2까지 총 2개의 Column을 지정하였습니다.

 

 

 

활용

---

맨 위에 위치한 디자이너 코드를 Definition과 Span을 활용하여 수정해보도록 하겠습니다.

 

<!-- MainWindow.xaml -->
<Window x:Class="WPF_Grid_Definition.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:WPF_Grid_Definition"
        mc:Ignorable="d"
        Title="MainWindow" MinWidth="400" Height="600" Width="600">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="red"/>

        <Grid Grid.Row="0" Grid.Column="2" Background="Purple"/>

        <Grid Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Aqua"/>

        <Grid Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Background="Blue"/>

        <Grid Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Background="Yellow"/>
    </Grid>
</Window>

결과는 다음과 같습니다.

처음 사진과 똑같은 형태를 띄고 있습니다. 하지만 이렇게 RowDefinition, ColumnDefinition 속성을 활용한다면 크기가 늘어나도 같은 비율을 유지할 수 있습니다.

 

 

 

전체 코드는 아래 링크에서 확인하실 수 있습니다.

github.com/Hyo-Seong/CHashtag/tree/master/WPF_Grid_Definition

Hyo-Seong/CHashtag