다음을 통해 공유


방법: 동적 레이아웃 만들기

WPF Designer for Visual Studio에서는 동적 위치를 지원하는 여러 가지 Panel 컨트롤을 제공합니다. 한 패널 컨트롤을 다른 패널 컨트롤의 자식으로 추가하여 패널 컨트롤을 조합할 수 있습니다. 다음 패널 컨트롤을 사용하여 응용 프로그램에서 요소의 동적 위치를 지정할 수 있습니다.

Grid는 자식 요소의 위치를 행 및 열에 지정할 수 있는 영역을 정의합니다. StackPanelWrapPanel은 자식 요소의 위치를 행 또는 열에 자동으로 지정합니다. DockPanel은 자식 요소의 위치를 가장자리를 따라 자동으로 지정합니다. 여러 가지 패널에 대한 자세한 내용은 절대 및 동적 위치를 사용하는 레이아웃을 참조하십시오.

중요

가능하면 동적 레이아웃을 사용하는 것이 좋습니다. 동적 레이아웃은 가장 유연할 뿐 아니라 지역화되는 경우와 같이 내용이 변경될 경우 적절히 조정되고 최종 사용자가 사용 환경을 가장 잘 제어할 수 있게 해 줍니다. 절대 레이아웃의 예제를 보려면 방법: 절대 위치를 기반으로 하는 레이아웃 만들기를 참조하십시오.

동적 동작을 위한 창 속성 설정

새 창을 만들 때 동적 레이아웃의 유연성을 최대화하도록 속성을 설정할 수 있습니다.

동적 동작을 위한 창 속성을 설정하려면

  1. 디자인 뷰에서 창을 선택합니다.

  2. 속성 창에서 Window에 대해 다음 속성을 설정합니다.

    속성

    결과

    ResizeMode

    CanResize

    이 속성 값을 사용하면 사용자가 창 크기를 조정하여 컨트롤 표시 영역을 늘릴 수 있습니다.

    SizeToContent

    WidthAndHeight

    이 속성 값을 사용하면 내용이 늘어날 때 창 크기가 자동으로 조정되도록 할 수 있습니다.

동적 동작을 위한 패널 속성 설정

창 또는 다른 패널에 Grid, DockPanel 또는 StackPanel과 같은 새 패널을 추가할 때 동적 레이아웃의 유연성을 최대화하도록 속성을 설정할 수 있습니다.

동적 동작을 위한 패널 속성을 설정하려면

  1. 디자인 뷰에서 패널을 선택합니다.

  2. 속성 창에서 Panel에 대해 다음 속성을 설정합니다.

    속성

    결과

    Width

    Auto

    패널이 부모 창 또는 패널의 너비에 맞게 늘어납니다.

    Height

    Auto

    패널의 부모 창 또는 패널의 높이에 맞게 늘어납니다.

동적 동작을 위한 모눈 속성 설정

Auto 및 별표를 사용한 크기 조정을 통해 내용에 따라 크기가 동적으로 결정되는 모눈을 쉽게 만들 수 있습니다. Auto 크기 조정은 내용의 크기가 변경되더라도 해당 내용에 맞게 컨트롤 크기를 조정하는 데 사용합니다. 별표를 사용한 크기 조정은 사용 가능한 공간을 가중치에 따라 배분하는 데 사용합니다. 자세한 내용은 Star를 참조하십시오.

디자인 뷰를 사용하여 새 행 및 열을 만들 경우 기본적으로 Star 크기 조정이 사용됩니다. 자세한 내용은 방법: 표에 행 및 열 추가를 참조하십시오.

컬렉션 편집기에서 행 및 열을 추가한 다음 XAML 편집기에서 행 높이 및 열 너비를 설정하는 것이 더 쉬울 수도 있습니다.

동적 동작을 위한 모눈 속성을 설정하려면

  1. 디자인 뷰에서 모눈을 선택합니다.

  2. 속성 창에서 ColumnDefinitions 속성을 찾고 해당 속성 값 열에 있는 줄임표 단추를 클릭합니다.

    컬렉션 편집기가 나타납니다.

    1. 새 열 정의를 선택하거나 추가합니다.

    2. Auto 및 별표를 사용한 크기 조정을 통해 최대한의 유연성을 얻을 수 있도록 열 너비를 설정합니다.

    3. 확인을 클릭하여 컬렉션 편집기를 닫고 WPF Designer로 돌아갑니다.

    참고

    Width 속성이 Auto로 설정된 열은 내용이 없으므로 일시적으로 숨겨집니다. 이와 같이 나타나지 않도록 하려면 작업 중에는 별표를 사용한 크기 조정을 사용하고 작업이 완료되면 이를 Auto로 변경합니다.

  3. 속성 창에서 RowDefinitions 속성을 찾고 해당 속성 값 열에 있는 줄임표 단추를 클릭합니다.

    컬렉션 편집기가 나타납니다.

    1. 새 행 정의를 선택하거나 추가합니다.

    2. Auto 및 별표를 사용한 크기 조정을 통해 최대한의 유연성을 얻을 수 있도록 행 높이를 설정합니다.

    3. 확인을 클릭하여 컬렉션 편집기를 닫고 WPF Designer로 돌아갑니다.

    참고

    Height 속성이 Auto로 설정된 행은 내용이 없으므로 일시적으로 숨겨집니다. 이와 같이 나타나지 않도록 하려면 작업 중에는 별표를 사용한 크기 조정을 사용하고 작업이 완료되면 이를 Auto로 변경합니다.

동적 동작을 위한 컨트롤 속성 설정

창 또는 패널에 새 컨트롤을 추가할 때 동적 레이아웃의 유연성을 최대화하도록 속성을 설정할 수 있습니다. 창 또는 내용이 변경될 때 컨트롤 크기가 동적으로 조정되도록 하려면 컨트롤에 특정 크기를 설정하지 말아야 합니다.

동적 동작을 위한 컨트롤 속성을 설정하려면

  1. 디자인 뷰에서 컨트롤을 선택합니다.

  2. 속성 창에서 컨트롤에 대해 다음 속성을 설정합니다.

    속성

    Effect

    Width

    Auto

    컨트롤이 내용에 맞게 가로로 늘어납니다.

    Height

    Auto

    컨트롤이 내용에 맞게 세로로 늘어납니다.

    MinWidth

    0

    가로 크기를 필요한 만큼 줄일 수 있습니다.

    MinHeight

    0

    세로 크기를 필요한 만큼 줄일 수 있습니다.

    MaxWidth

    Infinity

    가로 크기를 필요한 만큼 늘릴 수 있습니다.

    MaxHeight

    Infinity

    세로 크기를 필요한 만큼 늘릴 수 있습니다.

    참고

    여기에 표시된 값은 기본값입니다.

참고 항목

작업

연습: 동적 레이아웃 만들기

개념

WPF 디자이너의 정렬

레이아웃 시스템

WPF 및 Silverlight 디자이너 개요

기타 리소스

레이아웃 연습