자습서: 적응형 레이아웃 만들기Tutorial: Create adaptive layouts

이 자습서에서는 XAML의 레이아웃 기능을 사용하여 어떤 크기에도 잘 어울리는 앱을 만드는 기본 사항을 다룹니다.This tutorial covers the basics of using XAML's adaptive layout features, which let you create apps that look good at any size. 창 중단점을 추가하고, 새 DataTemplate을 만들고, VisualStateManager 클래스를 사용하여 앱의 레이아웃을 조정하는 방법을 알아봅니다.You'll learn how to add window breakpoints, create a new DataTemplate, and use the VisualStateManager class tailor your app's layout. 이 도구를 사용하여 작은 창 크기에 맞게 이미지 편집 프로그램을 최적화합니다.You'll use these tools to optimize an image editing program for smaller window sizes.

이미지 편집 프로그램에는 다음과 같은 두 페이지가 있습니다.The image editing program has two pages. _기본 페이지_는 각 이미지 파일에 대한 일부 정보와 함께 사진 갤러리 보기를 표시합니다.The main page displays a photo gallery view, along with some information about each image file.

사진 랩 기본 페이지의 스크린샷.

세부 정보 페이지는 선택한 단일 사진을 표시합니다.The details page displays a single photo after it has been selected. 플라이아웃 편집 메뉴를 사용하면 사진을 수정하고, 이름을 변경하고, 저장할 수 있습니다.A flyout editing menu allows the photo to be altered, renamed, and saved.

사진 랩 세부 정보 페이지의 스크린샷.

필수 구성 요소Prerequisites

0부: github에서 시작 코드 다운로드Part 0: Get the starter code from github

이 자습서에서는 PhotoLab 샘플의 간소화된 버전부터 시작합니다.For this tutorial, you'll start with a simplified version of the PhotoLab sample.

  1. GitHub의 샘플 페이지(https://github.com/Microsoft/Windows-appsample-photo-lab)로 이동합니다.Go to the GitHub page for the sample: https://github.com/Microsoft/Windows-appsample-photo-lab.

  2. 다음으로, 샘플을 복제 또는 다운로드해야 합니다.Next, you'll need to clone or download the sample. 복제 또는 다운로드 단추를 클릭합니다.Click the Clone or download button. 하위 메뉴가 나타납니다.A sub-menu appears. PhotoLab 샘플의 GitHub 페이지에 있는 복제 또는 다운로드 메뉴The Clone or download menu on the PhotoLab sample's GitHub page

    GitHub에 익숙하지 않은 경우:If you're not familiar with GitHub:

    a.a. ZIP 다운로드를 클릭하고 파일을 로컬에 저장합니다.Click Download ZIP and save the file locally. 그러면 필요한 프로젝트 파일이 모두 포함된 .zip 파일이 다운로드됩니다.This downloads a .zip file that contains all the project files you need.

    b.b. 파일의 압축을 풉니다.Extract the file. 파일 탐색기를 사용하여 방금 다운로드한 .zip 파일을 찾아 마우스 오른쪽 단추로 클릭하고, 압축 풀기... 를 선택합니다.Use File Explorer to browse to the .zip file you just downloaded, right-click it, and select Extract All....

    c.c. 샘플의 로컬 복사본을 찾고, Windows-appsample-photo-lab-master\xaml-basics-starting-points\adaptive-layout 디렉터리로 이동합니다.Browse to your local copy of the sample and go the Windows-appsample-photo-lab-master\xaml-basics-starting-points\adaptive-layout directory.

    GitHub에 익숙한 경우:If you are familiar with GitHub:

    a.a. 리포지토리의 마스터 분기를 로컬에 복제합니다.Clone the master branch of the repo locally.

    b.b. Windows-appsample-photo-lab\xaml-basics-starting-points\adaptive-layout 디렉터리로 이동합니다.Browse to the Windows-appsample-photo-lab\xaml-basics-starting-points\adaptive-layout directory.

  3. Photolab.sln을 두 번 클릭하여 Visual Studio에서 솔루션을 엽니다.Double-click Photolab.sln to open the solution in Visual Studio.

1부: 창 중단점 정의Part 1: Define window breakpoints

앱을 실행합니다.Run the app. 전체 화면에는 잘 어울리지만 창을 너무 작게 축소하는 경우 UI(사용자 인터페이스)가 적합하지 않습니다.It looks good at full screen, but the user interface (UI) isn't ideal when you shrink the window too small. VisualStateManager를 사용하여 다양한 창 크기게 맞게 UI를 조정하면 최종 사용자 환경을 항상 멋진 모습과 느낌으로 유지할 수 있습니다.You can ensure that the end-user experience always looks and feels right by using the VisualStateManager class to adapt the UI to different window sizes.

작은 창: 이전

앱 레이아웃에 대한 자세한 내용은 문서에서 레이아웃 섹션을 참조하세요.For more info about app layout, see the Layout section of the docs.

창 중단점 추가Add window breakpoints

첫 번째 단계에서는 다양한 시각적 상태가 적용되는 중단점을 정의합니다.The first step is to define the breakpoints at which different visual states are applied. 소형, 중형 및 대형 화면의 중단점에 대한 자세한 내용은 화면 크기 및 중단점을 참조하세요.See Screen sizes and breakpoints for more information about the breakpoints for small, medium, and large screens.

솔루션 탐색기에서 App.xaml을 열고, 닫는 </ResourceDictionary> 태그 바로 앞에 MergedDictionaries 뒤에 다음 코드를 추가합니다.Open App.xaml from the Solution Explorer, and add the following code after the MergedDictionaries, right before the closing </ResourceDictionary> tag.

    <!--  Window width adaptive breakpoints.  -->
    <x:Double x:Key="MinWindowBreakpoint">0</x:Double>
    <x:Double x:Key="MediumWindowBreakpoint">641</x:Double>
    <x:Double x:Key="LargeWindowBreakpoint">1008</x:Double>

이렇게 하면 중단점이 3개 생성되어, 3가지 범위의 창 크기에 대해 새로운 시각적 상태를 만들 수 있습니다.This creates 3 breakpoints, which lets you create new visual states for 3 ranges of window sizes:

  • 작음(0-640픽셀 너비)Small (0 - 640 pixels wide)
  • 보통(641-1007픽셀 너비)Medium (641 - 1007 pixels wide)
  • 큼(1007픽셀을 초과하는 너비)Large (> 1007 pixels wide)

이 예에서는 작은 창 크기에 대해서만 새로운 모양을 만듭니다.In this example, you create a new look only for the small window size. 중형 및 대형 크기는 동일한 모양을 사용합니다.The medium and large sizes use the same look.

2부: 작은 창 크기에 대한 데이터 템플릿 추가Part 2: Add a data template for small window sizes

작은 창에서도 이 앱이 멋지게 보이도록 하기 위해, 사용자가 창을 축소하는 경우 이미지 갤러리 보기의 이미지가 표시되는 방식을 최적화하는 새 데이터 템플릿을 만들 수 있습니다.To make this app look good even when it's shown in a small window, you can create a new data template that optimizes how the images in the image gallery view are shown when the user shrinks the window.

새 DataTemplate 만들기Create a new DataTemplate

솔루션 탐색기에서 MainPage.xaml을 열고 Page.Resources 태그에 다음 코드를 추가합니다.Open MainPage.xaml from the Solution Explorer, and add the following code within the Page.Resources tags.

<DataTemplate x:Key="ImageGridView_SmallItemTemplate"
              x:DataType="local:ImageFileInfo">

    <!-- Create image grid -->
    <Grid Height="{Binding ItemSize, ElementName=page}"
          Width="{Binding ItemSize, ElementName=page}">

        <!-- Place image in grid, stretching it to fill the pane-->
        <Image x:Name="ItemImage"
               Source="{x:Bind ImageSource, Mode=OneWay}"
               Stretch="UniformToFill">
        </Image>

    </Grid>
</DataTemplate>

이 갤러리 템플릿은 이미지 주위의 경계선을 없애고 각 미리 보기 아래의 이미지 메타데이터(파일 이름, 평점 등)를 제거하여 화면 공간을 절약합니다.This gallery template saves screen real estate by eliminating the border around images, and getting rid of the image metadata (filename, ratings, and so on.) below each thumbnail. 대신 각 미리 보기를 간단한 사각형으로 표시합니다.Instead, you show each thumbnail as a simple square.

도구 설명에 메타데이터 추가Add metadata to a tooltip

사용자가 각 이미지의 메타데이터에 액세스할 수 있어야 하므로 각 이미지 항목에 도구 설명을 추가합니다.You still want the user to be able to access the metadata for each image, so add a tooltip to each image item. 방금 만든 DataTemplate의 Image 태그 내에 다음 코드를 추가합니다.Add the following code within the Image tags of the DataTemplate you just created.

    <!-- Add a tooltip to the image that displays metadata -->
    <ToolTipService.ToolTip>
        <ToolTip x:Name="tooltip">

            <!-- Arrange tooltip elements vertically -->
            <StackPanel Orientation="Vertical"
                        Grid.Row="1">

                <!-- Image title -->
                <TextBlock Text="{x:Bind ImageTitle, Mode=OneWay}"
                           HorizontalAlignment="Center"
                           Style="{StaticResource SubtitleTextBlockStyle}" />

                <!-- Arrange elements horizontally -->
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center">

                    <!-- Image file type -->
                    <TextBlock Text="{x:Bind ImageFileType}"
                               HorizontalAlignment="Center"
                               Style="{StaticResource CaptionTextBlockStyle}" />

                    <!-- Image dimensions -->
                    <TextBlock Text="{x:Bind ImageDimensions}"
                               HorizontalAlignment="Center"
                               Style="{StaticResource CaptionTextBlockStyle}"
                               Margin="8,0,0,0" />
                </StackPanel>
            </StackPanel>
        </ToolTip>
    </ToolTipService.ToolTip>

마우스로 미리 보기를 가리키거나 터치 스크린을 길게 누르면 이미지의 제목, 파일 유형 및 크기가 표시됩니다.This will show the title, file type, and dimensions of an image when you hover the mouse over the thumbnail (or press and hold on a touch screen).

3부: 시각적 상태 정의Part 3: Define visual states

이제 데이터를 위한 새 레이아웃을 만들었지만, 앱은 현재 기본 스타일 대신 이 레이아웃을 사용해야 하는 시기를 알지 못합니다.You've now created a new layout for your data, but the app currently has no way of knowing when to use this layout over the default styles. 이 문제를 해결하려면 VisualStateManagerVisualState 정의를 추가해야 합니다.To fix this, you need to add a VisualStateManager and VisualState definitions.

VisualStateManager 추가Add a VisualStateManager

페이지의 루트 요소인 RelativePanel에 다음 코드를 추가합니다.Add the following code to the root element of the page, RelativePanel.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
    ...

        <!-- Large window VisualState -->
        <VisualState>

        </VisualState>

        <!-- Medium window VisualState -->
        <VisualState>

        </VisualState>

        <!-- Small window VisualState -->
        <VisualState>

        </VisualState>

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

시각적 상태를 적용하는 StateTrigger 생성Create StateTriggers to apply the visual state

다음으로 각 맞춤 지점에 해당하는 StateTriggers를 만듭니다.Next, create the StateTriggers that correspond to each snap point. MainPage.xaml에서 각 VisualState에 다음 코드를 추가합니다.In MainPage.xaml, add the following code to each VisualState.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
    ...

        <!-- Large window VisualState -->
        <VisualState>

            <!-- Large window trigger -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowSnapPoint}"/>
            </VisualState.StateTriggers>

        </VisualState>

        <!-- Medium window VisualState -->
        <VisualState>

            <!-- Medium window trigger -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowSnapPoint}"/>
            </VisualState.StateTriggers>

        </VisualState>

        <!-- Small window VisualState -->
        <VisualState>

            <!-- Small window trigger -->
            <VisualState.StateTriggers >
                <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}"/>
            </VisualState.StateTriggers>

        </VisualState>

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

각 시각적 상태가 트리거되면 앱은 활성 VisualState에 할당된 레이아웃 속성을 사용합니다.When each visual state is triggered, the app will use whatever layout attributes are assigned to the active VisualState.

각 시각적 상태의 속성 설정Set properties for each visual state

마지막으로 상태가 트리거될 때 어떤 속성을 적용할지를 VisualStateManager에 알리는 각 시각적 상태에 대한 속성을 설정합니다.Finally, set properties for each visual state to tell the VisualStateManager what attributes to apply when the state is triggered. 각 setter는 특정 XAML 요소의 속성 하나를 대상으로 삼아 지정된 값으로 설정합니다.Each setter targets one property of a particular XAML element and sets it to the given value. 다음 코드를 방금 만든 SmallWindow 시각적 상태에, StateTriggers 뒤에 추가합니다.Add this code to the SmallWindow visual state you just created, after the StateTriggers.

    <!-- Small window setters -->
    <VisualState.Setters>

        <!-- Apply small template and styles -->
        <Setter Target="ImageGridView.ItemTemplate"
                Value="{StaticResource ImageGridView_SmallItemTemplate}" />
        <Setter Target="ImageGridView.ItemContainerStyle"
                Value="{StaticResource ImageGridView_SmallItemContainerStyle}" />

        <!-- Adjust the zoom slider to fit small windows-->
        <Setter Target="ZoomSlider.Minimum"
                Value="80" />
        <Setter Target="ZoomSlider.Maximum"
                Value="180" />
        <Setter Target="ZoomSlider.TickFrequency"
                Value="20" />
        <Setter Target="ZoomSlider.Value"
                Value="100" />
    </VisualState.Setters>

이러한 setter는 이미지 갤러리의 ItemTemplate을 이전 섹션에서 만든 새 DataTemplate으로 설정합니다.These setters set the ItemTemplate of the image gallery to the new DataTemplate that you created in the previous section. 또한 작은 화면에 더 잘 맞도록 확대/축소 슬라이더를 조정합니다.They also tweak the zoom slider to better fit the small screen.

앱 실행Run the app

앱을 실행합니다.Run the app. 앱이 로드되면 창의 크기를 변경해 봅니다.When the app loads, try changing the size of the window. 창을 작은 크기로 축소하면 앱이 2부에서 만든 작은 레이아웃으로 전환되는 것을 볼 수 있습니다.When you shrink the window to a small size, you should see the app switch to the small layout you created in Part 2.

작은 창: 이후

더 나아가기Going further

이제 이 실습을 완료했으므로, 여러분은 혼자 더 많은 실습을 수행할 수 있는 충분한 적응형 레이아웃 지식을 얻었습니다.Now that you've completed this lab, you have enough adaptive layout knowledge to experiment further on your own. 더 큰 문제를 해결하려면 Surface Hub와 같은 더 큰 화면 크기에 맞게 레이아웃을 최적화해보세요.For a bigger challenge, try optimizing the layout for larger screen sizes, like Surface Hub. Surface Hub 레이아웃을 테스트하려면 Visual Studio를 사용하여 Surface Hub 앱 테스트를 참조하세요.See Test Surface Hub apps using Visual Studio if you'd like to test a Surface Hub layout.

문제가 있는 경우 XAML을 사용한 반응형 레이아웃 섹션에서 더 많은 지침을 찾을 수 있습니다.If you get stuck, you can find more guidance in these sections of Responsive layouts with XAML.

또는 초기 사진 편집 앱의 빌드 방법에 대해 자세히 알아보려면 XAML 사용자 인터페이스데이터 바인딩의 이 자습서를 확인하세요.Alternatively, if you want to learn more about how the initial photo editing app was built, check out these tutorials on XAML user interfaces and data binding.

PhotoLab 샘플의 최종 버전 다운로드Get the final version of the PhotoLab sample

이 자습서에서는 전체적인 사진 편집 앱을 빌드하지 않으므로 최종 버전을 확인하여 사용자 지정 애니메이션 및 스타일 같은 다른 기능을 살펴보세요.This tutorial doesn't build up to the complete photo editing app, so be sure to check out the final version to see other features such as custom animations and styles.