Silverlight - Panel 비트 18기 최용호

Layout Canvas Panel StackPanel GridPanel DockPanel WrapPanel I II III IV DockPanel V WrapPanel Ⅵ

고정위치모델(fixed position model) 동적위치모델(dynamic position model) Layout 유연한 Layout관리 고정위치모델(fixed position model) 동적위치모델(dynamic position model) 실버라이트와 WPF는 개발자와 디자이너가 협업을 통해서 쉽게 UI 표면에 컨트롤들을 배치시킬 수 있도록 유연한 레이아웃 관리를 지원합니다. 이 레이아웃 시스템은 절대 좌표를 이용하여 컨트롤들을 위치를 정하는 고정위치모델(fixed position model)을 지원함과 동시에 브라우저의 크기가 변해도 자동적으로 레이아웃과 컨트롤의 크기와 위치가 변경되는 동적위치모델(dynamic position model) 또한 지원합니다. 실버라이트와 WPF를 사용하는 개발자는 레이아웃 패널을 통해서 위치와 그에 포함된 컨트롤들의 크기를 변경합니다.

“Attached Properties”를 이용하여 컨트롤 위치 Canvas Panel 절대좌표를 사용 “Attached Properties”를 이용하여 컨트롤 위치 포함된 UI요소가 절대 움직이지 않을 경우 유용 캔버스 패널은 절대 좌표를 사용하여 포함된 컨트롤들의 위치를 잡는 매우 기본적인 레이아웃 패널입니다.   여러분은 "Attached Properties"라고 부르는 XAML의 특성을 이용하여 캔버스 속에 컨트롤을 위치시킬 수 있습니다. 컨트롤의 위치를 바로 상위 부모 캔버스 컨트롤의 Left, Top, Right, Bottom 좌표로 정해주는 것이죠. "Attached Properties"는 어떤 부모 패널 속에 들어있는 컨트롤들의 속성을 확장 시킬 때 매우 유용합니다. 캔버스에 "Top", "Left" 속성을 정의함으로써 버튼 또는 Canvas에 포함된 또 다른 UI 요소들에게 왼쪽과 오른쪽을 정의할 수 있는 능력을 기본적으로 추가할 수 있습니다. 이것은 버튼 클래스를 수정하거나 실제로 버튼 클래스에 속성을 추가하지 않아도 가능합니다. 포함된 UI 요소가 절대 움직이지 않는 시나리오에서는 캔버스가 유용하겠지만 캔버스 안에 더 많은 컨트롤을 포함시키거나 UI가 움직이고 크기가 변하는 시나리오에서는 사용하기가 쉽지 않은 경향이 있습니다. 이러한 경우 여러분은 고통스럽게도 캔버스 안에서 UI 요소들이 움직이게 하는 코드를 스스로 만들어 버립니다. 이러한 시나리오를 위한 좀 더 나은 해결책은 스택패널과 그리드처럼 이런 일을 해주기 위해 만들어진 다른 레이아웃 패널을 사용하는 것이 일반적입니다

Canvas Panel 예제

열 또는 행으로 구성된 레이아웃에 컨트롤 배치 컨트롤들을 자동 정렬 StackPanel 스택패널 컨트롤은 열 또는 행으로 구성된 레이아웃에 컨트롤 배치를 가능하게 하는 간단한 레이아웃 패널입니다. 스택패널은 일반적으로 페이지에서 UI의 작은 섹션을 정렬하는 시나리오에서 사용됩니다.

StackPanel 예제

여러 개의 열과 여러 개의 행을 가진 Layout에 컨트롤들을 배치 Grid Panel 가장 유연한 Layout Panel 여러 개의 열과 여러 개의 행을 가진 Layout에 컨트롤들을 배치 그리드 패널은 가장 유연한 레이아웃 패널입니다. 이것은 여러 개의 열과 여러 개의 행을 가진 레이아웃에 컨트롤들을 배치할 수 있습니다. 개념적으로는 HTML의 테이블 태그와 유사합니다. 하지만 HTML 테이블과는 다르게 열과 행에 직접 컨트롤들을 포함 할 수 없습니다. 대신 그리드 컨트롤에 직접 선언할 수 있는 <Grid.RowDefinitions>와 <Grid.ColumnDefinitions> 속성을 이용하여 그리드의 열과 행에 대한 정의를 명시할 수 있습니다. 그런 후에 그리드에 포함될 컨트롤에서 XAML의 "Attached Property" 용법을 이용하여 그리드의 열과 행을 지정할 수 있습니다.

GridPanel 예제 Row 삽입 Column 삽입 Button 삽입

Docking 될 위치를 설정하여 설정 된 위치에 고정시켜 배치 DockPanel Docking 될 위치를 설정하여 설정 된 위치에 고정시켜 배치 DockPanel의 Attached-Property인 Dock을 사용하여 위치 지정(Left, Right, Top, Bottom)

DockPanel 예제

LastChildFill property DockPanel 예제 Docking LastChildFill property

WrapPanel의 너비나 높이에 꽉 찬다면 다음 행이나 열로 넘어가서 다시 배치 추가되는 컨트롤의 순서에 따라 차곡차곡 배치 WrapPanel의 너비나 높이에 꽉 찬다면 다음 행이나 열로 넘어가서 다시 배치

WrapPanel Vs StackPanel 내려와 다음버튼을 다시 배치

WrapPanel 예제