[WPF] 5. 레이아웃과 Panel - 5.3 StackPanel, 5.3.1 xaml 태그를 이용하여 배치

5.레이아웃과 Panel 5.3 StackPanel 5.3.1 xaml 태그를 이용하여 배치

---

5.3 StackPanel

 

 StackPanel은 수평 혹은 수직 방향으로 순차적으로 자식 UI 개체를 배치할 때 사용이 됩니다. 만약, 보관된 개체의 공간이 이미 StackPanel에 꽉 찬다고 하더라도 다음 줄로 넘어가지 않고 한 줄로 배치가 됩니다. 이러한 StackPanel의 특징을 갖고 있어서 ScrollViewer내에 StackPanel을 배치하는 경우가 많이 발생합니다.

 

5.3.1 xaml에서 태그를 이용하여 배치하기

 StackPanel은 Orientation 속성을 수평(Horizontal)로 배치를 할 것인지 수직(Vertical)으로 배치할 것인지를 결정할 수 있습니다. StackPanel에 자식 UI 개체는 순차적으로 배치를 하기 때문에 별다른 속성을 지정할 필요가 없습니다. 다만 StackPanel에 자식 UI 개체가 꽉 차서 넘어간 것들이 있을 때 스크롤 기능을 사용할 수 있게 ScrollViewer 내에 StackPanel을 배치하는 경우가 많습니다. 

[그림 5.9] StackPanel 사용 예제 실행 화면

 

 먼저 WPF 응용 프로그램 프로젝트를 생성하세요.

[그림 5.10] WPF 응용 프로그램 프로젝트 생성

 

 StackPanel에 자식 컨트롤을 배치할 때는 별다른 속성 설정없이 자식 UI 요소만 추가하면 추가한 순서대로 배치합니다. 대신 StackPanel에 Orientation 속성에 수직으로 배치할 것인지 수평으로 배치할 것인지 지정합니다.

<StackPanel Orientation="Horizontal">

    <Button Content="Button 1"/>

    <Button Content="Button 2"/>

    <Button Content="Button 3"/>

    <Button Content="Button 4"/>

    <Button Content="Button 5"/>

    <Button Content="Button 6"/>

</StackPanel>

 

 그리고 StackPanel에 배치한 자식 UI 요소가 많을 때 이들을 확인할 수 있게 ScrollViewer로 감쌀 때가 많습니다.

<ScrollViewer HorizontalScrollBarVisibility="Auto" >

    <StackPanel Orientation="Horizontal">

    </StackPanel>

</ScrollViewer>

 

 이번 실습도 자식 컨트롤 배치 외에 특별한 기능 구현은 하지 않습니다. 

MainWindow.xaml

<Window x:Class="Stack_실습___xaml_태그로_배치.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:Stack_실습___xaml_태그로_배치"         mc:Ignorable="d"         Title="Ex-StackPanel" Height="150" Width="300">     <ScrollViewer HorizontalScrollBarVisibility="Auto" >         <StackPanel Orientation="Horizontal">             <Button Content="Button 1"/>             <Button Content="Button 2"/>             <Button Content="Button 3"/>             <Button Content="Button 4"/>             <Button Content="Button 5"/>             <Button Content="Button 6"/>         </StackPanel>     </ScrollViewer> </Window>

  

---

실습 파일

StackPanel 실습 - xaml 태그로 배치.zip

관련 게시글

[WPF] 5. 레이아웃과 Panel

[WPF] 5. 레이아웃과 Panel - 5.1 Grid, 5.1.1 xaml 태그를 이용하여 배치

[WPF] 5. 레이아웃과 Panel - 5.1 Grid, 5.1.2 cs 소스에서 코드로 배치하기

[WPF] 5. 레이아웃과 Panel - 5.2 Canvas, 5.2.1 xaml 태그를 이용하여 배치

[WPF] 5. 레이아웃과 Panel - 5.2 Canvas, 5.2.2 cs 소스에서 코드로 배치하기

[WPF] 5. 레이아웃과 Panel - 5.3 StackPanel, 5.3.2 cs 소스에서 코드로 배치하기

[WPF] 5. 레이아웃과 Panel - 5.4 WrapPanel

[WPF] 5. 레이아웃과 Panel - 5.5 DockPanel