Blend에서 개체를 레이아웃 컨테이너로 구성

페이지에 개체를 표시할 위치를 가정해 보겠습니다. 개체로는 이미지, 단추, 비디오 등을 들 수 있습니다. 개체를 행 및 열로 표시하거나 가로나 세로로 한 줄로 표시하거나 고정된 위치에 표시할 수 있습니다.

페이지에 어떻게 표시할지 결정했으면 레이아웃 패널을 선택합니다. 개체를 추가할 대상이 필요하기 때문에 모든 페이지 작업은 여기에서 시작됩니다. 기본적으로 Grid가 설정되지만 변경할 수 있습니다.

레이아웃 패널은 페이지에 개체를 정렬하는 데 도움이 될 뿐만 아니라 그 이상의 역할을 합니다. 서로 다른 화면 크기 및 해상도를 설계하는 데에도 도움이 됩니다. 사용자가 앱을 실행할 때 레이아웃 패널의 모든 항목은 장치의 실제 화면 공간에 맞게 크기가 조정됩니다. 자동으로 크기가 조정되지 않도록 하려면 레이아웃 일부 또는 전체 레이아웃에 대해 이러한 동작을 재정의할 수 있습니다. 이러한 동작은 높이 및 너비 속성을 사용하여 제어할 수 있습니다.

이 페이지에서는 레이아웃 패널 및 컨트롤에 대해 설명하고 패널 및 컨트롤을 시작하는 데 도움이 되는 짧은 비디오로 안내해 줍니다. 페이지에서 콘텐츠를 구성하는 데 도움이 되는 비디오를 알고 있거나 제안할 비디오가 있는 경우 우리와 공유해 주세요. 콘텐츠 향상에 기여를 참조하세요.

레이아웃 패널

다음 레이아웃 패널 중 하나를 선택하여 페이지를 시작합니다. 페이지에 둘 이상의 레이아웃 패널을 지정할 수 있습니다. 예를 들어 Grid 레이아웃 패널에서 시작한 후 Grid의 영역에 StackPanel을 추가하여 해당 요소에서 컨트롤을 세로로 정렬할 수 있습니다.

다음은 가장 많이 사용되는 레이아웃 패널이며, 다른 레이아웃 패널도 있습니다. 이러한 컨트롤은 모두 자산 패널에 있습니다.

• Grid

• UniformGrid

• Canvas

• StackPanel

• WrapPanel

• DockPanel

Grid

개체를 행 및 열로 정렬합니다.

짧은 비디오 보기: Grid 사용

UniformGrid

개체를 동일하게 또는 균일하게 모눈 영역에 정렬합니다. 이 패널은 이미지의 목록을 정렬할 때 매우 유용 합니다.

(WPF 프로젝트에만 사용 가능)

짧은 비디오 보기: UniformGrid 작업

Canvas

원하는 방식으로 개체를 정렬합니다. 사용자가 앱을 실행할 때 이러한 요소는 화면에서 고정 위치에 표시됩니다.

짧은 비디오 보기: Canvas 작업

StackPanel

개체를 가로 또는 세로로 한 줄로 정렬합니다.

짧은 비디오 보기: StackPanel 및 WrapPanel 작업

WrapPanel

개체를 순서대로 왼쪽에서 오른쪽으로 정렬합니다. 패널의 맨 오른쪽 가장자리에 공간이 부족한 경우 콘텐츠를 다음 줄로 줄바꿈하며 왼쪽에서 오른쪽, 위쪽에서 아래쪽 가로로 배치됩니다. 위쪽에서 아래쪽, 왼쪽에서 오른쪽 세로로 배치할 수도 있습니다.

(WPF 프로젝트에만 사용 가능)

짧은 비디오 보기: StackPanel 및 WrapPanel 작업

DockPanel

개체가 패널의 한쪽 가장자리에 고정되도록 개체를 정렬합니다.

(WPF 프로젝트에만 사용 가능)

짧은 비디오 보기: WPF - DockPanel

레이아웃 컨트롤

개체를 레이아웃 컨트롤에도 추가할 수 있습니다. 이러한 개체는 레이아웃 패널만큼 기능이 다양하지는 않지만 특정 시나리오에서 유용할 수 있습니다.

다음은 가장 많이 사용되는 레이아웃 컨트롤이며, 다른 레이아웃 컨트롤도 있습니다. 이러한 컨트롤은 모두 자산 패널에 있습니다.

• 테두리

• Popup

• ScrollViewer

• UniformGrid

• ViewBox

테두리

개체 주위에 테두리, 배경 또는 둘 다를 그립니다. Border에는 개체를 하나만 추가할 수 있습니다. 둘 이상의 개체에 테두리나 배경을 적용하려면 레이아웃 패널을 Border에 추가합니다. 그런 다음 해당 패널 또는 컨트롤에 개체를 추가합니다.

짧은 비디오 보기: Border 작업

Popup

창의 사용자에게 정보나 옵션을 표시합니다. Popup에 개체를 하나만 추가할 수 있습니다. 기본적으로 Popup에는 Grid가 포함되지만 변경할 수 있습니다.

ScrollViewer

페이지나 페이지의 특정 영역을 스크롤할 수 있습니다. ScrollViewer에 개체를 하나만 추가할 수 있으므로 Grid 또는 StackPanel 등과 같은 레이아웃 패널을 추가합니다.

Viewbox

확대/축소 컨트롤과 유사하게 개체의 비율 크기를 조정합니다. Viewbox에 하나의 개체만 추가할 수 있습니다. 둘 이상의 개체에 해당 효과를 적용하려면 레이아웃 패널을 ViewBox에 추가한 후 컨트롤을 해당 레이아웃 패널에 추가합니다.

(WPF 프로젝트에만 사용 가능)

콘텐츠 향상에 기여

Blend에서 개체를 정렬하는 데 도움이 되는 비디오나 문서를 발견한 경우 우리와 공유해 주세요. 콘텐츠를 검토한 후 다른 사람들도 검색할 수 있도록 링크를 추가할 수 있습니다.

새 비디오를 제안하고 싶으면 언제든지 제안해 주세요. 다른 사용자로부터도 비슷한 요청이 들어오면 시간과 여건이 될 때 새 비디오를 제작하겠습니다.

자신의 작업에 대해 자신보다 더 잘 아는 사람은 없습니다. 페이지에 개체를 구성하는 데 있어 어떤 리소스가 도움이 되는지, 우리나 커뮤니티 회원이 제공한 설명 중 어떠한 영역의 설명이 부족했는지 알려주세요. 콘텐츠 향상에 많은 도움이 될 것입니다.

여기로 의견을 보내주세요.