Windows Runtime 8.x에서 UWP로의 사례 연구: Bookstore1

  • 아티클

이 토픽은 아주 간단한 Universal 8.1 앱을 Windows 10 UWP(Universal Windows Platform)앱으로 포팅하는 사례 연구를 제공합니다. Universal 8.1 앱은 Windows 8.1애 대한 앱 패키지 하나 및 Windows Phone 8.1에 대한 다른 앱 패키지를 빌드하는 앱입니다. 다양한 장치에 설치할 수 있는 단일 앱 패키지를 Windows 10으로 만들 수 있으며, 이는 이 사례 연구에서 수행하게 될 작업입니다. UWP 앱 가이드를 확인하세요.

포트할 앱은 보기 모델에 바인딩된 ListBox로 구성됩니다. 보기 모델의 책 목록은 제목, 저자 및 책 표지를 보여 줍니다. 책 표지 이미지의 빌드 작업은 콘텐츠로 설정되며 출력 디렉터리로 복사하기는 복사하지 않음으로 설정됩니다.

이 섹션의 이전 항목은 여러 플랫폼 사이의 차이점에 대해 설명하고, XAML 태그에서 보기 모델에 바인딩을 통해 데이터에 액세스하는 것까지의 앱의 다양한 측면에 대한 포팅 프로세스에 대한 세부 정보 및 지침을 제공합니다. 사례 연구는 해당 지침을 보완하는 것을 목표로 하며 실제 예시에서 실행 중인 지침을 보여 줍니다. 사례 연구는 지침을 읽었다고 가정하며, 이 지침을 반복하여 보여 주지 않습니다.

참고 Visual Studio에서 Bookstore1Universal_10을 열 때 “Visual Studio 업데이트 필요”라는 메시지가 표시되면 TargetPlatformVersion의 단계를 수행합니다.

다운로드

Bookstore1_81 유니버설 8.1 앱을 다운로드합니다.

Bookstore1Universal_10 Windows 10 앱을 다운로드합니다.

Universal 8.1 앱

포팅하려는 Bookstore1_81 앱은 다음과 같습니다. 이는 앱 이름 및 페이지 제목의 제목 아래에 있는 책의 세로 스크롤 목록 상자일 뿐입니다.

Windows에서 서점1-81의 모양

Windows의 Bookstore1_81

Windows Phone에서 Bookstore1-81의 모양

Windows Phone의 Bookstore1_81

Windows 10 프로젝트로 포팅하기

Bookstore1_81 솔루션은 8.1 Universal App 프로젝트이며 다음의 프로젝트를 포함합니다.

  • Bookstore1_81.Windows. 이 프로젝트는 Windows 8.1에 대한 앱 패키지를 빌드합니다.
  • Bookstore1_81.WindowsPhone. 이 프로젝트는 Windows Phone 8.1에 대한 앱 패키지를 빌드합니다.
  • Bookstore1_81.Shared. 이는 소스 코드, 태그 파일, 기타 자산과 리소스를 포함하는 프로젝트로, 다른 두 프로젝트 모두에서 사용되는 프로젝트입니다.

이 사례 연구는 지원할 장치와 관련하여 Universal 8.1 앱을 보유하고 있는 경우의 일반적인 옵션을 설명합니다. 여기서 하는 결정은 간단한 판단입니다. 이 앱은 동일한 기능을 보유하고 있고, Windows 8.1 및 Windows Phone 8.1 형식 모두에서 대부분 동일한 코드를 사용합니다. 따라서 공유 프로젝트의 내용(및 다른 프로젝트에서 필요한 모든 것)을 Universal 장치 패밀리를 대상으로 하는 Windows 10으로 포팅합니다(가장 광범위한 장치에 설치할 수 있는 내용).

Visual Studio에서 새로운 프로젝트를 만든 다음 이 프로젝트로 Bookstore1_81의 파일을 복사한 뒤, 새로운 프로젝트에 복사한 파일을 포함하는 작업은 매우 빠르게 진행됩니다. 새로운 비어 있는 애플리케이션(Windows Universal) 프로젝트를 만드는 것으로 시작합니다. 생성한 새로운 비어 있는 애플리케이션(Windows Universal) 프로젝트의 이름을 Bookstore1Universal_10이라고 지정합니다. 다음은 Bookstore1_81에서 Bookstore1Universal_10으로 복사할 파일입니다.

공유 프로젝트에서

  • 책 표지 이미지 PNG 파일을 포함하는 폴더를 복사합니다(폴더는 \Assets\CoverImages임). 책 표지 이미지 PNG 파일을 포함하는 폴더를 복사한 뒤, 솔루션 탐색기에서 모든 파일 표시로 전환되어 있는지 확인합니다. 복사한 해당 파일을 마우스 우클릭하고 프로젝트에 포함을 클릭합니다. 해당 명령은 프로젝트에 파일 또는 폴더를 "포함"하는 것을 의미합니다. 파일 또는 폴더를 복사할 때마다, 매 복사본마다 솔루션 탐색기 새로 고침을 클릭하고 프로젝트에 파일 또는 폴더를 포함시킵니다. 이 작업은 대상에서 교체하는 파일에 대해서는 수행할 필요가 없습니다.
  • 보기 모델 소스 파일을 포함하는 폴더(해당 폴더는 \ViewModel임)를 복사합니다.
  • MainPage.xaml을 복사한 뒤 대상의 파일을 바꿉니다.

Windows 프로젝트에서

  • BookstoreStyles.xaml을 복사합니다. Windows 10 앱에서 이 파일의 모든 리소스 키를 확인할 수 있으므로, 이 키를 좋은 시작점으로 사용합니다. 해당하는 WindowsPhone에 포함된 일부 파일은 그렇지 않습니다.

방금 복사한 소스 코드 및 태그 파일을 편집하고, Bookstore1Universal_10으로 Bookstore1_81 네임스페이스에 대한 참조를 변경합니다. 파일에서 바꾸기 기능을 사용하는 것이 빠른 방법입니다. 코드 변경은 보기 모델 또는 다른 명령 코드에는 필요하지 않습니다. 그렇지만 Bookstore1Universal_10.BookstoreViewModel.AppName 속성에 의해 반환된 값을 “BOOKSTORE1_81”에서 “BOOKSTORE1UNIVERSAL_10”으로 변경하여 실행 중인 앱 버전을 더 쉽게 식별할 수 있습니다.

이제 앱을 바로 빌드하고 실행할 수 있습니다. 새로운 UWP 앱이 아직 명시적인 작업을 수행하지 않은 뒤, 다음처럼 Windows 10으로 포팅할 수 있습니다.

명시적 변경 내용이 없는 Windows 10 앱의 스크린샷

데스크톱 장치에서 실행 중인 초기 소스 코드 변경 내용이 있는 Windows 10 앱입니다.

초기 소스 코드가 변경된 Windows 10 앱의 스크린샷.

모바일 장치에서 실행 중인 초기 소스 코드 변경 내용이 있는 Windows 10 앱입니다.

보기 및 보기 모델이 제대로 작동하며 ListBox가 작동합니다. 지정된 스타일을 수정하기만 하면 됩니다. 모바일 장치의 밝은 테마에서 목록 상자의 테두리를 볼 수 있지만 쉽게 숨길 수 있습니다. 입력 체계가 너무 크기 때문에 사용 중인 스타일을 변경합니다. 또한 데스크톱 장치에서 실행할 때 앱이 밝은 색이어야 기본값처럼 보이게 할 수 있습니다. 그러므로 해당 사항을 변경합니다.

유니버설 스타일 지정

Bookstore1_81 앱은 Windows 8.1 및 Windows Phone 8.1 운영 체제에 맞게 스타일을 조정하기 위해 두 개의 다른 리소스 사전(BookstoreStyles.xaml)을 사용했습니다. 이 두 BookstoreStyles.xaml 파일 모두 Windows 10 앱에 필요한 스타일을 정확히 포함하지 않습니다. 그러나 좋은 소식은 여기서 하고자 하는 것이 실제로 위의 사항보다 훨씬 간단하다는 것입니다. 그러므로 주로 프로젝트 파일 및 태그를 제거하고 단순화하는 작업이 다음 단계에 포함됩니다. 단계는 아래와 같습니다. 또한 이 토픽의 맨 위에 있는 링크를 이용하여 프로젝트를 다운로드하고 여기와 사례 연구의 종료 사이의 모든 변경 내용을 확인할 수 있습니다.

  • 항목 간의 간격을 조이려면 MainPage.xaml에서 BookTemplate 데이터 템플릿을 찾아 루트 그리드에서 Margin="0,0,0,8"을(를) 삭제합니다.
  • 또한, BookTemplate에서 BookTemplateTitleTextBlockStyle 및 BookTemplateAuthorTextBlockStyle에 대한 참조를 볼 수 있습니다. Bookstore1_81은 두 앱에서 단일 키가 다르게 구현되도록 해당 키를 간접 참조로 사용했습니다. 더 이상 간접 참조가 필요하지 않습니다. 시스템 스타일을 직접 참조할 수 있습니다. 따라서 이러한 참조를 각각 TitleTextBlockStyle 및 SubtitleTextBlockStyle(으)로 대체합니다.
  • 이제 모든 장치에서 실행 시 테마가 무엇인지에 관계없이 적절하게 앱이 표시되도록 LayoutRoot의 배경을 올바른 기본값으로 설정해야 합니다. "Transparent"에서 "{ThemeResource ApplicationPageBackgroundThemeBrush}"(으)로 변경합니다.
  • TitlePanel에서 TitleTextBlockStyle 참조(지금은 너무 큰 참조)를 CaptionTextBlockStyle 참조로 변경합니다. PageTitleTextBlockStyle은(는) 더 이상 필요하지 않은 다른 Bookstore1_81 간접 참조입니다. 대신 HeaderTextBlockStyle을(를) 참조하도록 변경합니다.
  • ListBox에서 특별한 Background, Style 또는 ItemContainerStyle을 설정할 필요가 더 이상 없으므로, 이러한 세 가지 특성과 해당 값을 태그에서 삭제하기만 하면 됩니다. 그러나 ListBox의 테두리를 숨기고자 하므로 BorderBrush="{x:Null}"을(를) 추가합니다.
  • 더 이상 BookstoreStyles.xaml ResourceDictionary 파일의 리소스를 참조하지 않습니다. 이러한 리소스 모두를 삭제할 수 있습니다. 그러나 BookstoreStyles.xaml 파일 자체를 삭제하지 마세요. 다음 섹션에서 볼 수 있듯이 마지막으로 해당 파일을 사용해야 합니다.

앱은 해당 마지막 스타일 지정 작업 시퀀스에서 다음처럼 표시됩니다.

스타일 지정 작업의 마지막 시퀀스가 있는 앱의 스크린샷

데스크톱 장치에서 실행되는 거의 포팅된 Windows 10 앱

거의 이식된 Windows 10 앱의 스크린샷

모바일 장치에서 실행되는 거의 포팅된 Windows 10 앱

모바일 장치의 목록 상자에 대한 선택적 조정

모바일 장치에서 앱을 실행 시, 기본적으로 목록 상자의 배경은 두 테마 모두에서 밝습니다. 해당 스타일은 원하는 스타일일 수 있으며, 그렇다면 프로젝트에서 BookstoreStyles.xaml 리소스 사전 파일을 삭제하고 MainPage.xaml에 병합하는 태그를 제거하는 것 외에는 할 일이 없습니다.

그러나 컨트롤은 동작에 영향을 받지 않으면서 모양을 사용자 지정할 수 있도록 설계되었습니다. 따라서 목록 상자가 어두운 테마(원래 앱의 표시 방식)에서 어둡게 되도록 하려면, 이 섹션이 이를 수행하는 방법을 설명합니다.

변경 내용은 모바일 장치에서 실행 중인 앱에만 영향을 줄 수 있습니다. 그러므로 모바일 장치 패밀리에서 실행 시, 아주 약간만 사용자 지정된 목록 상자 스타일을 사용하고 다른 장치에서 실행 시에는 기본 스타일을 계속 사용합니다. 이를 위해 BookstoreStyles.xaml의 복사본을 만들고 특별한 MRT 정규화된 이름을 지정하여 모바일 장치에만 로드합니다.

새로운 ResourceDictionary 프로젝트 항목을 추가하고 이름을 BookstoreStyles.DeviceFamily-Mobile.xaml로 지정합니다. 이제 논리적 이름이 BookstoreStyles.xaml인 두 개의 파일이 있습니다(태그 및 코드에서 사용하는 이름). 하지만 파일의 실제 이름은 다르기 때문에 다른 태그를 포함할 수 있습니다. 모든 xaml 파일과 함께 이 MRT 정규화된 명명 체계를 이용할 수 있지만, 논리 이름이 동일한 모든 xaml 파일은 단일 xaml.cs 코드 숨김 파일(해당하는 경우)을 공유합니다.

목록 상자의 컨트롤 템플릿 복사본을 편집한 다음 새 리소스 사전인 BookstoreStyles.DeviceFamily-Mobile.xaml에서 BookstoreListBoxStyle 키를 사용하여 저장합니다. 이제 setter 세 개를 간단하게 변경합니다.

  • 포그라운드 setter에서 값을 "{x:Null}"(으)로 변경합니다. 요소에서 직접 속성을 "{x:Null}"(으)로 설정하는 것은 코드에서 속성을 null(으)로 설정하는 것과 동일합니다. 그러나 setter에서 "{x:Null}" 값을 활용하면 고유한 효과가 있습니다. 즉, setter를 (동일한 속성에 대해) 기본 스타일로 재정의하고 속성의 기본값을 대상 요소에서 복원합니다.
  • 백그라운드 setter에서 해당 밝은 배경을 제거하도록 "Transparent" 값을 변경합니다.
  • 템플릿 setter에서 Focused(으)로 이름이 지정된 시각적 개체 상태를 찾은 다음 스토리보드를 삭제하여 빈 태그로 만듭니다.
  • 다른 모든 setter를 태그에서 삭제합니다.

마지막으로 BookstoreStyles.xaml에 BookstoreListBoxStyle을(를) 복사하고 세 개의 setter를 삭제하여 빈 태그로 만듭니다. 이렇게 하면 모바일이 아닌 장치에서 BookstoreStyles.xaml 및 BookstoreListBoxStyle에 대한 참조가 해결되지만 아무런 영향을 주지 않습니다.

이식된 Windows 10 앱

모바일 장치에서 실행되는 포팅된 Windows 10 앱

결론

이 사례 연구는 아주 간단한 앱(비현실적으로 간단한 앱)을 포팅하는 프로세스를 보여 줍니다. 예를 들어, 목록 상자는 선택 또는 탐색 컨텍스트 설정에 사용될 수 있습니다. 앱은 탭된 항목에 대한 자세한 내용이 포함된 페이지로 이동합니다. 이 특정 앱은 사용자의 선택 항목에서 아무 작업도 수행하지 않으며 탐색이 없습니다. 그럼에도 불구하고 사례 연구는 분위기를 조성하고, 포팅 프로세스를 소개하며 실제 UWP 앱에서 사용할 수 있는 중요한 기술을 보여 줍니다.

또한 보기 모델 포팅이 일반적으로 원활한 프로세스라는 증거도 확인했습니다. 사용자 인터페이스 및 폼 팩터 지원은 포팅 시 주의가 필요할 가능성이 더 큰 측면입니다.

다음 사례 연구는 Bookstore2로, 그룹화된 데이터에 액세스하고 표시하기 위해 사용됩니다.