Grid는 Silverlight에서 제공하는 가장 유연하고 강력한 컨테이너 개체입니다. Grid는 열과 행으로 구성된 유연한 표 영역을 정의합니다. 각각 ColumnDefinition 및 RowDefinition을 사용하여 Grid의 열과 행을 정의합니다. 기본적으로 표의 자식은 첫 번째 행과 첫 번째 열에 배치됩니다. Grid..::.Column 및 Grid..::.Row 연결 속성을 설정하여 Grid의 특정 셀에 개체를 배치할 수 있습니다. 다음 예제에서는 Grid를 사용하여 Grid 내에 TextBlock 개체 몇 개, Button 및 Rectangle 개체 각각 한 개를 배치하는 방법을 보여 줍니다.
<Grid Background="#DCDCDC"
ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Margin="2" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"
TextWrapping="Wrap">
This TextBlock is positioned in the first column and the
first row (column 0, row 0) and spans across all three columns (ColumnSpan 3).
</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" Margin="5" FontWeight="Bold">Rectangle:</TextBlock>
<Rectangle Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Left" Fill="Red"
Width="200" Height="50"/>
<Button Grid.Column="0" Grid.Row="2" Content="Stretched Button" />
<Border Background="White" BorderThickness="5" Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" >
<TextBlock TextWrapping="Wrap">
This TextBlock spans across two rows.
</TextBlock>
</Border>
<TextBlock Margin="5" Grid.Row="3" Grid.Column="0">1st Column, 4th Row</TextBlock>
<TextBlock Margin="5" Grid.Row="3" Grid.Column="2">3rd Column, 4th Row</TextBlock>
</Grid>
다음 그림에서는 이 코드가 렌더링되는 방식을 보여 줍니다. 여기서는 Grid의 선이 표시되도록 Grid의 ShowGridLines 속성이 true로 설정되었습니다. ShowGridLines는 Grid 셀 위치를 시각화하는 데 유용하지만, 모눈선은 스타일을 지정하거나 사용자 지정할 수 없으므로 레이아웃 디자인을 마친 후에는 일반적으로 모눈선이 제거됩니다.
앞의 예제에서는 Star 크기 조정을 사용하여 공간을 비례적으로 배분합니다. 기본적으로 Star는 행이나 열의 높이 또는 너비이므로 사용 가능한 공간의 가중 비율이 해당 열이나 행에 할당됩니다. 이 예제에서는 각각 단일 별표 크기를 사용하는 세 개의 열이 있으므로 표에 사용할 수 있는 너비의 1/3이 각 열에 할당됩니다.
참고:
Star 크기 조정이 제대로 작동하려면 모눈의 크기를 제한해야 합니다. Height 및 Width 속성을 명시적으로 설정하거나 Grid에서 HorizontalAlignment 및 VerticalAlignment 값을 Stretch 로 설정하여 모눈 크기를 제한할 수 있습니다.
행과 열은 Auto 크기 조정을 사용할 수도 있습니다. 이 경우 열이나 행에 들어 있는 내용의 크기에 따라 공간이 균등하게 배분됩니다. 행과 열은 해당 행 또는 열의 모든 셀에 들어 있는 내용 중 가장 긴 내용을 수용할 수 있는 최소한의 공간만 차지합니다. Grid에 공간이 부족하여 모든 내용을 포함할 수 없는 경우 오른쪽 아래에서 시작하여 내용이 잘립니다. 이 예제에서 첫 번째 행과 마지막 행은 Auto 크기 조정을 사용하며 텍스트를 포함하도록 크기가 조정됩니다.
Star 크기 조정과 HorizontalAlignment 및 VerticalAlignment 값 Stretch와 함께 사용하면 화면 공간 비율을 기준으로 레이아웃 공간을 분할할 수 있습니다. Grid는 이러한 방식으로 공간을 배분할 수 있는 유일한 레이아웃 패널입니다. 이러한 속성에 대한 자세한 내용은 이 항목의 뒷부분에 있는 여백 및 맞춤 속성을 참조하십시오.
