C++ 자습서 시리즈 중 이 부분에서는 페이지 및 탐색을 추가하고, 페이지의 컨트롤 및 콘텐츠를 정렬하며, 다양한 방향과 보기에 맞게 페이지 레이아웃을 조정하는 방법을 알아봅니다.

Windows 스토어 앱용 UI 디자인은 콘텐츠를 구성하고 제공하는 것, 그리고 사용자가 콘텐츠에 대해 실행할 수 있도록 명령을 제공하는 것과 관련이 있습니다. UI 디자인에는 앱의 페이지 구성, 페이지 간 탐색, 각 페이지의 콘텐츠 및 명령 레이아웃이 포함됩니다.

Windows 스토어 앱에서 사용할 수 있는 다양한 탐색 패턴이 있습니다. 탐색 패턴은 앱에 가장 적합한 탐색 패턴을 선택하는 데 도움이 됩니다.

참고  

앱 기능 전체 프로세스 시리즈의 일부로 두 가지 기본 탐색 패턴(플랫 탐색 및 계층적 탐색)의 작동 방법을 살펴보세요.

시작하기 전에...

• 이 자습서는 시리즈 중 세 번째 자습서입니다. 이 자습서를 읽기 전에 C++의 Hello World와 앱 수명 주기 및 상태 관리를 읽으세요.
• 이 자습서의 전체 코드는 코드 갤러리의 Hello World(C++) 샘플에서 확인할 수 있습니다.

1단계: 페이지 및 탐색 추가

이 자습서에서는 XAML로 사용자 인터페이스를 만드는 방법의 기본 사항에 대해 살펴봅니다. 이러한 기본 사항을 알아보기 위해 사용자가 사진 라이브러리에서 이미지를 선택할 수 있도록 하는 간단한 사진 뷰어를 HelloWorld 앱에서 만든 다음 이미지와 함께 이미지 파일에 대한 정보를 표시합니다. 뷰어를 포함하기 위해 앱에 새 페이지를 추가합니다. 새 페이지에 액세스하려면 페이지 간 탐색을 위한 명령을 추가합니다.

먼저 사진 뷰어용 새 페이지를 추가합니다. 그런 다음 사용자가 새 페이지에 액세스할 수 있도록 기본 페이지에 탐색 명령을 추가합니다.

사진 뷰어 페이지 추가

여기에서는 앱 수명 주기 및 상태 관리의 코드로 시작합니다.

앱에 페이지를 추가하려면

1. 솔루션 탐색기에서 HelloWorld 프로젝트를 선택한 다음 프로젝트 > 새 항목 추가를 선택합니다.
2. 새 항목 추가 대화 상자의 왼쪽 창에서 Visual C++ 아래의 Windows 스토어를 선택합니다.
3. 가운데 창에서 기본 페이지를 선택합니다.
4. 페이지의 이름으로 "PhotoPage.xaml"을 입력합니다.
5. 추가 단추를 선택합니다. 페이지의 XAML(Extensible Application Markup Language) 및 코드 숨김 파일이 프로젝트에 추가됩니다.

   다음은 새 항목 추가 대화 상자입니다.

   

   빈 앱 템플릿(빈 페이지 아님)에 새 페이지를 처음 추가하면 Microsoft Visual Studio에서 프로젝트에서 누락된 파일을 추가해야 한다는 경고 메시지가 표시됩니다. 첫 번째 자습서에서 이러한 파일을 추가했으므로 이 경고가 이제 나타나지 않아야 합니다. 경고가 나타날 경우 예를 선택하여 파일(여러 가지 유틸리티 클래스에 대한 파일)을 공용 폴더에 추가합니다.

6. pageTitle이란 이름의 TextBlock를 선택합니다. 아직 선택하지 않았으면 속성 창에서 속성 보기 단추를 선택합니다().
7. 속성 창의 공용 아래에서 Text 속성에 대해 속성 마커를 선택합니다. 속성 메뉴가 열립니다.

   참고  속성 마커는 속성 값의 오른쪽에 있는 작은 상자 기호입니다. 이 경우 Text 속성 마커는 녹색이며, 리소스에 대해 설정되었음을 나타냅니다.

8. 속성 메뉴에서 리소스 편집을 선택합니다. 리소스 편집 대화 상자가 열립니다.
9. 리소스 편집 대화 상자에서 값을 "My Application"에서 "Hello, photo!"로 변경합니다.
10. 확인 단추를 선택합니다.

    리소스 편집을 마치면 PhotoPage.xaml 상단에 있는 리소스 정의에 대한 XAML이 다음과 같이 업데이트됩니다.

    XAML

    복사

    <x:String x:Key="AppName">Hello, photo!</x:String>
    
    

탐색 추가

XAML UI 프레임워크는 Frames 및 Pages를 사용하고 웹 브라우저에서 탐색과 비슷하게 작동하는 기본 제공 탐색 모델을 제공합니다. Frame 컨트롤은 Pages를 호스트하며, 방문한 페이지 간에 이동하는 데 사용할 수 있는 탐색 기록을 제공합니다. 탐색하는 페이지 간에 데이터를 전달할 수도 있습니다.

처음 두 자습서에서는 Frame을 만들고 앱이 시작될 때 MainPage로 이동하는 App.xaml.cpp의 코드를 살펴보았습니다. 여기에서는 MainPage에 명령을 추가하여 같은 방식으로 새 PhotoPage로 이동합니다.

페이지 간에 이동하려면

1. 솔루션 탐색기에서 MainPage.xaml를 엽니다.
2. XAML 편집기에서 StackPanel greetingOutput 바로 다음의 TextBlock에 다음과 같이 Button 요소를 추가합니다.
   XAML

   복사

   <Button Content="Go to photo page"/>
   
   

   다음은 단추를 추가한 후의 StackPanel입니다.

   XAML

   복사

   <StackPanel Grid.Row="1" Margin="120,30,0,0">
       <TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
       <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
           <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"
                    TextChanged="NameInput_TextChanged"/>
           <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
       </StackPanel>
       <TextBlock x:Name="greetingOutput" Style="{StaticResource BigGreenTextStyle}"/>
       <Button Content="Go to photo page"/>
   </StackPanel>
   
   
   

3. XAML 편집기 또는 디자인 뷰에서 MainPage.xaml에 추가한 "사진 페이지로 이동" Button을 선택합니다.
4. 속성 창에서 이벤트 단추()를 선택합니다.
5. 이벤트 목록 맨 위의 Click 이벤트 텍스트 상자에 Click 이벤트를 처리하는 함수의 이름을 "PhotoPageButton_Click"으로 입력합니다.
6. Enter 키를 누릅니다. 이벤트 처리기 메서드가 MainPage.xaml.cpp에서 만들어지고 이벤트 발생 시 실행될 코드를 추가할 수 있도록 코드 편집기에서 열립니다.
7. PhotoPage 클래스가 표시되도록 MainPage.xaml.cpp 상단에 다음 #include 지시문을 추가합니다.
   C++

   복사

   #include "PhotoPage.xaml.h"
   
   

8. 만든 MainPage.xaml.cpp의 Click 이벤트 처리기에 다음 코드를 추가합니다.
   C++

   복사

   if (this->Frame != nullptr)
   {
        this->Frame->Navigate(TypeName(PhotoPage::typeid));
   }
   
   

   Navigate를 호출하면 새 PhotoPage가 인스턴스화됩니다. 사진 페이지의 상태를 유지하려면 사용자가 다시 탐색할 때마다 페이지가 다시 생성되지 않도록 탐색 캐시를 사용하도록 설정할 수 있습니다.

9. PhotoPage.xaml로 다시 전환합니다. XAML 편집기 또는 디자인 뷰에서 루트 Page 요소를 선택합니다.
10. 속성 창에서 속성 단추()를 선택합니다.
11. 속성 창의 공용 아래에서 아래쪽 화살표를 클릭하여 고급 속성을 표시하고 NavigationCacheMode 값을 Enabled로 변경합니다.
12. F5 키를 눌러 앱을 빌드 및 실행합니다. 앱에서 사진 페이지로 이동 단추를 선택합니다. 사진 페이지가 열립니다. 뒤로 단추를 선택하여 기본 페이지로 돌아갑니다.

탐색에 대한 지원이 기본 제공되는 기본 페이지 템플릿을 기반으로 하므로 사진 페이지에 뒤로 단추를 추가할 필요가 없습니다. 뒤로 단추는 Frame 기록을 사용해 이전 페이지로 돌아가며, Frame.CanGoBack 속성이 true인 경우에만 표시됩니다.

2단계: 페이지에 컨트롤 및 콘텐츠 추가

이제 사진 페이지에 콘텐츠를 추가합니다. 사진 페이지의 레이아웃 작업을 시작하기 전에 XAML을 사용하는 레이아웃의 기본 사항을 이해하면 도움이 됩니다.

XAML을 사용하여 UI 만들기

XAML 레이아웃 시스템은 고정 레이아웃과 가변 레이아웃을 모두 지원합니다.

고정 레이아웃에서는 컨트롤에 정확한 픽셀 크기와 위치를 제공합니다. 사용자가 장치의 해상도나 방향을 변경해도 UI가 변경되지 않습니다. 고정 레이아웃은 다양한 폼 요소 및 디스플레이 크기에 따라 비례적으로 늘어나거나 제한되거나 잘릴 수 있습니다.

가변 레이아웃은 장치에서 사용 가능한 시각적 공간에 따라 유연하게 확대, 축소 및 다시 배치됩니다. 가변 레이아웃에서는 앱의 크기가 조정되면 레이아웃 컨테이너 및 컨트롤의 크기와 위치도 자동으로 조정됩니다. Windows 스토어 앱에서는 일부 장소에서 여전히 고정 요소와 값을 사용할 수 있지만, 전반적인 UI를 가변적으로 설정하여 서로 다른 해상도, 레이아웃 및 보기에 맞게 조정되도록 해야 합니다.

대부분의 앱 콘텐츠는 그룹 또는 계층 구조로 구성할 수 있습니다. 여기서는 레이아웃 컨테이너를 사용하여 UI 요소를 그룹화 및 정렬합니다. XAML 레이아웃 시스템은 콘텐츠를 정렬할 수 있는 컨테이너 역할을 하는 다양한 Panel 컨트롤(예: Grid, StackPanel 및 Canvas)을 제공합니다. 요소의 크기가 명시적으로 설정되지 않은 경우 대부분의 컨테이너는 자식 요소에 대해 자동 크기 조정을 수행합니다.

행과 열에 콘텐츠를 정렬하려면 Grid를 사용합니다. Grid.Row 및 Grid.Column 연결 속성을 사용하여 요소를 배치합니다. Grid.RowSpan 및 Grid.ColumnSpan 연결 속성을 사용하면 여러 행과 열에 걸쳐 내용을 표시할 수 있습니다.

StackPanel을 사용하여 콘텐츠를 가로 또는 세로로 정렬합니다.

콘텐츠의 배치 및 크기 조정의 모든 면을 제어하려는 경우 Canvas를 사용합니다. Canvas는 자식 요소의 크기를 자동으로 지정하지 않으므로 사용자가 명시적으로 크기를 지정해야 합니다.

요소의 크기 및 위치를 제어하려면 해당 레이아웃 속성을 설정합니다. 다음은 몇 가지 레이아웃 속성 및 해당 효과입니다.

• HorizontalAlignment 및 VerticalAlignment: 개체가 부모 개체를 기준으로 사용할 위치를 지정합니다.
• Margin:컨트롤 주변, 자식 개체의 외부와 패널의 경계 사이에 있는 빈 공간의 양을 지정합니다.
• Width 및 Height: 픽셀 단위로 측정되는 고정 값을 지정합니다.
• MinWidth/MaxWidth 및 MinHeight/MaxHeight: 가변 크기 조정을 허용하지만 제한하는 값을 지정합니다.

이 자습서에서는 이러한 컨테이너 및 레이아웃 속성을 사용하여 사진 뷰어 페이지용 가변 레이아웃을 만듭니다.

XAML 레이아웃 도구

첫 번째 자습서에서는 XAML 파일에 XAML을 직접 입력하여 기본 페이지에 컨트롤을 추가했습니다. 그러나 Visual Studio에는 컨트롤을 시각적으로 추가하고 정렬하는 데 사용할 수 있는 XAML 디자이너도 포함되어 있습니다. 이 자습서의 나머지 단계에서는 XAML 디자이너를 사용하여 UI를 만듭니다. 시작하기 전에 사용할 Visual Studio UI의 부분 및 몇 가지 공통 작업을 완료하는 방법을 살펴보겠습니다.

사용할 Visual Studio의 주요 부분은 다음과 같습니다.

요소	이미지	설명
솔루션 탐색기		프로젝트의 파일을 관리합니다. 파일을 두 번 클릭하여 엽니다. 파일이 이미 열려 있는 경우 두 번 클릭하면 활성 문서가 됩니다.
속성		선택한 항목의 속성을 보고 수정합니다. 기본적으로 속성은 범주별로 그룹화됩니다. 속성을 보려면 범주를 확장합니다. 범주 맨 아래의 아래쪽 화살표를 클릭하여 추가 속성을 표시합니다.
XAML 디자이너		앱 UI의 요소를 추가하고 정렬합니다. 일반적인 조작은 끌어서 놓기로 항목 정렬, 클릭하여 항목 선택 등입니다.
XAML 편집기		XAML을 직접 편집합니다.
도구 상자		앱 UI에 컨트롤 및 기타 항목을 추가합니다. 디자이너의 화면으로 컨트롤을 끕니다.
장치		디자이너에서 실제 장치의 설정을 시뮬레이션합니다. 다른 앱 보기를 시뮬레이션하려면 보기 단추를 선택합니다. 다른 해상도를 시뮬레이션하려면 표시 설정을 변경합니다.
문서 개요		계층 구조 보기에서 UI 요소를 정렬합니다. 항목을 선택하려면 클릭합니다. 항목의 자식 요소를 보려면 화살표를 클릭합니다. 인접하지 않은 여러 항목을 선택하려면 Ctrl 키를 누른 채 클릭합니다. 인접한 여러 항목을 선택하려면 Shift 키를 누른 채 클릭합니다. 항목을 다시 정렬하려면 항목을 끕니다.

참고  이러한 지침에서는 Visual Studio의 기본 창 레이아웃을 사용한다고 가정합니다. 기본 레이아웃으로 다시 설정하려면 창 > 창 레이아웃 다시 설정을 선택합니다.

UI를 만드는 동안 자주 반복되는 몇 가지 공통 작업이 있습니다. 시작하기 전에 이러한 작업의 완료 방법을 습득하면 UI를 더 쉽게 만들 수 있습니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

탐색 명령 추가

1단계에서는 기본 페이지에서 새로운 사진 페이지로 이동하기 위해 Button을 추가했습니다. 편의상 기본 페이지의 캔버스에 단추를 두었습니다. 그러나 탐색 명령은 기본 페이지의 다른 항목과는 관련이 없으므로 단추의 위치가 적절하지 않은 것 같습니다. Windows 스토어 앱을 디자인할 때는 명령의 배치를 고려하는 것이 중요합니다.

Windows 스토어 앱에서는 기본적으로 숨겨진 명령을 그룹화하기 위한 앱 바를 제공합니다. 사용자는 필요 시 화면의 위쪽 또는 아래쪽 가장자리부터 살짝 밀거나 바로 가기 메뉴를 열어 명령을 표시할 수 있습니다. 화면 위쪽의 앱 바는 일반적으로 탐색에 사용되므로, 이제 탐색 앱 바를 추가하고 탐색 단추를 여기로 이동합니다.

탐색 앱 바를 추가하려면

1. 솔루션 탐색기에서 MainPage.xaml를 엽니다.
2. 문서 개요 창에서 "pageRoot" 요소를 확장한 다음 TopAppBar에 대한 바로 가기 메뉴를 열고 CommandBar 추가를 선택합니다.

   CommandBar 요소가 페이지에 추가됩니다.

   AppBar 또는 CommandBar를 페이지에 추가할 수 있습니다. AppBar는 더 많이 사용자 지정할 수 있지만 레이아웃을 더 많이 처리해야 합니다. CommandBar는 사용자 지정할 수 있는 부분이 더 적지만 레이아웃이 자동으로 처리됩니다. AppBar의 유연성이 필요하지 않는 한 CommandBar를 사용하는 것이 좋습니다.

CommandBar에는 AppBarButton, AppBarToggleButton 및 AppBarSeparator 요소만 포함될 수 있습니다. 위에서 추가한 탐색 단추를 교체하려면 AppBarButton을 CommandBar에 추가합니다.

앱 바 단추 추가

1. 문서 개요 창에서 CommandBar 요소를 확장한 다음 PrimaryCommands에 대한 바로 가기 메뉴를 열고 AppBarButton 추가를 선택합니다. AppBarButton이 CommandBar에 추가되고 선택됩니다.
2. 속성 창 아이콘 아래의 Symbol 드롭다운 목록에서 "사진"을 선택합니다.
3. 속성 창의 공용 아래에서 Label 값을 "AppBarButton"에서 "사진"으로 변경합니다.
4. 속성 창에서 이벤트 단추()를 선택합니다.
5. 이벤트 목록 맨 위에서 Click 이벤트를 선택합니다. 이벤트 텍스트 상자에 "PhotoPageButton_Click"을 입력합니다. 이전에 추가한 탐색 단추에 대해 만든 것과 동일한 이벤트 처리기를 사용합니다.

   다음은 앱 바에 대한 최종 XAML입니다.

   XAML

   복사

   <Page.TopAppBar>
       <CommandBar>
           <AppBarButton Label="Pictures" Icon="Pictures" Click="PhotoPageButton_Click"/>
       </CommandBar>
   </Page.TopAppBar>
   
   

6. 이제 탐색에 사용할 앱 바 단추가 있어 "사진 페이지로 이동" 단추가 더 이상 필요하지 않으므로 선택하고 Delete 키를 누릅니다.
7. F5 키를 눌러 앱을 빌드 및 실행합니다. 앱 바를 열려면 화면의 위쪽 또는 아래쪽 가장자리부터 살짝 밀거나 앱을 마우스 오른쪽 단추로 클릭합니다.

앱 바를 사용하여 기본 페이지의 레이아웃을 정리했으므로 이제 새로운 사진 뷰어 페이지의 레이아웃에 집중할 수 있습니다.

레이아웃 그리드 추가

Grid를 추가하여 페이지의 콘텐츠 영역을 3개의 행으로 나누는 작업부터 시작합니다. 처음 2개 행은 고정된 높이이고, 마지막 행은 나머지 사용 가능한 공간을 채웁니다.

Grid 패널을 PhotoPage.xaml 페이지에 추가하려면

1. PhotoPage.xaml을 엽니다.
2. 도구 상자에서 Grid를 끌어 페이지 중앙의 디자인 화면에 놓습니다.

   Grid가 페이지에 추가되고, 디자이너는 사용자가 원하는 레이아웃을 최대한 고려하여 몇 가지 속성을 설정합니다. Grid 주변에 파란색 강조 표시가 나타나서 현재 활성 개체임을 나타냅니다.

3. 속성 창의 이름 텍스트 상자에 Grid의 이름으로 "contentGrid"를 입력합니다.

   

4. 다음 Grid 속성에 대해 각각 속성 마커를 선택한 다음 다시 설정: Width, Height, HorizontalAlignment, VerticalAlignment 및 Margin을 선택합니다.
5. 레이아웃 아래에서 왼쪽 Margin 및 아래쪽 Margin을 모두 "120"으로 설정합니다.

   

6. 디자이너에서 Grid의 위쪽과 왼쪽을 따라 그리드 레일이라는 점선이 나타납니다. 행을 추가하려면 왼쪽 그리드 레일 위로 포인터를 이동합니다. 포인터가 더하기(+) 기호가 있는 화살표로 바뀌고, 행이 추가될 위치에 주황색 선이 표시됩니다.

   

7. 왼쪽 눈금자의 아무 곳이나 클릭하여 행을 추가합니다.
8. 이전 단계를 반복하여 Grid에 행을 하나 더 추가합니다.

   이제 Grid에는 행이 세 개 있습니다. 커서가 그리드 레일 위에 있으면, 크기 조정 옵션을 선택하고 행 Height 속성을 조정하는 데 사용할 수 있는 작은 플라이아웃이 나타납니다.

9. 플라이아웃이 나타날 때까지 첫 번째 행의 그리드 레일 위로 포인터를 이동합니다.
10. 아래쪽 화살표 단추를 선택하여 메뉴를 연 다음 픽셀을 선택합니다.

    

11. 다시 그리드 레일 위로 포인터를 이동한 다음 플라이아웃에서 숫자 값을 선택합니다.
12. "50"을 입력하고 Enter 키를 눌러 Height 속성을 50픽셀로 설정합니다.

    

13. 9-12단계를 반복하여 두 번째 행 Height를 70픽셀로 설정합니다.

    마지막 행은 "1*"(1 별표)의 기본값으로 설정됩니다. 즉, 나머지 사용 가능한 공간을 사용한다는 의미입니다.

이제 그리드 설정으로 생성되는 XAML을 살펴보겠습니다.

<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

Grid에서 행을 정의하기 위해 RowDefinition 개체를 Grid.RowDefinitions 컬렉션에 추가합니다. RowDefinition에서 속성을 설정하여 행의 모양을 지정할 수 있습니다. ColumnDefinition 개체와 Grid.ColumnDefinitions 컬렉션을 사용하여 동일한 방식으로 열을 추가합니다.

여는 Grid 태그에서 이 설정은 Grid.Row="1"입니다. Grid.Row 및 Grid.Column 연결 속성을 사용하여 Grid에 요소를 배치합니다. 행 및 열 번호 지정은 0부터 시작됩니다. 따라서 이 설정은 "contentGrid" 패널이 부모 Grid의 두 번째 행에 추가됨을 의미합니다. 사용자가 Grid를 추가할 때 끌어다 놓는 위치를 기반으로 Visual Studio에서 이 속성을 설정합니다.

사진 페이지에 컨트롤 추가

이제 Grid에 컨트롤을 추가합니다. 사진 라이브러리에서 사진을 가져오기 위해 Button을 추가하고, 사진을 표시하기 위해 Image 컨트롤을 추가하고, 사진 파일에 대한 정보를 표시하기 위해 몇몇 TextBlock 컨트롤을 추가합니다. Image 및 TextBlock 컨트롤을 정렬하기 위해 마지막 그리드 행에서 StackPanels을 사용합니다.

페이지에 컨트롤을 추가하려면

1. "Get photo(사진 가져오기)" 단추를 추가합니다.

   1. 문서 개요 창에서 "contentGrid" 패널을 선택합니다.
   2. 도구 상자에서 첫 번째 그리드 행으로 Button 컨트롤을 끌어다 놓습니다.
   3. 속성 창에서 HorizontalAlignment에 대한 속성 마커를 선택하고 해당 속성을 다시 설정한 다음 VerticalAlignment 및 Margin에 대해 동일한 작업을 수행합니다.
   4. 단추의 Content 속성(공통 범주)을 "Get photo"로 설정합니다.

2. 이미지 이름 TextBlock 추가

   1. 문서 개요 창에서 "contentGrid"를 선택한 상태로 도구 상자에서 두 번째 그리드 행으로 TextBlock 컨트롤을 끌어다 놓습니다.
   2. 속성 창에서 HorizontalAlignment, VerticalAlignment, Margin 등의 TextBlock 속성을 다시 설정합니다.
   3. 기타 그룹을 확장하고 스타일 속성을 찾습니다.
   4. 스타일 속성 메뉴에서 시스템 리소스 > SubheaderTextBlockStyle을 선택합니다.

      

3. 이미지 컨트롤 및 테두리 추가

   1. 문서 개요 창에서 "contentGrid"를 선택한 상태로 도구 상자에서 마지막 그리드 행으로 StackPanel을 끌어다 놓습니다.
   2. 속성 창에서 Width, Height, HorizontalAlignment, VerticalAlignment, Margin 등의 StackPanel 속성을 다시 설정합니다.
   3. StackPanel의 Orientation 속성을 Horizontal로 설정합니다.
   4. StackPanel에 대한 Name 텍스트 상자에 "imagePanel"을 입력하고 Enter 키를 누릅니다.
   5. StackPanel을 선택한 상태로 도구 상자에서 StackPanel로 Border 컨트롤을 끌어다 놓습니다.
   6. 속성 창의 브러시에서 Background를 선택합니다.
   7. 단색 브러시 스타일을 선택하고 색 값을 "#FF808080"으로 설정합니다.
   8. BorderBrush 속성에 대해 위의 두 단계를 반복합니다.

      

   9. 도구 상자에서 Border로 Image 컨트롤을 끌어다 놓습니다.
   10. Image에 대한 Name 텍스트 상자에 "displayImage"을 입력하고 Enter 키를 누릅니다.
   11. 공용 속성 그룹에 있는 Source 속성 상자의 드롭다운 목록에서 "Logo.png"를 선택합니다.
   12. 문서 개요 창에서 Image가 포함된 Border를 선택하고 속성 창의 레이아웃 그룹에서 Width 속성을 다시 설정합니다.

4. 이미지 정보 추가

   1. 도구 상자에서 "imagePanel" StackPanel로 TextBlock 컨트롤을 끌어와 Image 컨트롤의 오른쪽에 놓습니다.

      여기서 레이아웃 속성을 다시 설정할 필요는 없습니다. StackPanel 및 Grid는 자식 요소의 크기 조정을 다르게 처리합니다. 자세한 내용은 빠른 시작: 레이아웃 컨트롤 추가를 참조하세요.

   2. StackPanel을 선택하여 TextBlock이 더 이상 선택되지 않도록 하고 다른 TextBlock을 StackPanel로 끌어다 놓습니다. 이 작업을 두 번 더 수행합니다.

      이제 Image 컨트롤의 오른쪽에 4개의 TextBlock 컨트롤이 가로로 놓여 있습니다.

   3. 첫 번째 TextBlock을 선택하고 Text 속성을 "파일 이름:"으로 설정합니다.
   4. 세 번째 TextBlock을 선택하고 Text 속성을 "경로:"로 설정합니다.

이제 사진 뷰어 UI가 다음 그림과 같이 표시됩니다. 레이아웃은 거의 끝났지만, 아직 사진 정보를 보여 주는 TextBlocks의 모양을 수정하는 일이 남았습니다.

다음은 이 레이아웃용으로 생성된 XAML입니다.

<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Content="Get photo"/>
    <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource PageSubheaderTextStyle}"/>
    <StackPanel x:Name="imagePanel" Grid.Row="2" Orientation="Horizontal">
         <Border BorderBrush="Gray" BorderThickness="7" Background="Gray">
             <Image x:Name="displayImage" Source="Assets/Logo.png"/>
         </Border>
         <TextBlock TextWrapping="Wrap" Text="File name:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
         <TextBlock TextWrapping="Wrap" Text="Path:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
    </StackPanel>
</Grid>

추가한 TextBlocks의 레이아웃과 서식을 수정하려면 컨트롤을 세로 StackPanel로 그룹화합니다.

항목을 StackPanel로 그룹화하려면

1. 문서 개요 창의 "imagePanel"StackPanel에서 첫 번째 TextBlock을 선택합니다.
2. Shift 키를 누른 채 그룹의 마지막 TextBlock을 클릭합니다. 이제 4개의 TextBlock 컨트롤이 선택되었습니다.
3. 선택한 TextBlock 컨트롤 그룹에 대한 바로 가기 메뉴를 열고 그룹 정보 > StackPanel을 선택합니다.

   StackPanel이 페이지에 추가되고, 4개의 TextBlock 컨트롤이 배치됩니다.

4. 속성 창의 레이아웃에서 StackPanel의 Orientation 속성을 Vertical로 설정합니다.
5. StackPanel 왼쪽 Margin을 "20"으로 설정합니다.

마지막으로 할 일은 사진 정보 텍스트의 서식을 지정하는 것입니다. 텍스트에는 기본 제공 스타일을 사용하고, 약간의 여백을 설정하여 요소 사이에 공간을 만듭니다.

텍스트 스타일을 지정하려면

1. 문서 개요 창의 "imagePanel"StackPanel에서 첫 번째 TextBlock을 선택합니다.
2. Ctrl 키를 누른 채 그룹의 세 번째 TextBlock을 선택합니다. 이제 2개의 TextBlock 컨트롤이 선택되었습니다.
3. 속성 창의 기타 아래에 있는 Style 속성에 대한 메뉴에서 시스템 리소스 > CaptionTextBlockStyle을 선택합니다.
4. 그룹에서 두 번째와 네 번째 TextBlock 컨트롤을 선택합니다.
5. 이러한 컨트롤에 대해 Style 속성을 시스템 리소스 > BodyTextBlockStyle로 설정합니다. 왼쪽 Margin 속성 값을 10, 아래쪽 값을 30으로 설정합니다.

이제 사진 정보에 대한 XAML이 다음과 같이 표시됩니다.

<StackPanel Margin="20,0,0,0">
    <TextBlock TextWrapping="Wrap" Text="File name:" 
               Style="{ThemeResource CaptionTextBlockStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
    <TextBlock TextWrapping="Wrap" Text="Path:" 
               Style="{ThemeResource CaptionTextBlockStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
</StackPanel>

F5 키를 눌러 앱을 빌드 및 실행합니다. 사진 페이지로 이동합니다. 이제 모양은 다음과 같습니다.

3단계: 다른 방향 및 보기에 맞게 페이지 레이아웃 조정

지금까지 가로 방향에서 전체 화면을 볼 수 있도록 앱을 디자인했습니다. 그러나 Windows UI는 여러 방향과 레이아웃에 맞게 조정되어야 합니다. 특히 가로 방향과 세로 방향을 모두 지원해야 합니다. 여기에서는 모든 해상도나 방향에서 앱을 보기 좋게 표시하는 방법에 대해 알아봅니다.

Visual Studio의 서로 다른 보기 사용

여러 보기에서 앱이 어떻게 표시되는지 알아보려면 Visual Studio의 장치 창을 사용할 수 있습니다. 장치 창은 XAML 페이지가 활성 상태인 경우에만 사용할 수 있습니다. 장치 창에서 앱의 다양한 보기, 디스플레이 및 표시 옵션을 시뮬레이션할 수 있습니다. 이 자습서에서는 방향 옵션을 사용하는 방법을 살펴봅니다. 다른 화면 해상도로 UI를 보려면 표시 옵션을 사용합니다. 잘 디자인된 가변 레이아웃은 서로 다른 화면에 잘 표시되도록 조정됩니다.

세로 방향을 시도하여 앱이 어떻게 보이는지 알아보겠습니다.

Visual Studio의 서로 다른 보기를 사용하려면

1. 장치 창에서 세로() 단추를 선택합니다. 디자이너가 변경되어 세로 뷰를 시뮬레이트합니다.

   다음은 앱이 세로 방향으로 회전되고 보기가 너무 좁을 때의 모양입니다. 앱 UI의 너비를 조정해야 합니다.

   

2. 가로 단추를 선택하여 기본 보기로 다시 전환합니다.

세로 뷰 조정

이제 세로 뷰를 수정하겠습니다.

StackPanel을 Horizontal에서 Vertical로 변경하면 Border 및 Image의 크기가 자동으로 조정됩니다. 이것은 가변 레이아웃의 예입니다. StackPanel을 사용하면 자식 요소는 정방향으로 확장되고 역방향으로 축소됩니다. 이미지를 고정 크기로 설정하는 대신 레이아웃 패널에서 자식 요소의 정렬 및 크기 조정을 수행하도록 합니다.

세로 뷰를 조정하려면

1. PhotoPage.xaml에서 이 XAML 블록을 contentGrid Grid 요소 뒤에 추가합니다.
   XAML

   복사

           <VisualStateManager.VisualStateGroups>
               <VisualStateGroup>
                   <VisualState x:Name="DefaultLayout">
                       <Storyboard>
                       </Storyboard>
                   </VisualState>
   
                   <VisualState x:Name="Portrait">
                       <Storyboard>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetProperty="(StackPanel.Orientation)" 
                               Storyboard.TargetName="imagePanel">
                               <DiscreteObjectKeyFrame KeyTime="0">
                                   <DiscreteObjectKeyFrame.Value>
                                       <Orientation>Vertical</Orientation>
                                   </DiscreteObjectKeyFrame.Value>
                               </DiscreteObjectKeyFrame>
                           </ObjectAnimationUsingKeyFrames>
                           <ObjectAnimationUsingKeyFrames 
                               Storyboard.TargetProperty="(FrameworkElement.Margin)" 
                               Storyboard.TargetName="imagePanel">
                               <DiscreteObjectKeyFrame KeyTime="0">
                                   <DiscreteObjectKeyFrame.Value>
                                       <Thickness>0,0,20,0</Thickness>
                                   </DiscreteObjectKeyFrame.Value>
                               </DiscreteObjectKeyFrame>
                           </ObjectAnimationUsingKeyFrames>
                       </Storyboard>
                   </VisualState>
               </VisualStateGroup>
           </VisualStateManager.VisualStateGroups>
   
   

2. 문서 개요 창에서 "pageRoot" 요소를 선택합니다.
3. 속성 창에서 이벤트 단추()를 선택합니다.
4. 이벤트 목록에서 SizeChanged 이벤트를 찾습니다. 해당 이벤트의 텍스트 상자에 SizeChanged 이벤트를 처리하는 함수의 이름을 "PhotoPage_SizeChanged"로 입력합니다.
5. Enter 키를 누릅니다. 이벤트 처리기 메서드가 PhotoPage.xaml.cpp에서 만들어지고 이벤트 발생 시 실행될 코드를 추가할 수 있도록 코드 편집기에서 열립니다.
6. 다음 코드를 이벤트 처리기에 추가합니다.
   C++

   복사

           if (e->NewSize.Height / e->NewSize.Width >= 1)
           {
               VisualStateManager::GoToState(this, "Portrait", true);
           }
           else
           {
               VisualStateManager::GoToState(this, "DefaultLayout", true);
           }
   
   

다른 방향, 보기 및 해상도로 앱을 테스트하려면 Visual Studio의 시뮬레이터를 사용할 수 있습니다. 시뮬레이터에서 앱을 실행하려면 표준 도구 모음의 디버깅 시작 단추 옆에 있는 드롭다운 목록에서 시뮬레이터를 선택합니다. 시뮬레이터에서의 앱 테스트에 대한 자세한 내용은 Visual Studio에서 Windows 스토어 앱 실행을 참조하세요.

시뮬레이터에서 세로 방향으로 앱을 실행하면 다음과 같이 표시됩니다.

요약

축하합니다! Windows 스토어 앱에서 앱 데이터 및 세션 상태를 저장하는 방법을 알아본 세 번째 자습서를 마쳤습니다.

코드 보기

난관에 봉착했나요? 또는 작업의 확인이 필요하세요? 코드 갤러리의 Hello World(C++) 샘플에서 전체 코드를 참조하세요.

다음 단계

이 자습서 시리즈의 다음 부분에서는 파일에 액세스하고 파일로 작업하는 방법에 대해 알아봅니다. 파일 액세스 및 선택기(C++)를 참조하세요.