다음을 통해 공유

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

  • 아티클

동적 위치 지정 방법에서는 자식 요소의 정렬 방식과 부모 요소를 기준으로 한 줄 바꿈 방식을 지정하여 자식 요소를 정렬합니다. 창 및 컨트롤의 내용이 늘어날 때 해당 창 및 컨트롤이 자동으로 늘어나도록 설정할 수도 있습니다. 자세한 내용은 절대 및 동적 위치를 사용하는 레이아웃을 참조하십시오.

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

중요

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

이 연습에서는 다음 작업을 수행합니다.

  • WPF 응용 프로그램을 만듭니다.

  • 기본 Grid 패널 컨트롤을 구성합니다.

  • 패널에 컨트롤을 추가합니다.

  • 레이아웃을 테스트합니다.

다음 그림에서는 응용 프로그램의 모양을 보여 줍니다.

동적 레이아웃

참고

표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음 구성 요소가 필요합니다.

  • Visual Studio 2010

프로젝트 만들기

첫 번째 절차는 응용 프로그램의 프로젝트를 만드는 것입니다.

프로젝트를 만들려면

  1. Visual Basic 또는 Visual C#에서 DynamicLayout이라는 새 WPF 응용 프로그램 프로젝트를 만듭니다. 자세한 내용은 방법: 새 WPF 응용 프로그램 프로젝트 만들기를 참조하십시오.

    참고

    이 연습에서는 코드를 작성하지 않습니다. 프로젝트에서 선택한 언어는 응용 프로그램의 코드 숨김 페이지에 사용되는 언어입니다.

    WPF Designer에 MainWindow.xaml이 열립니다.

  2. 디자인 뷰에서 창을 선택합니다. 자세한 내용은 방법: 디자인 화면의 요소 선택 및 이동을 참조하십시오.

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

    Property

    값

    Width

    400

    Height

    200

    SizeToContent

    WidthAndHeight

    팁

    크기 조정 핸들을 사용하여 디자인 뷰의 창 크기를 조정할 수도 있습니다.

  4. 파일 메뉴에서 모두 저장을 클릭합니다.

기본 모눈 패널 컨트롤 구성

기본적으로 새 WPF 응용 프로그램에는 Grid 패널을 사용하는 Window가 들어 있습니다. 이 절차에서는 모눈에 네 개의 행과 네 개의 열을 추가합니다. 사용 가능한 너비가 네 열에 균등하게 분할되도록 각 열의 너비를 *로 설정합니다. 세 행의 높이가 해당 행의 내용에 맞게 조정되도록 세 행의 높이를 Auto로 설정합니다. 한 행은 사용 가능한 나머지 높이를 사용하도록 높이를 *로 설정합니다.

패널 컨트롤을 추가하려면

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

  2. (선택 사항) 속성 창에서 ShowGridLines 속성을 찾고 해당 확인란을 선택합니다.

    응용 프로그램이 실행되면 창에 모눈선이 나타납니다. 모눈선은 디버깅하는 데 유용하지만 프로덕션 코드를 볼 경우에는 ShowGridLines 속성 확인란의 선택을 취소해야 합니다.

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

    컬렉션 편집기 대화 상자가 나타납니다.

    1. 추가를 네 번 클릭하여 네 개의 열을 추가합니다.

    2. 첫 번째 행의 Width 속성을 Auto로 설정합니다.

    3. 두 번째 행의 Width 속성을 *로 설정합니다.

    4. 세 번째 행의 Width 속성을 Auto로 설정합니다.

    5. 네 번째 행의 Width 속성을 Auto로 설정합니다.

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

      이제 모눈에 네 개의 열이 있지만 나타나는 것은 한 열뿐입니다. Width 속성이 Auto로 설정된 열은 내용이 없으므로 일시적으로 숨겨집니다. 이 연습에서는 이러한 결과가 정상입니다. 나중에 이와 같이 나타나지 않도록 하려면 작업 중에는 별표를 사용한 크기 조정을 사용하고 작업이 완료되면 이를 Auto로 변경합니다.

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

    컬렉션 편집기 대화 상자가 나타납니다.

    1. 추가를 네 번 클릭하여 네 개의 행을 추가합니다.

    2. 첫 번째 행의 Height 속성을 Auto로 설정합니다.

    3. 두 번째 행의 Height 속성을 Auto로 설정합니다.

    4. 세 번째 행의 Height 속성을 *로 설정합니다.

    5. 네 번째 행의 Height 속성을 Auto로 설정합니다.

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

      이제 모눈에 네 개의 행이 있지만 나타나는 것은 한 행뿐입니다. Height 속성이 Auto로 설정된 행은 내용이 없으므로 일시적으로 숨겨집니다. 이 연습에서는 이러한 결과가 정상입니다. 나중에 이와 같이 나타나지 않도록 하려면 작업 중에는 별표를 사용한 크기 조정을 사용하고 작업이 완료되면 이를 Auto로 변경합니다.

  5. 파일 메뉴에서 모두 저장을 클릭합니다.

패널에 컨트롤 추가

이제 패널에 컨트롤을 추가하고 Grid의 연결된 속성 Column 및 Row를 사용하여 컨트롤의 동적 위치를 지정합니다.

패널에 컨트롤을 추가하려면

  1. 도구 상자의 일반 그룹에서 Label 컨트롤을 Grid로 끌어 옵니다.

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

    Property

    값

    Content

    이름:

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    Auto

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Top

    Margin

    20,20,10,10

  3. 도구 상자의 일반 그룹에서 Label 컨트롤을 Grid로 끌어옵니다.

  4. 속성 창에서 Label에 대해 다음 속성을 설정합니다.

    Property

    값

    Content

    암호:

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Width

    Auto

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Top

    Margin

    20,10,10,10

  5. 도구 상자의 일반 그룹에서 TextBox 컨트롤을 Grid로 끌어옵니다.

  6. 속성 창에서 TextBox에 대해 다음 속성을 설정합니다.

    Property

    값

    Grid.Column

    1

    Grid.ColumnSpan

    3

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,20,20,10

  7. 도구 상자의 일반 그룹에서 TextBox 컨트롤을 Grid로 끌어옵니다.

  8. 속성 창에서 TextBox에 대해 다음 속성을 설정합니다.

    Property

    값

    Grid.Column

    1

    Grid.ColumnSpan

    3

    Grid.Row

    1

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,10,20,10

  9. 도구 상자의 일반 그룹에서 Button 컨트롤을 Grid로 끌어옵니다.

  10. 속성 창에서 Button에 대해 다음 속성을 설정합니다.

    Property

    값

    Content

    OK

    Grid.Column

    2

    Grid.ColumnSpan

    1

    Grid.Row

    3

    Grid.RowSpan

    1

    Width

    75

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,10,6,20

  11. 도구 상자의 일반 그룹에서 Button 컨트롤을 Grid로 끌어옵니다.

  12. 속성 창에서 Button에 대해 다음 속성을 설정합니다.

    Property

    값

    Content

    Cancel

    Grid.Column

    3

    Grid.ColumnSpan

    1

    Grid.Row

    3

    Grid.RowSpan

    1

    Width

    75

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    6,10,20,20

  13. 파일 메뉴에서 모두 저장을 클릭합니다.

레이아웃 테스트

마지막으로, 응용 프로그램을 실행하고 사용자가 창 크기를 조정하거나 컨트롤의 내용이 컨트롤 크기 이상으로 늘어날 때 레이아웃이 동적으로 변경되는지 확인합니다.

레이아웃을 테스트하려면

  1. 디버그 메뉴에서 디버깅 시작을 클릭합니다.

    응용 프로그램이 시작되고 창이 열립니다.

  2. 이름 텍스트 상자에 임의의 이름을 입력하여 텍스트 상자를 채웁니다. 텍스트 상자의 끝에 도달하면 텍스트 상자와 창이 모두 입력한 텍스트에 맞게 늘어납니다.

  3. 창을 닫습니다.

  4. 디버그 메뉴에서 디버깅 시작을 클릭합니다.

    응용 프로그램이 시작되고 창이 열립니다.

  5. 창의 세로 및 가로 방향 크기를 조정합니다.

    사용 가능한 공간에 맞게 열이 균등하게 늘어납니다. 텍스트 상자는 늘어난 열에 맞게 늘어납니다. 세 개의 행은 높이가 유지되고 네 번째 행은 사용 가능한 공간에 맞게 늘어납니다.

  6. 창을 닫습니다.

  7. 디자인 뷰에서 이름 레이블을 선택합니다.

  8. 속성 창에서 Content 속성을 여기에 전체 이름을 입력하십시오.로 변경합니다.

    디자인 뷰에서 레이블이 텍스트에 맞게 늘어납니다.

  9. 디버그 메뉴에서 디버깅 시작을 클릭합니다.

    응용 프로그램이 시작되고 창이 열립니다. 레이블 컨트롤에 더 긴 텍스트가 표시됩니다.

  10. 창을 닫습니다.

종합

완성된 MainWindow.xaml 파일은 다음과 같습니다.

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

다음 단계

이 연습의 Grid 패널을 다음 패널로 대체해 보면 동적 레이아웃을 사용하여 다양한 효과를 얻는 방법을 알 수 있습니다.

참고 항목

작업

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

연습: WPF Designer를 사용하여 크기를 조정할 수 있는 응용 프로그램 만들기

개념

WPF 디자이너의 정렬

레이아웃 시스템

WPF 및 Silverlight 디자이너 개요

기타 리소스

레이아웃 연습