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

  • 아티클

GridSplitter 컨트롤과 Grid 컨테이너 컨트롤을 함께 사용하여 런타임에 사용자가 크기를 조정할 수 있는 창 레이아웃을 만들 수 있습니다. 예를 들어 UI가 여러 영역으로 분할된 응용 프로그램의 경우 사용자가 분할자를 마우스로 끌어 더 많이 표시하려는 영역을 넓힐 수 있습니다. 이 연습에서는 메신저 스타일 응용 프로그램의 레이아웃을 만듭니다.

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

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

  • 기본 모눈 패널을 구성합니다.

  • 가로 GridSplitter를 추가합니다.

  • 도킹 패널 및 컨트롤을 추가합니다.

  • 모눈 패널 및 컨트롤을 추가합니다.

  • 응용 프로그램을 테스트합니다.

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

크기 조정 가능한 응용 프로그램

참고

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

사전 요구 사항

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

  • Visual Studio 2010

프로젝트 만들기

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

프로젝트를 만들려면

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

    참고

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

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

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

기본 모눈 패널 컨트롤 구성

기본적으로 새 WPF 응용 프로그램에는 Grid 패널을 사용하는 Window가 들어 있습니다. 이 Grid를 GridSplitter에 사용하는 것이 좋습니다. 모눈에 대한 계획은 다음과 같습니다.

행 1: 레이아웃의 첫 번째 부분에 대한 Dock 패널

행 2: GridSplitter

행 3: 레이아웃의 나머지 부분에 대한 Grid 패널

기본 모눈 패널 컨트롤을 구성하려면

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

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

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

  3. 추가를 세 번 클릭하여 세 행을 추가합니다.

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

  5. 세 번째 행의 MinHeight 속성을 70으로 설정합니다.

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

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

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

가로 GridSplitter 추가

다음으로 GridSplitter를 추가합니다.

가로 GridSplitter를 추가하려면

  1. 디자인 뷰에서 Grid를 선택합니다.

  2. 도구 상자에서 GridSplitter 컨트롤을 Grid로 끌어 옵니다.

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

    Property

    값

    ResizeDirection

    Rows

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    Width

    Auto

    Height

    10

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

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

도킹 패널 및 컨트롤 추가

다음으로 DockPanel을 추가하고 응용 프로그램 레이아웃의 위쪽 절반을 설정합니다. DockPanel에는 Label 및 RichTextBox가 포함됩니다. GridSplitter를 움직일 때 Label 및 RichTextBox의 색을 설정하여 응용 프로그램의 위쪽 절반 크기를 강조 표시합니다.

도킹 패널 및 컨트롤을 추가하려면

  1. 디자인 뷰에서 Grid를 선택합니다.

  2. 도구 상자에서 DockPanel 컨트롤을 Grid로 끌어 옵니다.

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

    Property

    값

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    LastChildFill

    True(선택됨)

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  4. 도구 상자에서 Label 컨트롤을 DockPanel로 끌어옵니다.

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

    Property

    값

    Background

    Blue(#FF0000FF)

    Foreground

    White(#FFFFFFFF)

    Content

    표시

    DockPanel.Dock

    Top

    Width

    Auto

    Height

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

  6. 디자인 뷰에서 DockPanel을 선택합니다.

    팁

    모눈에 여러 컨트롤이 사용되므로 Tab 키, 문서 개요 창 또는 XAML 뷰를 사용하여 DockPanel을 손쉽게 선택할 수 있습니다. 자세한 내용은 방법: 디자인 화면의 요소 선택 및 이동을 참조하십시오.

  7. 도구 상자에서 RichTextBox 컨트롤을 DockPanel로 끌어 옵니다.

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

    Property

    값

    Background

    LightBlue(#FFADD8E6)

    DockPanel.Dock

    Bottom

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    True(선택됨)

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

모눈 패널 및 컨트롤 추가

다음으로 Grid를 추가하고 응용 프로그램 레이아웃의 아래쪽 절반을 설정합니다. Grid에는 Button 및 RichTextBox가 포함됩니다. GridSplitter를 움직일 때 RichTextBox의 색을 설정하여 응용 프로그램의 아래쪽 절반 크기를 강조 표시합니다.

모눈 패널 및 컨트롤을 추가하려면

  1. 디자인 뷰에서 Grid를 선택합니다.

  2. 도구 상자에서 Grid 컨트롤을 Grid로 끌어 옵니다.

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

    Property

    값

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    2

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

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

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

  5. 추가를 두 번 클릭하여 두 열을 추가합니다.

  6. 두 번째 열의 Width 속성을 Auto로 설정합니다.

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

  8. 도구 상자에서 Button 컨트롤을 Grid로 끌어 옵니다.

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

    Property

    값

    Content

    OK

    Grid.Column

    1

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    60

    Height

    60

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    5

  10. 도구 상자에서 RichTextBox 컨트롤을 Grid로 끌어옵니다.

  11. 속성 창에서 RichTextBox에 대해 다음 속성을 설정합니다.

    속성

    값

    Background

    PaleGoldenrod(#FFEEE8AA)

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

    IsReadOnly

    False(선택하지 않음)

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

응용 프로그램 테스트

마지막 절차로 응용 프로그램을 테스트합니다.

응용 프로그램을 테스트하려면

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

    응용 프로그램이 시작되고 MainWindow가 나타납니다.

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

    응용 프로그램의 위쪽 및 아래쪽 절반이 여유 공간에 맞게 확장 및 축소됩니다.

  3. 분할자를 마우스로 끌어 응용 프로그램의 각 부분 크기를 조정합니다. 응용 프로그램의 한 부분을 다른 부분보다 작게 줄입니다.

  4. 창의 크기를 다시 조정합니다.

    응용 프로그램의 위쪽 및 아래쪽 절반이 분할자 위치의 비율에 따라 확장 및 축소됩니다.

  5. 분할자를 응용 프로그램에서 최대한 위쪽으로 끌어 놓습니다.

    응용 프로그램의 위쪽 절반이 사라지고 아래쪽 절반만 표시됩니다.

  6. 분할자를 응용 프로그램에서 최대한 아래쪽으로 끌어 놓습니다.

    응용 프로그램의 아래쪽 절반은 여전히 표시됩니다. 이는 세 번째 행의 MinHeight 속성을 70으로 설정했기 때문입니다.

참고

70 = 60(단추 높이) + 5(단추의 위쪽 여백) + 5(단추의 아래쪽 여백)

  1. 창을 닫습니다.

종합

완성된 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="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="70" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
            <Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
            <RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
        </DockPanel>
        <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
        <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
            <RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
        </Grid>
    </Grid>
</Window>

다음 단계

이 연습에서 만든 응용 프로그램에는 가로 분할자가 들어 있습니다. 세로 분할자를 대신 사용하여 같은 응용 프로그램을 만들어 볼 수 있습니다.

여기에서 만든 응용 프로그램은 레이아웃 기술만 보여 줍니다. 코드를 추가하여 응용 프로그램에 기능을 더해 볼 수 있습니다. 예를 들어 아래쪽 텍스트 상자의 텍스트를 위쪽 텍스트 상자로 복사하는 코드를 단추 클릭 이벤트에 추가할 수 있습니다.

참고 항목

작업

방법: GridSplitter를 사용하여 사용자가 크기를 조정할 수 있는 응용 프로그램 만들기

개념

절대 및 동적 위치를 사용하는 레이아웃

기타 리소스

레이아웃 연습