Grid - Units

지난 챕터에서는 행이나 열이 결합된 공간이 일정 비율을 차지하도록 지정하는 별표를 사용하는 width/height를 살펴봤습니다. 그러나 열 또는 행의 너비와 높이를 지정하는 방법에는 또다른 방법이 있습니다 : 절대 단위를 사용하는 방법과 자동으로 width/height를 지정하는 방법입니다. 다음은 이들을 혼합하는 Grid를 만들어 봅시다.

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="100" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2 with long text</Button>
		<Button Grid.Column="2">Button 3</Button>
	</Grid>
</Window>

이 예제에서 첫 번째 버튼은 별표로 폭을 지정했고, 두 번째 버튼은 Auto로 설정했고, 마지막에는 100 픽셀의 정적 너비를 지정했습니다.

결과 스크린 샷에서 볼 수 있듯이, 두 번째 버튼은 긴 텍스트를 렌더링하는 데 필요한 공간을 정확히 차지하고, 세 번째 버튼은 정확히 약속된 100 픽셀을 가져오고, 첫 번째 버튼은 남아있는 영역을 차지하는 가변 폭을 사용합니다.

가변(별표 너비) 공간은, 이미 Auto 또는 정적인 수치로 width/height가 할당되어 있지 않은 Grid 공간만을 공유합니다. 창 크기를 조정하면 더 확실히 알 수 있습니다.

위의 스크린샷에서 첫 번째 것은, Grid가 뒤의 두 개의 버튼을 위한 공간을 예약했기 때문에, 첫번째 버튼이 제대로 렌더링하는 데 필요한 공간을 얻지 못했다는 것을 보여줍니다. 두 번째 스크린 샷에서는 뒤의 두 버튼이 똑같은 공간을 확보하면서 첫 번째 버튼이 충분한 공간을 차지했습니다.

이는 다양한 화면을 디자인 할 때 매우 유용한 기술입니다. 예를 들어 사용자가 이름, 이메일 주소 및 설명을 입력하는 간단한 연락처 양식을 생각해 보십시오. 이름과 이메일 주소 두 개의 필드는 일반적으로 고정 된 높이를 갖지만, 세번째 설명 필드는 한 많은 공간을 차지할 수 있으므로 더 긴 설명을 입력 할 수있는 공간을 필요로 합니다. 다음 챕터에서는 서로 다른 높이와 너비의 행과 열을 사용하여 연락처 양식을 작성해 보겠습니다.