3-1-2.스택 패널

스택 패널(StackPanel)은 선언문에 나타난 순서대로 차일드를 일렬로 배치한다. 등장 순서대로 컨트롤을 차곡 차곡 쌓아서 배치하므로 컨트롤끼리 겹치지 않는다는 특징이 있다. 쌓는 방향은 Orientation 속성으로 지정하며 디폴트는 수직인 Vertical이어서 별다른 지정이 없으면 위에서부터 아래로 컨트롤이 차례대로 배치된다. 수평으로 나란히 배치하고 싶으면 Orientation 속성을 Horizontal로 변경한다.

스택 패널을 사용하는 예제를 만들어 보자. 앞 장에서 설명한 방법대로 프로젝트를 새로 생성하되 프로젝트 이름은 Stack1로 지정한다. 마법사가 만들어준 레이아웃에서 컨텐트 패널 안쪽에 스택 패널과 버튼들을 배치하는 구문을 작성한다. 아래쪽의 앱바를 위한 주석문은 삭제하고 예제간의 구분을 위해 PageTitle 텍스트 박스의 Text 속성에는 예제의 이름을 써 넣는다.

Stack1

<phone:PhoneApplicationPage

x:Class="Stack1.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="Stack1" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<StackPanel Background="Blue" Orientation="Vertical">

<Button Content="111" />

<Button Content="222" />

<Button Content="333" />

</StackPanel>

</Grid>

</Grid>

</phone:PhoneApplicationPage>

소스가 길지만 대부분 마법사가 만들어준 것이고 직접 작성한 것은 몇 줄 되지 않는다. 페이지 제목 문자열은 예제간의 구분을 위해 붙이는 것 뿐이므로 실제 분석해 봐야 할 부분은 컨텐트 패널 안의 구문 뿐이다. 이 예제는 스택 패널을 연구하므로 컨텐트 패널안에 스택 패널을 놓고 그 안에 버튼들을 배치했다.

스택 패널이 차지하는 영역을 분명히 확인하기 위해 파란색의 배경을 지정했으며 방향은 수직으로 지정했다. Orientation 속성의 디폴트가 Vertical이므로 이 속성 지정문은 삭제해도 상관없다. 스택 패널안에 세 개의 버튼을 배치하고 버튼간의 구분을 위해 Content 속성에 번호를 지정했다.

이어서 수평 스택 패널에 버튼을 배치하는 예제를 만들어 보자. 위 예제에서 Orientation 속성만 Horizontal로 바꾸어도 되지만 여러 가지 결과를 신속하게 비교해 보기 위해 별도의 프로젝트를 새로 만든다. Stack2 예제를 만들고 앞 예제의 구문를 복사해 온 후 Orientation 속성과 페이지의 이름 문자열만 변경한다.

Stack2

<phone:PhoneApplicationPage

x:Class="Stack2.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="Stack2" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<StackPanel Background="Blue" Orientation="Horizontal">

<Button Content="111" />

<Button Content="222" />

<Button Content="333" />

</StackPanel>

</Grid>

</Grid>

</phone:PhoneApplicationPage>

두 예제의 실행 결과는 다음과 같다. 컨트롤의 배치 결과는 디자인 뷰에도 나타나므로 굳이 에뮬레이터에서 실행해 보지 않아도 바로 확인할 수 있다.

파란색의 스택 패널이 컨텐트 패널을 가득 채우고 있으며 스택 패널 안에 세 개의 버튼들이 나란히 배치되어 있다. 수직 스택 패널의 버튼들은 위에서 아래로 차례대로 배치되고 수평 스택 패널의 버튼들은 왼쪽에서 오른쪽으로 차례대로 배치된다는 것만 다르다. 차일드 컨트롤 사이의 간격은 따로 없으며 서로 밀착된다. 만약 차일드 사이를 적당히 띄우고 싶다면 버튼의 Margin 속성으로 바깥 여백을 주어야 한다.

배치 규칙이 워낙 단순하고 명료해서 무척 쉬운 편이다. 그러나 스택 패널과 차일드의 정렬 관계는 다소 복잡하다. 스택 패널에 놓이는 차일드는 스택 방향쪽으로는 고유의 크기를 가지고 스택 반대 방향쪽으로는 가득 채워진다. 예를 들어 수직 스택 패널에 놓인 버튼의 경우 수직 방향의 높이는 버튼의 고유 높이를 유지하지만 반대 방향인 수평 폭은 스택 패널과 같다. 수평 스택 패널에 놓인 버튼의 경우 수평 방향의 폭은 버튼의 고유 폭을 유지하지만 반대 방향인 수직 높이는 스택 패널과 같다.

이렇게 되는 이유는 스택 패널에 놓이는 컨트롤의 정렬 속성이 스택 패널에 의해 영향을 받기 때문이다. 컨트롤의 정렬 상태는 HorizonAlignment, VerticalAlignment 속성으로 지정하는데 두 속성의 디폴트는 모두 Stretch여서 수평으로나 수직으로나 최대한 넓은 면적을 차지한다. 그러나 스택 패널의 방향과 같은 방향의 정렬 속성은 무시된다. 예를 들어 수직 스택 패널에 놓이는 컨트롤의 VerticalAlignment 속성은 아무 효과가 없다.

차곡 차곡 차일드를 배치하는 스택 패널의 특성상 Orientation과 같은 방향의 크기는 Stretch가 아니어야 남는 공간이 생기며 그래야 여러 컨트롤을 쌓을 수 있기 때문이다. 그러나 스택 패널의 방향과 반대쪽 정렬 속성은 원하는대로 지정할 수 있으며 컨트롤의 크기도 Width, Height 속성으로 자유롭게 지정할 수 있다. 다음 예제로 이를 확인해 보자.

Stack3

<phone:PhoneApplicationPage

x:Class="Stack3.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="Stack3" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<StackPanel Background="Blue" Orientation="Horizontal">

<Button Content="111" HorizontalAlignment="Center"/>

<Button Content="222" Width="200" VerticalAlignment="Center"/>

<Button Content="333" VerticalAlignment="Bottom"/>

</StackPanel>

</Grid>

</Grid>

</phone:PhoneApplicationPage>

수평 스택 패널에 세 개의 버튼을 배치하되 각 버튼에 정렬 속성과 크기 속성을 지정했다. 실행 결과는 다음과 같다.

111 버튼은 수평 정렬을 중앙으로 지정했지만 수평 스택패널 내부에 있으므로 이 지정은 무시된다. 111 버튼을 가운데에 놓는 것은 컨트롤을 수평으로 차곡 차곡 놓는다는 수평 스택 패널의 배치 규칙과 맞지 않기 때문이다. 만약 수평 중앙을 원하는 컨트롤이 둘 이상이면 두 컨트롤은 서로 겹쳐 보일 것이며 이는 컨트롤이 겹치지 않는다는 규칙에 위배된다. 또 첫 번째 컨트롤을 오른쪽 정렬하고 두 번째 컨트롤을 왼쪽 정렬하면 배치 순서도 엉망이 될 것이다.

222 버튼은 수직 정렬을 중앙으로 지정하였다. 그래서 높이를 가득 채우지 않고 내용물 높이만큼만 차지하며 수직 중앙에 배치된다. 이 경우는 자신이 이미 차지한 영역에 아래, 위 공간을 사용하지 않을 뿐이므로 다른 컨트롤과 겹치거나 순서가 바뀔 위험히 전혀 없다. 버튼의 폭은 지정한대로 200만큼 차지하며 원한다면 높이도 지정할 수 있다. 333 버튼은 수직 정렬을 바닥으로 지정하여 스택 패널 아래쪽에 배치된다.

스택 패널의 배치 규칙이 다소 복잡하다고 느껴질 수도 있다. 그러나 글로 설명하기에 복잡할 뿐이지 차례대로 겹치지 않게 배열하기 위한 어쩔 수 없는 지극히 상식적인 규칙일 뿐이다. 특별히 정렬을 변경하지만 않으면 사용하는데 별 어려움이 없다.