C++ 범용 Windows 앱에서 탐색 및 보기 추가(자습서 3/4)

C++ 자습서 시리즈 중 이 부분에서는 페이지 및 탐색을 추가하고, 페이지의 컨트롤 및 콘텐츠를 정렬하며, 다양한 방향과 보기에 맞게 페이지 레이아웃을 조정하는 방법을 알아봅니다. 여기서는 Visual Studio의 디자인 도구를 사용하려 하지만, XAML을 코드 편집기에 직접 입력하여 UI를 만들고 수정할 수도 있습니다.

스토어 앱용 UI 디자인은 앱 페이지, 페이지 간 탐색, 그리고 각 페이지의 명령 및 콘텐츠 레이아웃을 정의하는 작업입니다. 탐색 패턴은 앱에 가장 적합한 탐색 패턴을 선택하는 데 도움이 될 수 있습니다.

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

시작하기 전에...

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

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

첫 번째로 할 일은 새 페이지를 추가하고 MainPage에서 새 페이지로 이동하는 방법을 추가하는 것입니다.

사진 뷰어 페이지 추가

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

Dn263172.wedge(ko-kr,WIN.10).gif페이지를 추가하려면

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

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

    Visual Studio 새 항목 추가 대화 상자

Dn263172.wedge(ko-kr,WIN.10).gif앱 제목을 변경하려면

  1. 새 페이지에서 페이지별 AppName 리소스를 보유하는 Page.Resources 노드를 삭제합니다. 이전 자습서에서 정의한 공유 앱 이름을 사용하려고 합니다.
  2. pageTitle이란 이름의 TextBlock를 선택합니다. 속성 창에서 속성 보기의 단추를 선택합니다. (속성 단추).
  3. 속성 창의 공용 아래에서 Text 속성에 대해 속성 마커를 선택합니다. 속성 메뉴가 열립니다.
    참고  속성 마커는 속성 값의 오른쪽에 있는 작은 상자 기호입니다. 이 경우 Text 속성 마커는 녹색이며, 리소스에 대해 설정되었음을 나타냅니다.
  4. 속성 메뉴에서 리소스 편집을 선택합니다. 리소스 편집 대화 상자가 열립니다.
  5. 리소스 편집 대화 상자에서 값을 "My Application"에서 "Hello, photo!"로 변경합니다.리소스 편집 바로 가기 메뉴
  6. 확인 단추를 선택합니다.

    리소스를 편집하고 나면 App.xaml에 리소스 정의에 대한 XAML(Extensible Application Markup Language)이 다음과 같이 업데이트됩니다.

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

    원할 경우 코드 편집기에서 XAML을 직접 편집할 수도 있습니다.

  7. 새로운 기본 페이지를 Phone 프로젝트에 추가합니다. TitlePanel에서 PageTitle TextBlock을 삭제하고 텍스트 속성을 AppName 정적 리소스로 변경합니다. 이제 노드는 다음과 같습니다.

    
            <!-- TitlePanel -->
            <StackPanel Grid.Row="0" Margin="24,17,0,28">
                <TextBlock Text="{StaticResource AppName}" Style="{ThemeResource 
                TitleTextBlockStyle}" Typography.Capitals="SmallCaps"/>
            </StackPanel>
    
    

    이제 리소스에 대한 변경 사항이 Phone 디자인 표면에도 반영되어 "Hello Photo!"로 표시됩니다.

탐색 추가

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

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

일반적인 데스크톱 앱에서는 기본 페이지에서 새 사진 페이지로 이동하는 단추를 추가할 수 있습니다. 스토어 앱을 디자인할 때는 명령의 배치를 고려하는 것이 중요합니다. 레이아웃이 단순하고 깔끔하게 유지되도록 많은 명령이 기본 콘텐츠 영역에서 벗어나 있습니다.

스토어 앱에서는 항상 표시될 필요가 없는 명령을 그룹화할 수 있도록 앱 바를 제공합니다. 사용자는 화면 아래쪽 가장자리(또한 Windows 스토어 앱의 위쪽 가장자리)에서 살짝 밀거나 바로 가기 메뉴를 열어 명령에 액세스할 수 있습니다. Windows 스토어 앱에서는 상단 앱 바가 일반적으로 탐색을 위해 사용됩니다. Windows Phone 8.1 앱에는 상단 앱 바가 없으므로 하단 앱 바를 사용합니다.

Dn263172.wedge(ko-kr,WIN.10).gifWindows 8.1에서 탐색 앱 바를 추가하려면(문서 개요 및 속성 창 사용)

  1. 솔루션 탐색기에서 MainPage.xaml를 엽니다.
  2. 문서 개요 창(Ctrl+Alt+T)에서 "pageRoot" 요소를 확장한 다음 TopAppBar에 대한 바로 가기 메뉴를 열고 CommandBar 추가를 선택합니다. 복잡한 레이아웃에는 AppBar만 사용합니다.

    문서 개요 창
  3. 이제 문서 개요 창에 CommandBar 노드가 있습니다. 노드를 확장한 다음 PrimaryCommands에 대한 바로 가기 메뉴를 열고 AppBarButton 추가를 선택합니다. AppBarButtonCommandBar에 추가되고 선택됩니다.
  4. 속성 창(F4)의 아이콘 아래에 있는 Symbol 드롭다운 목록에서 "사진"을 선택합니다.
  5. 속성 창의 공용 아래에서 Label 값을 "AppBarButton"에서 "사진"으로 변경합니다.
  6. 이제 이벤트 단추를 선택합니다(이벤트 단추).
  7. 이벤트 목록 맨 위에 있는 Click 이벤트를 선택하고 이름을 "PhotoPageButton_Click"으로 지정합니다.

    도구에서 자동으로 생성된 XAML은 다음과 같습니다.

    
    <Page.TopAppBar>
        <CommandBar>
            <AppBarButton Label="Pictures" Icon="Pictures" Click="PhotoPageButton_Click"/>
        </CommandBar>
    </Page.TopAppBar>
    
    
  8. 이벤트 처리기 이름에 커서를 놓고 F12 키를 눌러서 정의로 이동합니다. 다음 코드를 처리기 함수에 추가합니다.

    
    if (this->Frame != nullptr)
    {
        this->Frame->Navigate(TypeName(PhotoPage::typeid));
    }
    
    
  9. 이제 #include PhotoPage.xaml.h가 MainPage.xaml.cpp의 맨 위에 있습니다. 입력을 시작하기만 하면 문 완성 기능을 통해 작업을 완료할 수 있습니다.

  10. F5 키를 눌러 앱을 빌드 및 실행합니다. 앱 바를 열려면 화면의 위쪽 또는 아래쪽 가장자리부터 살짝 밀거나 앱을 마우스 오른쪽 단추로 클릭합니다.

Dn263172.wedge(ko-kr,WIN.10).gifWindows Phone 8.1에 탐색 앱 바와 단추를 추가하려면(XAML 편집기 사용)

  1. MainPage.xaml을 열고 Page.Resources 닫는 태그 뒤에서 "Page.Bot" 입력을 시작합니다. 문 완성 기능에서 BottomAppBar를 제공합니다. Tab 키를 눌러서 그대로 적용합니다. 두 개의 BottomAppBar 태그 사이에서 문 완성 기능을 사용하여 CommandBar를 추가하고 CommandBarAppBarButton을 추가합니다. 단추의 여는 태그에서 문 완성 기능을 사용하여 Icon="Pictures", Label= "Pictures"를 추가합니다. "Click="를 입력하기 시작하면 스마트 태그에서 이벤트 처리기를 만들고 제안되는 이름이 그대로 적용됩니다. 사용자 제공 이름은 현재 지원되지 않습니다. 여기서는 이벤트 처리기 PhotoPageButton_Click을 호출하려 하므로, 지금은 프로젝트 수준에서 검색 및 바꾸기(Ctrl+Shift+H)를 수행하고 나서 다시 빌드(Ctrl+Shift+B)합니다.

    문 완성 드롭다운
    
     <Page.BottomAppBar>
            <CommandBar>
                <AppBarButton Icon="Pictures" Label="Pictures" Click="PhotoPageButton_Click"/>
            </CommandBar>
        </Page.BottomAppBar>
    
    
  2. 이벤트 처리기 이름에 커서를 놓고 F12 키를 눌러서 정의로 이동합니다. 다음 코드를 처리기 함수에 추가합니다.

    
    if (this->Frame != nullptr)
    {
        this->Frame->Navigate(TypeName(PhotoPage::typeid));
    }
    
    
  3. 이제 #include PhotoPage.xaml.h가 MainPage.xaml.cpp의 맨 위에 있습니다.

  4. 솔루션 탐색기에서 Windows Phone 8.1 프로젝트의 바로 가기 메뉴를 열고 시작 프로젝트로 설정을 선택합니다. F5 키를 눌러 앱을 빌드 및 실행합니다. 앱 바의 첫 번째 행은 이미 표시되어 있으며 오른쪽에 있는 줄임표 단추를 선택하여 앱 바를 완전히 확장합니다.

페이지 간 탐색

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

사진 페이지에 콘텐츠를 추가하기 전에 XAML의 레이아웃에 대한 기본적인 사항을 살펴보겠습니다.

  • XAML 레이아웃 시스템은 고정 레이아웃과 가변 레이아웃을 모두 지원합니다. 일반적으로 유동적 레이아웃을 사용하고 XAML 렌더링 엔진에서 다양한 디스플레이 크기 및 방향에 맞춰 UI 요소를 자동으로 크기 조정하고 배열하도록 하는 것이 좋습니다.

  • 대부분의 앱 콘텐츠는 Panel 컨트롤의 중첩된 그룹으로 구성됩니다. 가장 일반적으로 사용되는 패널은 유동적 레이아웃용 GridStackPanel과 정적 레이아웃용 Canvas입니다. Grid를 사용하여 콘텐츠를 행과 열로 배열하고 StackPanel을 사용하여 콘텐츠를 세로 또는 가로로 배열할 수 있습니다. GridsStackPanels 둘 다에 중첩된 GridsStackPanels가 포함될 수 있습니다. 배치 및 크기 조정에 관련된 모든 측면을 제어하려는 경우 Canvas를 사용합니다.

  • HorizontalAlignment, VerticalAlignment, Margin, Padding, Width, Height, MinWidth/MaxWidth, MinHeight/MaxHeight 같은 속성을 설정하여 TextBlocks, Image 컨트롤, ListViews 등 자식 요소의 크기 및 위치를 지정할 수 있습니다.

  • 범용 Windows 앱에서는 큰 화면에서 멋지게 보이는 UI 컨트롤이 작은 화면에서도 멋지게 보인다거나 그 반대의 경우를 항상 보장할 수 없으므로 Windows 8.1 및 Windows Phone 8.1 프로젝트마다 고유의 UI가 있습니다. 하지만 두 프로젝트에서 서로 다른 컨트롤이나 레이아웃을 사용할 수 있더라도 레이아웃의 일반적인 원리는 모든 스토어 앱에 적용됩니다. 그리고 이 앱과 같은 단순 레이아웃에서는 두 프로젝트의 XAML이 매우 유사합니다.

레이아웃 그리드 추가(Windows 8.1)

콘텐츠 그리드를 추가하는 것부터 시작해 보겠습니다. 3개 행이 지정됩니다. 처음 2개 행은 고정된 높이이고, 마지막 행은 나머지 사용 가능한 공간을 채웁니다. 편집기에 직접 입력하여 동일한 XAML을 생성할 수도 있지만, 여기서는 XAML 디자인 도구를 사용하겠습니다.

Dn263172.wedge(ko-kr,WIN.10).gif그리드 패널을 PhotoPage.xaml에 추가하려면

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

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

    3. 새 그리드가 여전히 선택된 상태에서 F4 키를 눌러 속성 창을 표시한 다음, 이름 텍스트 상자에 "contentRoot"를 Grid의 이름으로 입력합니다.

      이름 속성 텍스트 상자

  1. 다음 Grid 속성에 대해 각각 속성 마커를 선택한 다음 다시 설정: Width, Height, HorizontalAlignment, VerticalAlignmentMargin을 선택합니다.
  2. 레이아웃 아래에서 Windows 앱에 대한 왼쪽 Margin 및 아래쪽 Margin을 둘 다 "120"으로 설정합니다. Windows Phone 8.1 앱의 경우 각 여백을 20으로 설정합니다.

    Margin 속성

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

    그리드 행 추가

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

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

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

    그리드 행 플라이아웃 메뉴

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

    그리드 행 높이(픽셀)

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

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

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


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

이 그리드에서 행이 어떻게 정의되었는지 확인한 다음 여는 Grid 태그에서 다음 설정을 확인합니다. Grid.Row="1". 이 그리드 특성은 부모 그리드에 대한 참조입니다. 방금 추가한 그리드는 페이지의 루트 그리드에 중첩되어 있습니다. Grid.Row 특성은 컨트롤이 있는 부모 그리드의 행을 지정합니다. 행과 열 번호는 0부터 시작하므로 사실상 "1"은 부모 그리드의 두 번째 행입니다. XAML을 살펴보면 첫 번째 행인 행 0이 페이지 제목과 뒤로 단추가 있는 그리드로 채워지는 것을 알 수 있습니다.

디자이너는 추가할 때 XAML 요소를 내려 놓은 위치에 따라 그리드 행을 설정합니다. 수동으로 수정할 수도 있습니다.

사진 페이지에 컨트롤 추가(Windows 8.1)

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

Dn263172.wedge(ko-kr,WIN.10).gif페이지에 컨트롤을 추가하려면

  1. Dn263172.wedge(ko-kr,WIN.10).gif"Get photo(사진 가져오기)" 단추를 추가합니다.

    1. 문서 개요 창(Ctrl+Alt+T)에서 "contentRoot" 패널을 선택합니다.
    2. 도구 상자에서 첫 번째 그리드 행으로 Button 컨트롤을 끌어다 놓습니다.
    3. 속성 창에서 HorizontalAlignment에 대한 속성 마커를 선택하고 해당 속성을 다시 설정한 다음 VerticalAlignmentMargin에 대해 동일한 작업을 수행합니다.
    4. 단추의 Content 속성(공통 범주)을 "Get photo"로 설정합니다.
  2. Dn263172.wedge(ko-kr,WIN.10).gif이미지 이름 TextBlock 추가

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

      시스템 리소스 메뉴

  3. Dn263172.wedge(ko-kr,WIN.10).gif이미지 컨트롤 및 테두리 추가

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

      Visual Studio 브러시 편집기

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

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

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

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

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

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

이제 Windows 8.1 앱용 사진 뷰어 UI는 다음 사진과 같습니다. Windows Phone 8.1 앱의 경우 디자인 화면을 가로 모드로 바꾸면 유사하게 보입니다. 뒷부분에서는 레이아웃이 세로 모드에 맞게 올바르게 조정되도록 하는 XAML 태그를 추가하겠습니다. 레이아웃은 거의 끝났지만, 아직 사진 정보를 보여 주는 TextBlocks의 모양을 수정하는 일이 남았습니다.

XAML 디자이너의 앱

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

Dn263172.wedge(ko-kr,WIN.10).gif항목을 StackPanel로 그룹화하려면

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

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

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

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

Dn263172.wedge(ko-kr,WIN.10).gif텍스트 스타일을 지정하려면

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

추가한 그리드에 대한 전체 XAML은 이제 다음과 같습니다.


 <Grid x:Name="contentRoot" Grid.Row="1" Margin="120,0,0,120">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="70"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Button Content="Get photo"  FontFamily="Global User Interface"/>
            <StackPanel x:Name="imagePanel" Grid.Row="2" Orientation="Horizontal">
                <Border BorderBrush="Gray" BorderThickness="1" Background="Gray">
                    <Image x:Name="displayImage" Source="Assets/Logo.png" Margin="0,-9,0,9" d:IsLocked="True"/>
                </Border>
                <StackPanel Margin="20,0,0,0">
                    <TextBlock TextWrapping="Wrap" Text="FileName:" Style="{StaticResource CaptionTextBlockStyle}"/>
                    <TextBlock x:Name="tbName" TextWrapping="Wrap" Text="TextBlock" Style="{StaticResource BodyTextBlockStyle}"/>
                    <TextBlock TextWrapping="Wrap" Text="Path:" Style="{StaticResource CaptionTextBlockStyle}"/>
                    <TextBlock x:Name="tbPath" TextWrapping="Wrap" Text="TextBlock" Style="{StaticResource BodyTextBlockStyle}"/>
                </StackPanel>
            </StackPanel>
            <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="TextBlock"/>
        </Grid>

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

XAML 디자이너의 앱

레이아웃 그리드 및 컨트롤 추가(Windows Phone 8.1)

Windows Phone 프로젝트에 대한 레이아웃 그리드는 거의 동일하지만 몇 가지 부분에서 중요한 차이가 있습니다. 원할 경우 Windows 8.1 프로젝트에 대해 사용한 동일 단계에 따라 아래에 나온 대로 변경할 수 있습니다.

또는 쉽게 진행하려는 경우 다음 XAML을 사용하여 Windows Phone 프로젝트의 PhotoPage.xaml에 이미 제공된 콘텐츠 그리드를 바꿉니다.


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

Windows XAML과 Windows Phone XAML의 차이는 다음과 같습니다.

  • Windows Phone UI의 행 1 높이가 50픽셀로 감소됩니다.
  • Windows Phone UI의 여백이 더 작습니다.
  • Windows Phone UI에는 미리 정의된 CaptionTextBlockStyle이 없으므로 BodyTextBlockStyle만 사용합니다. 원할 경우 캡션 스타일을 만들 수 있습니다.

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

지금까지는 Windows 앱을 가로 방향의 전체 화면으로 보이도록 디자인했으며 Windows Phone 앱을 세로 모드로 보이도록 디자인했습니다. 하지만 두 플랫폼의 UI는 다른 방향에 맞게 조정되어야 합니다. 또한 Windows UI는 사용자가 시작한 창 크기 조정에 맞게 조정되어야 합니다.

Visual Studio의 서로 다른 보기 사용

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

장치 창

Windows 프로젝트에서 세로 방향을 사용하여 앱이 어떻게 보이는지 보겠습니다.

Dn263172.wedge(ko-kr,WIN.10).gifVisual Studio의 서로 다른 보기를 사용하려면

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

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

    세로 뷰 시뮬레이션

  2. 가로 단추를 선택하여 기본 보기로 다시 전환합니다.
  3. 이제 Windows Phone 프로젝트로 전환하고 디자이너를 가로 뷰로 전환합니다.

    가로 뷰 시뮬레이션

Windows 8.1에서 세로 뷰 조정

이번에는 Windows 프로젝트에서 세로 뷰를 수정해 보겠습니다.

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

Dn263172.wedge(ko-kr,WIN.10).gif세로 뷰를 조정하려면

  1. PhotoPage.xaml에서 이 XAML 블록을 contentRoot Grid 요소 뒤에 추가합니다.
    
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="Landscape">
                        <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. 루트 페이지 여는 태그에서 "SizeChanged"를 입력하기 시작하면 Visual Studio에서 이벤트 처리기를 자동으로 만듭니다. 기본 이름을 그대로 적용하고 F12 키를 눌러서 구현으로 이동한 후 다음 코드를 추가합니다.
    
    
    if (e->NewSize.Height / e->NewSize.Width >= 1)
    {
        VisualStateManager::GoToState(this, "Portrait", true);
    }
    else
    {
        VisualStateManager::GoToState(this, "Landscape", true);
    }
    
    
  3. Windows Phone 8.1 프로젝트에 대한 이전 두 단계를 반복합니다.

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

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

세로 뷰 시뮬레이션

이제 Windows Phone 프로젝트를 시작 프로젝트로 설정하고 F5 키를 눌러서 동일한 방식으로 테스트합니다.

요약

축하합니다! 세 번째 자습서를 완료했습니다. 이 자습서에서는 새 페이지를 앱에 추가하고 Visual Studio의 도구를 사용하여 사용자 인터페이스를 만드는 방법을 알아보았습니다.

코드 보기

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

다음 단계

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

관련 항목

디자이너용
탐색 패턴
명령 패턴
레이아웃
뒤로 단추에 대한 지침
허브 컨트롤에 대한 지침
앱 바에 대한 지침(Windows 스토어 앱)
앱 바에 접근성 구현
개발자용(XAML)
앱 바 추가(XAML)
페이지 간 탐색(XAML)
XAML 허브 컨트롤 샘플
XAML AppBar 컨트롤 샘플
XAML 탐색 샘플
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class

 

 

표시:
© 2015 Microsoft