Windows Phone Silverlight에서 UWP로의 사례 연구: Bookstore1

  • 아티클

이 토픽은 매우 간단한 Windows Phone Silverlight 앱을 Windows 10 UWP(Universal Windows Platform) 앱으로 포팅하는 사례 연구를 보여 줍니다. 다양한 장치에 설치할 수 있는 단일 앱 패키지를 Windows 10으로 만들 수 있으며, 이는 이 사례 연구에서 수행하게 될 작업입니다. UWP 앱 가이드를 확인하세요.

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

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

참고 Visual Studio에서 Bookstore1Universal_10을 열 때, “Visual Studio 업데이트 필요”라는 메시지가 표시되면 TargetPlatformVersion에서 대상 플랫폼 버전 선택 단계를 따릅니다.

다운로드

Bookstore1WPSL8 Windows Phone Silverlight 앱을 다운로드합니다.

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

Windows Phone Silverlight 앱

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

how bookstore1wpsl8 looks

Windows 10 프로젝트로 포팅하기

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

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

App.xaml 및 Windows 10 프로젝트에서 Visual Studio가 생성한 App.xaml.cs를 유지할 수 있습니다.

방금 복사한 소스 코드와 태그 파일을 편집하고 Bookstore1WPSL8 네임스페이스에 대한 참조를 Bookstore1Universal_10으로 변경합니다. 파일에서 바꾸기 기능을 사용하는 것이 빠른 방법입니다. 이러한 포팅 변경 사항은 이러한 보기 모델 소스 파일의 명령적 코드에서 필요합니다.

  • System.ComponentModel.DesignerProperties을(를) DesignMode(으)로 변경한 다음, 해결 명령을 사용합니다. IsInDesignTool 속성을 삭제하고 IntelliSense를 사용하여 올바른 속성 이름 DesignModeEnabled을(를) 추가합니다.
  • ImageSource에 대한 해결 명령을 사용합니다.
  • BitmapImage에 대한 해결 명령을 사용합니다.
  • System.Windows.Media; 및 using System.Windows.Media.Imaging;을(를) 사용하여 삭제합니다.
  • Bookstore1Universal_10.BookstoreViewModel.AppName 속성에 의해 반환된 값을 “BOOKSTORE1WPSL8”에서 “BOOKSTORE1UNIVERSAL”로 변경합니다.

다음과 같은 포팅 변경이 MainPage.xaml에서 필요합니다.

  • phone:PhoneApplicationPage을(를) Page(으)로 변경합니다(속성 요소 구문의 항목을 잊지 마세요).
  • phone 및 shell 네임스페이스 접두사 선언을 삭제합니다.
  • 남아 있는 네임스페이스 접두사 선언에서 "clr-namespace"를 "using"으로 변경합니다.

결과를 가장 빨리 확인하려는 경우, 태그를 일시적으로 제거하는 것이더라도 태그 컴파일 오류를 매우 저렴하게 수정하도록 선택할 수 있습니다. 그러나 그렇게 함으로써 누적한 부채에 대한 기록을 보관합니다. 이 경우 이는 다음과 같습니다.

  1. MainPage.xaml의 루트 Page 요소에서 SupportedOrientations="Portrait"을(를) 삭제합니다.
  2. MainPage.xaml의 루트 Page 요소에서 Orientation="Portrait"을(를) 삭제합니다.
  3. MainPage.xaml의 루트 Page 요소에서 shell:SystemTray.IsVisible="True"을(를) 삭제합니다.
  4. BookTemplate 데이터 템플릿에서 PhoneTextExtraLargeStyle 및 PhoneTextSubtleStyleTextBlock 스타일에 대한 참조를 삭제합니다.
  5. TitlePanelStackPanel에서 PhoneTextNormalStyle 및 PhoneTextTitle1StyleTextBlock 스타일에 대한 참조를 삭제합니다.

모바일 장치 패밀리의 UI에서 먼저 작업하고 그 뒤에 다른 폼 팩터를 고려할 수 있습니다. 이제 앱을 빌드하고 실행할 수 있습니다. 모바일 Emulator의 모양은 다음과 같습니다.

the uwp app on mobile with initial source code changes

보기 및 보기 모델이 제대로 작동하며 ListBox가 작동합니다. 대부분 스타일을 수정하고 이미지를 표시하기만 하면 됩니다.

부채 항목 갚기 및 일부 초기 스타일 지정하기

기본적으로 모든 방향이 지원됩니다. 하지만 Windows Phone Silverlight 앱은 세로 전용으로 명시적으로 제한되므로 새 프로젝트에서 앱 패키지 매니페스트로 이동한 후 지원되는 방향에서 세로를 선택하여 부채 항목 #1 및 #2를 청산합니다.

이 앱의 경우, 상태 표시줄(이전의 시스템 트레이)이 기본적으로 표시되므로 항목 #3은 부채가 아닙니다. 항목 #4 및 #5에 대해 사용 중인 Windows Phone Silverlight 스타일에 해당하는 네 가지 UWP(Universal Windows Platform) TextBlock 스타일을 찾아야 합니다. Emulator에서 Windows Phone Silverlight 앱을 실행하고 텍스트 섹션의 그림과 나란히 비교할 수 있습니다. 이 작업을 수행하고 Windows Phone Silverlight 시스템 스타일의 속성을 살펴보면 이 테이블을 만들 수 있습니다.

Windows Phone Silverlight 스타일 키 UWP 스타일 키
PhoneTextExtraLargeStyle TitleTextBlockStyle
PhoneTextSubtleStyle SubtitleTextBlockStyle
PhoneTextNormalStyle CaptionTextBlockStyle
PhoneTextTitle1Style HeaderTextBlockStyle

이러한 스타일을 설정하려면, 태그 편집기에만 입력하거나 Visual Studio XAML 도구를 사용하여 항목을 입력하지 않고 설정할 수 있습니다. 이렇게 하려면, TextBlock을 마우스 우클릭하고 적용 리소스스타일 편집>을 클릭합니다. 이렇게 하려면 항목 템플릿의 TextBlock을 사용하여 ListBox를 마우스 우클릭하고 추가 템플릿 편집>생성된 항목 편집(ItemTemplate)을 클릭합니다.

ListBox 컨트롤의 기본 스타일이 해당 배경을 ListBoxBackgroundThemeBrush 시스템 리소스로 설정하기 때문에 80% 불투명 흰색 백그라운드가 항목 뒤에 있습니다. 해당 백그라운드를 지우려면 ListBox에서 Background="Transparent"을(를) 설정합니다. 항목 템플릿에서 TextBlock을 왼쪽에 맞추려면, 위에서 설명한 것과 동일한 방식으로 다시 편집하고 두 TextBlock에서 모두 "9.6,0"의 여백을 설정합니다.

이 작업이 완료되면 보기 픽셀과 관련된 변경 내용으로 인해 아직 변경되지 않은 고정 크기 차원(여백, 너비, 높이 등)을 0.8로 곱해야 합니다. 그러므로 예를 들어 이미지는 70x70px에서 56x56px로 변경되어야 합니다.

그러나 스타일 지정 결과를 표시하기 전에 렌더링할 이미지를 살펴보겠습니다.

보기 모델에 이미지 바인딩하기

Bookstore1WPSL8에서는 다음을 수행했습니다.

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(this.CoverImagePath, UriKind.Relative));

Bookstore1Universal에서는 ms-appx URI 체계를 사용합니다. 코드의 나머지 부분을 동일하게 유지할 수 있도록 System.Uri 생성자의 다른 오버로드를 사용하여 기본 URI에 ms-appx URI 체계를 넣고 나머지 경로를 추가합니다. 다음과 같습니다.

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(new Uri("ms-appx://"), this.CoverImagePath));

유니버설 스타일 지정

이제 최종 스타일 조정을 수행하고 앱이 데스크톱(및 기타) 폼 팩터와 모바일에서 잘 보이는지 확인해야 합니다. 단계는 아래와 같습니다. 또한 이 토픽의 맨 위에 있는 링크를 이용하여 프로젝트를 다운로드하고 여기와 사례 연구의 종료 사이의 모든 변경 내용을 확인할 수 있습니다.

  • 항목 간의 간격을 조이려면 MainPage.xaml에서 BookTemplate 데이터 템플릿을 찾아 루트 그리드에서 Margin 특성을 삭제합니다.
  • 페이지 제목에 좀 더 여유 공간을 두려는 경우, 페이지 제목 TextBlock에서 -5.6의 아래쪽 여백을 0(으)로 다시 설정할 수 있습니다.
  • 이제 모든 장치에서 실행 시 테마가 무엇인지에 관계없이 적절하게 앱이 표시되도록 LayoutRoot의 배경을 올바른 기본값으로 설정해야 합니다. "Transparent"에서 "{ThemeResource ApplicationPageBackgroundThemeBrush}"(으)로 변경합니다.

더 정교한 앱을 사용하면 폼 팩터 및 사용자 경험을 위해 포팅하기의 지침을 폼 팩터 및 사용자 환경에 사용하고 앱이 이제 실행할 수 있는 여러 디바이스의 폼 팩터를 최적으로 사용할 수 있습니다. 하지만 이 간단한 앱의 경우 여기서 중지하고 앱이 마지막 스타일 지정 작업 시퀀스를 따라가는 방식을 확인할 수 있습니다. 이는 실제로 모바일 및 데스크톱 장치에서 동일하게 보이지만, 이는 넓은 폼 팩터의 공간을 최대한 활용하지 않습니다(그러나 이후 사례 연구에서 그렇게 하는 방법을 조사할 예정임).

앱의 테마를 제어하는 방법을 보려면 테마 변경 사항을 참조하세요.

the ported windows 10 app

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

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

모바일 장치에서 앱을 실행 시, 기본적으로 목록 상자의 배경은 두 테마 모두에서 밝습니다. 선호하는 스타일일 수 있으며, 그렇다면 더 이상 할 일이 없습니다. 그러나 컨트롤은 동작에 영향을 받지 않으면서 모양을 사용자 지정할 수 있도록 설계되었습니다. 그러므로 (원래 앱의 모양과 같은) 어두운 테마에서 목록 상자가 어둡게 표시되도록 하려면 "선택적 조정"에서 이러한 지침을 따릅니다.

결론

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

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