[WPF] WPF Grid 컨트롤 공유하는(Grid Shared) 방법

안녕하세요.

 

오늘은 WPF에서 Grid 컨트롤을 이용해서 그리드 컨트롤끼리 정보를 공유하는 방법에 대해서 알려 드리려고 합니다.

 

예를들어, Grid 컨트롤을 이용해서 Header 영역과 Data 영역을 나눠서 하나의 시트를 만든다고 가정을 했을 때 Header영역에 Grid 컨트롤이 있고, Data영역에도 Grid 컨트롤 2개가 있다고 해봅니다.

 

그럼 총 2개의 Grid 컨트롤이 있는데 각각의 Column의 Width는 서로 다른 객체의 Grid를 나타내고 있어서 서로 값이 동기화가 안되고..그러면 Header 영역과 Data 영역의 Column 사이즈가 서로 다른 현상이 나타나게 됩니다.

 

이럴 때 사이즈를 동기화 시켜줘서 서로 사이즈를 맞춰주는 방법이 있는데요. Grid Shared 라고 부르고 예제 코드를 통해서 어떻게 Grid Shared를 사용하는지 보여 드리도록 하겠습니다.

 

참고로 저는 에듀케스트 인강을 보면서 참고하면서 예제 코드를 작성하고 있다는 점 참고해 주세요~~

 

 

Xaml.cs

<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"
        Background="#efefef">
    
    <!--Header 영역-->
    <DockPanel Margin="10" Grid.IsSharedSizeScope="True">
 
        <Grid DockPanel.Dock="Top" Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="bookNumber"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" SharedSizeGroup="Publisher"/>
                <ColumnDefinition Width="Auto" SharedSizeGroup="Price"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
 
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
 
            <Border Grid.Column="0" Grid.Row="0" Background="Beige" BorderBrush="#afafaf" BorderThickness="1" Padding="5">
                <TextBlock Text="도서번호"/>
            </Border>
 
            <Border Grid.Column="1" Grid.Row="0" Background="Beige" BorderBrush="#afafaf" BorderThickness="1" Padding="5">
                <TextBlock Grid.Column="1" Text="도서명"/>
            </Border>
 
            <Border Grid.Column="2" Grid.Row="0" Background="Beige" BorderBrush="#afafaf" BorderThickness="1" Padding="5">
                <TextBlock Grid.Column="1" Text="출판사"/>
            </Border>
 
            <Border Grid.Column="3" Grid.Row="0" Grid.ColumnSpan="2" Background="Beige" BorderBrush="#afafaf" BorderThickness="1" Padding="5">
                <TextBlock Grid.Column="1" Text="가격"/>
            </Border>
 
            <FrameworkElement Grid.Column="4" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
        </Grid>
 
        <!--Data 영역-->
        <ScrollViewer>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="bookNumber"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Publisher"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Price"/>
                </Grid.ColumnDefinitions>
 
                <Grid.RowDefinitions>
                    <RowDefinition Height="35"/>
                    <RowDefinition Height="35"/>
                    <RowDefinition Height="35"/>
                    <RowDefinition Height="35"/>
                </Grid.RowDefinitions>
                
                <TextBlock Grid.Row="0" Grid.Column="0" Text="1"/>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="WPF"/>
                <TextBlock Grid.Row="0" Grid.Column="2" Text="범범조조"/>
                <TextBlock Grid.Row="0" Grid.Column="3" Text="25,000원"/>
 
                <TextBlock Grid.Row="1" Grid.Column="0" Text="2"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="Windows Forms"/>
                <TextBlock Grid.Row="1" Grid.Column="2" Text="범범조조"/>
                <TextBlock Grid.Row="1" Grid.Column="3" Text="35,000원"/>
 
                <TextBlock Grid.Row="2" Grid.Column="0" Text="3"/>
                <TextBlock Grid.Row="2" Grid.Column="1" Text="C#"/>
                <TextBlock Grid.Row="2" Grid.Column="2" Text="범범조조"/>
                <TextBlock Grid.Row="2" Grid.Column="3" Text="15,000원"/>
 
                <TextBlock Grid.Row="3" Grid.Column="0" Text="4"/>
                <TextBlock Grid.Row="3" Grid.Column="1" Text="C++ 자료구조"/>
                <TextBlock Grid.Row="3" Grid.Column="2" Text="범범조조"/>
                <TextBlock Grid.Row="3" Grid.Column="3" Text="45,000원"/>
            </Grid>
        </ScrollViewer>
        
    </DockPanel>
    
</Window>
 

 

실행 결과

위와 같이 Header영역와 Data영역의 Column 사이즈가 서로 공유가 돼서 알맞게 나오는 것을 보실 수 있습니다.

 

여기서 핵심은 SharedSizeGroup 속성으로 이름을 설정해서 해당 이름을 통해서 서로 다른 Grid의 Column을 동기화 시켜주는 부분이기 때문에 한번씩 따라 쳐 보시면서 이해하시는걸 추천 드리겠습니다.

 

감사합니다.^^