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

아티클
04/01/2024

이 사례 연구는 SemanticZoom 컨트롤에 그룹화된 데이터를 표시하는 Universal 8.1 앱을 사용하여 (Bookstore1에 제공된 정보를 기반으로) 시작합니다. 보기 모델에서 Author 클래스의 각 인스턴스는 해당 저자가 쓴 책의 그룹을 나타내며, SemanticZoom에서는 저자별로 그룹화된 책 목록을 보거나 축소하여 저자의 점프 목록을 볼 수 있습니다. 책 목록을 스크롤할 때보다 훨씬 더 빠른 탐색이 점프 목록으로 가능해집니다. Windows 10 UWP(Universal Windows Platform) 앱으로 앱을 포팅하는 단계를 안내합니다.

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

다운로드

Bookstore2_81 Universal 8.1 앱을 다운로드합니다.

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

Universal 8.1 앱

(포팅하려는) Bookstore2_81 앱은 다음과 같습니다. 이 가로 스크롤(Windows Phone에서의 세로 스크롤) SemanticZoom은 저자에 의해 그룹화 된 책을 보여 줍니다. 점프 목록으로 축소할 수 있으며 여기에서 모든 그룹으로 다시 이동할 수 있습니다. 그룹화된 데이터 원본을 제공하는 보기 모델 및 해당 보기 모델에 바인딩되는 사용자 인터페이스라는 두 가지 기본 부분이 이 앱에 있습니다. 여기서 볼 수 있듯이 이 두 항목은 WinRT 8.1 기술에서 Windows 10으로 쉽게 포팅됩니다.

windows의 bookstore2-81, 확대 보기

Windows의 Bookstore2_81, 확대 보기

windows의 bookstore2-81, 축소 보기

Windows의 Bookstore2_81, 축소 보기

Windows Phone의 bookstore2-81, 확대 보기

Windows Phone의 Bookstore2_81, 확대 보기

Windows Phone의 bookstore2-81, 축소 보기

Windows Phone의 Bookstore2_81, 축소 보기

Windows 10 프로젝트로 포팅하기

Bookstore2_81 솔루션은 8.1 Universal App 프로젝트입니다. Bookstore2_81.Windows 프로젝트는 Windows 8.1에 대한 앱 패키지를 빌드하고, Bookstore2_81.WindowsPhone 프로젝트는 Windows Phone 8.1에 대한 앱 패키지를 빌드합니다. Bookstore2_81.Shared는 두 프로젝트 모두에서 사용되는 소스 코드, 태그 파일, 기타 자산 및 리소스가 포함된 프로젝트입니다.

이전의 사례 연구와 마찬가지로 (Universal 8.11 앱이 있는 경우) 설명된 옵션 중에서 사용할 옵션은 Universal 장치 패밀리를 대상으로 하는 Windows 10으로 공유 프로젝트의 내용을 포팅하는 것입니다.

새로운 비어 있는 애플리케이션(Windows Universal) 프로젝트를 만드는 것으로 시작합니다. 이름을 Bookstore2Universal_10이라고 지정합니다. Bookstore2_81에서 Bookstore2Universal_10으로 복사할 파일은 다음과 같습니다.

공유 프로젝트에서

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

Windows 프로젝트에서

BookstoreStyles.xaml을 복사합니다. Windows 10 앱에서 이 파일의 모든 리소스 키를 확인할 수 있으므로, 이 키를 좋은 시작점으로 사용합니다. 해당하는 WindowsPhone에 포함된 일부 파일은 그렇지 않습니다.
SeZoUC.xaml 및 SeZoUC.xaml.cs를 복사합니다. 넓은 창에 적합한 이 보기의 Windows 버전부터 시작한 뒤 더 작은 창, 그리고 결과적으로 더 작은 장치에 맞게 조정합니다.

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

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

데스크톱 디바이스에서 실행 중인 초기 소스 코드 변경 내용이 있는 Windows 10 앱, 확대 보기

데스크톱 장치에서 실행 중인 초기 소스 코드 변경 내용이 있는 Windows 10 앱, 확대 보기

데스크톱 디바이스에서 실행 중인 초기 소스 코드 변경 내용이 있는 Windows 10 앱, 축소 보기

데스크톱 장치에서 실행 중인 초기 소스 코드 변경 내용이 있는 Windows 10 앱, 축소 보기

보기 모델과 확대 및 축소 보기가 제대로 함께 작동하지만, 보기에 약간 어려워지는 문제가 있습니다. 한 가지 문제는 SemanticZoom이 스크롤되지 않는다는 것입니다. 이는 Windows 10에서 GridView의 스타일 기본값이 세로 배치이기 때문입니다(Windows 10 디자인 지침에서는 새 앱과 포팅된 앱에서 이러한 방식으로 사용하는 것이 좋음). 그러나 Bookstore2_81 프로젝트(8.1 앱을 위해 디자인됨)에서 복사한 사용자 지정 항목 패널 템플릿의 가로 스크롤 설정은 Windows 10 앱으로 포팅한 결과로 적용되는 Windows 10 기본 스타일의 세로 스크롤 설정과 충돌합니다. 두 번째는 앱이 다른 크기의 창과 작은 장치에서 최상의 환경을 제공하기 위해 사용자 인터페이스를 아직 조정하지 않는다는 것입니다. 세 번째는 아직 올바른 스타일과 브러시가 사용되지 않아 텍스트의 대부분이 보이지 않는 것입니다(축소하기 위해 클릭할 수 있는 그룹 머리글 포함). 따라서 다음 세 섹션(SemanticZoom 및 GridView 디자인 변경, 적응형 UI 및 유니버설 스타일 지정)은 이러한 세 가지 문제를 해결합니다.

SemanticZoom 및 GridView 디자인 변경

Windows 10에서 SemanticZoom 컨트롤의 디자인 변경 내용은 SemanticZoom 변경 섹션에 설명되어 있습니다. 이 섹션은 이러한 변경 내용에 대한 응답으로 수행할 작업을 포함하고 있지 않습니다.

GridView에 대한 변경 내용은 GridView/ListView 변경 섹션에 설명되어 있습니다. 이러한 변경 사항에 적응하기 위한 몇 가지 사소한 조정은 아래에 설명된 내용과 같습니다.

SeZoUC.xaml의 ZoomedInItemsPanelTemplate에서 Orientation="Horizontal" 및 GroupPadding="0,0,0,20"을(를) 설정합니다.
SeZoUC.xaml의 축소 보기에서 ZoomedOutItemsPanelTemplate을(를) 삭제하고 ItemsPanel 특성을 제거합니다.

이게 전부입니다!

적응형 UI

변경 뒤, SeZoUC.xaml에서 제공하는 UI 레이아웃은 넓은 창에서 앱이 실행되는 경우에 적합합니다(큰 화면이 있는 장치에서만 가능). 그러나 앱의 창이 좁을 때(작은 장치에서 발생하며 큰 장치에서도 발생할 수 있음), Windows Phone Store 앱의 UI는 틀림없이 가장 적합합니다.

이를 달성하기 위해 적응형 Visual State Manager 기능을 사용할 수 있습니다. 기본적으로 Windows Phone Store 앱에서 사용하던 더 작은 템플릿을 사용하여 UI가 좁은 상태로 배치되도록 시각적 요소에 속성을 설정합니다. 그런 다음 앱의 창이 특정 크기(유효 픽셀 단위로 측정됨)보다 넓거나 같은 경우를 감지하고 이에 대한 응답으로 시각적 요소의 속성을 변경하여 더 크고 넓은 레이아웃을 만듭니다. 이러한 속성 변경 내용을 시각적 개체 상태로 적용하고, 유효 픽셀의 창 너비에 따라 해당 시각적 개체 상태를 적응형 트리거를 사용하여 지속적으로 모니터링하고 적용할지 여부를 결정합니다. 이 경우 창 너비에서 트리거하지만 창 높이에서도 트리거할 수 있습니다.

548 epx의 최소 창 너비는 넓은 레이아웃을 표시하려는 가장 작은 장치의 크기이기 때문에 이 사용 사례에 적합합니다. 휴대폰은 일반적으로 548 epx보다 작으므로 작은 장치에서의 좁은 레이아웃 기본값으로 유지합니다. PC에서 창은 기본적으로 넓은 상태로 전환할 수 있을 만큼 충분히 넓게 시작됩니다. 여기에서 250x250 크기 항목의 두 열을 표시할 수 있을 만큼 창이 좁아지도록 드래그할 수 있습니다. 이보다 약간 더 좁고 트리거가 비활성화되며 넓은 시각적 개체 상태가 제거되고, 좁은 레이아웃 기본값이 적용됩니다.

그렇다면 이러한 두 가지 레이아웃을 구현하기 위해 어떤 속성을 설정(하고 변경)해야 할까요? 두 가지 대안이 있으며 각각 다른 접근 방식을 수반합니다.

두 가지 SemanticZoom 컨트롤을 태그에 넣을 수 있습니다. 하나는 Windows Runtime 8.x 앱(앱 내부에서 GridView 컨트롤 사용)에서 사용하는 태그의 복사본으로, 기본적으로 축소됩니다. 다른 하나는 Windows Phone Store 앱에서 사용 중이던 태그의 복사본(앱 내부의 ListView 컨트롤 사용)이며 기본적으로 표시됩니다. 시각적 개체 상태는 두 가지 SemanticZoom 컨트롤의 표시 유형 속성을 전환합니다. 이렇게 하려면 달성하는 데 약간의 노력이 필요하지만 일반적으로 고성능 기술은 아닙니다. 따라서 앱을 사용하는 경우, 앱을 프로파일하고 여전히 성능 목표를 충족하는지 확인해야 합니다.
ListView 컨트롤을 포함하는 단일 SemanticZoom을 이용할 수 있습니다. 두 레이아웃을 구현하려면 넓은 시각적 개체 상태에서 적용된 템플릿을 포함하여 ListView 컨트롤의 속성을 변경하여 GridView와 동일한 방식으로 레이아웃을 만듭니다. 이런 방법으로 성능을 향상시킬 수 있지만, GridView 및 ListView의 다양한 스타일과 템플릿 사이에는 아주 조금의 차이점이 있으며 다양한 항목 형식 사이에는 이 방법이 더 어려운 솔루션입니다. 또한 이 솔루션은 기본 스타일 및 템플릿이 현재 디자인되는 방식과 긴밀하게 결합되어 향후 기본값 변경에 취약하고 민감한 솔루션을 제공합니다.

이 사례 연구에서 첫 번째 대안으로 이동합니다. 그러나 선호에 따라 두 번째를 시도하고 그것이 더 잘 작동하는지를 볼 수 있습니다. 다음은 첫 번째 대안의 구현을 위해 수행해야 하는 단계입니다.

새 프로젝트에 있는 태그의 SemanticZoom에서 x:Name="wideSeZo" 및 Visibility="Collapsed"을(를) 설정합니다.
Bookstore2_81.WindowsPhone 프로젝트로 돌아가서 SeZoUC.xaml을 엽니다. 해당 파일에서 SemanticZoom 요소 태그를 복사하여 새 프로젝트의 wideSeZo 바로 뒤에 붙여넣습니다. 방금 붙여넣은 요소에 x:Name="narrowSeZo"을(를) 설정합니다.
그러나 narrowSeZo에는 아직 복사하지 않은 몇 가지 스타일이 필요합니다. 다시 Bookstore2_81.WindowsPhone에서, SeZoUC.xaml의 두 스타일(AuthorGroupHeaderContainerStyle 및 ZoomedOutAuthorItemContainerStyle)을 복사하여 새 프로젝트의 BookstoreStyles.xaml에 붙여넣습니다.
이제 두 개의 SemanticZoom 요소가 새 SeZoUC.xaml에 있습니다. 이 두 요소를 그리드에 래핑합니다.
새 프로젝트의 BookstoreStyles.xaml에서 세 개의 리소스 키(및 SeZoUC.xaml의 참조에, 동시에 wideSeZo 내부의 참조에만 참조)인 AuthorGroupHeaderTemplate, ZoomedOutAuthorTemplate 및 BookTemplate에 Wide 단어를 추가합니다.
Bookstore2_81.WindowsPhone 프로젝트에서 BookstoreStyles.xaml을 엽니다. 이 파일에서 위에서 설명한 것과 동일한 세 리소스, 두 점프 목록 항목 변환기 및 네임스페이스 접두사 선언 Windows_UI_Xaml_Controls_Primitives를 복사하여 새 프로젝트의 BookstoreStyles.xaml에 모두 붙여넣습니다.
마지막으로 새 프로젝트의 SeZoUC.xaml에서 위에서 추가한 그리드에 적절한 Visual State Manager 태그를 추가합니다.

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="548"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="wideSeZo.Visibility" Value="Visible"/>
                        <Setter Target="narrowSeZo.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    ...

    </Grid>

유니버설 스타일 지정

이제 이전의 프로젝트에서 복사하는 동안, 위에서 소개한 스타일 문제를 포함하여 몇 가지 스타일 문제를 해결해 보겠습니다.

MainPage.xaml에서에서 LayoutRoot의 배경을 "{ThemeResource ApplicationPageBackgroundThemeBrush}"(으)로 변경합니다.
BookstoreStyles.xaml에서 리소스 TitlePanelMargin 값을 0(또는 사용자에게 적합한 값)(으)로 설정합니다.
SeZoUC.xaml에서 wideSeZo의 여백을 0(또는 사용자에게 적합한 값)(으)로 설정합니다.
BookstoreStyles.xaml에 있는 AuthorGroupHeaderTemplateWide에서 Margin 특성을 제거합니다.
AuthorGroupHeaderTemplate 및 ZoomedOutAuthorTemplate에서 FontFamily 특성을 제거합니다.
Bookstore2_81은 BookTemplateTitleTextBlockStyle, BookTemplateAuthorTextBlockStyle 및 PageTitleTextBlockStyle 리소스 키를 간접 참조로 사용하여 단일 키가 두 앱에서 다르게 구현되도록 했습니다. 더 이상 간접 참조가 필요하지 않습니다. 시스템 스타일을 직접 참조할 수 있습니다. 그러므로 앱 전체에서 이러한 참조를 각각 TitleTextBlockStyle, CaptionTextBlockStyle 및 HeaderTextBlockStyle(으)로 바꿉니다. Visual Studio 파일에서 바꾸기 기능을 사용하여 빠르고 정확하게 이 작업을 수행할 수 있습니다. 그런 다음, 사용하지 않은 세 개의 리소스를 삭제할 수 있습니다.
AuthorGroupHeaderTemplate에서 PhoneAccentBrush(을)를 SystemControlBackgroundAccentBrush(으)로 대체하고, TextBlock에서 Foreground="White"(을)를 설정하여 모바일 장치 패밀리에서 실행할 때 올바르게 보이도록 합니다.
BookTemplateWide에서 두 번째 TextBlock에서 첫 번째로 포그라운드 특성을 복사합니다.
ZoomedOutAuthorTemplateWide에서 SubheaderTextBlockStyle 참조(지금은 너무 큰 참조)를 SubtitleTextBlockStyle 참조로 변경합니다.
축소 보기(점프 목록)는 더 이상 새 플랫폼에서 확대 보기를 오버레이하지 않으므로 narrowSeZo의 축소 보기에서 Background 특성을 제거할 수 있습니다.
ZoomedInItemsPanelTemplate을(를) SeZoUC.xaml에서 BookstoreStyles.xaml로 이동하여 모든 스타일과 템플릿이 하나의 파일에 있도록 합니다.

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

데스크톱 디바이스에서 실행되는 포티드 Windows 10 앱, 확대 보기, 두 개의 창 크기

데스크톱 장치에서 실행되는 포팅된 Windows 10 앱, 확대 보기, 2가지 창 크기

데스크톱 디바이스에서 실행되는 포티드 Windows 10 앱, 축소 보기, 두 개의 창 크기

데스크톱 장치에서 실행되는 포팅된 Windows 10 앱, 축소 보기, 2가지 창 크기

모바일 디바이스에서 실행되는 포티드 Windows 10 앱, 확대 보기

모바일 장치에서 실행되는 포팅된 Windows 10 앱, 확대 보기

모바일 디바이스에서 실행되는 포티드 Windows 10 앱, 축소 보기

모바일 장치에서 실행되는 포팅된 Windows 10 앱, 축소 보기

결론

이 사례 연구는 이전보다 더 야심찬 사용자 인터페이스를 포함합니다. 이전의 사례 연구와 마찬가지로, 이 특정 보기 모델은 전혀 작동하지 않아도 되며, 이러한 노력은 주로 사용자 인터페이스를 리팩터링하는 데 사용됩니다. 변경 사항 중 일부는 여전히 많은 폼 팩터를 지원하면서 두 프로젝트를 하나로 결합하는 데 필요한 결과였습니다(실제로는 이전보다 훨씬 많음). 몇 가지 변경 사항은 플랫폼에 적용된 변경 내용과 관련이 있었습니다.

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

다음을 통해 공유