[Silverlight 4.0] GridSplitter 사용하기

Silverlight 에서 GridSplitter 컨트롤 사용 방법에 대해 알아보도록 하겠습니다.

기본 제공 되는 GridSplitter 컨트롤은 Grid 사이즈를 자동 변경 할 수 있도록 해 줍니다.
윈도우에서 보시는 자동 크기 조절과 비슷한 기능인데요.

 

영역을 확인 하기 위해 Grid1 과 Grid2 영역에 빨강, 검정 색을 넣었습니다.
GridSplitter 컨트롤을 마우스로 클릭 후 드레그 해주시면 드레그 한 만큼 사이즈가 변경 됩니다.

XAML 코드입니다.

<Grid x:Name="LayoutRoot" Height="300" Width="400">
        <Grid.ColumnDefinitions> // Grid 영역을 2가지로 쪼갭니다. 
            <ColumnDefinition Width="100*"/>  // 첫번째 영역 Width : 100
            <ColumnDefinition Width="300*"/>  // 두번째 영역 Width : 300
        </Grid.ColumnDefinitions> // 사이즈 변경시에 Width 조정을 위하여 *(Auto)를 붙였습니다. 
        <Grid Grid.Column="0" Background="Red"/>
        <Grid Grid.Column="1" Background="Black"/>
        <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Left" Name="gridSplitter1" VerticalAlignment="Stretch" Width="10" />
         // Grid 영역 사이즈 변경을 하기 위하여 두번째 영역인 Grid.Column에 1을 설정 했습니다.
</Grid>

GridSplitter 컨트롤은 따로 이벤트를 생성 하지 않아도 영역만 지정해 놓으면 자동적으로 기능이 수행됩니다.