Windows 런타임 .x에서 UWP 사례 연구: Bookstore2Windows Runtime 8.x to UWP case study: Bookstore2

Bookstore1에 제공 된 정보를 기반으로 하는이 사례 연구는 SemanticZoom 컨트롤에 그룹화 된 데이터를 표시 하는 Universal 8.1 앱으로 시작 합니다.This case study—which builds on the info given in Bookstore1—begins with a Universal 8.1 app that displays grouped data in a SemanticZoom control. 뷰 모델에서 클래스 작성자 의 각 인스턴스는 해당 저자가 작성 한 책의 그룹을 나타내며, SemanticZoom에서 저자 별로 그룹화 된 책의 목록을 볼 수도 있고, 축소 하 여 저자의 점프 목록을 볼 수도 있습니다.In the view model, each instance of the class Author represents the group of the books written by that author, and in the SemanticZoom, we can either view the list of books grouped by author or we can zoom out to see a jump list of authors. 점프 목록은 책 목록을 스크롤할 때보다 훨씬 더 빠른 탐색이 가능케 합니다.The jump list affords much quicker navigation than scrolling through the list of books. 앱을 UWP (Windows 10 유니버설 Windows 플랫폼) 앱으로 이식 하는 단계를 안내 합니다.We walk through the steps of porting the app to a Windows 10 Universal Windows Platform (UWP) app.

참고    _Visual studio에서 Bookstore2Universal 10을 열 때 "Visual studio 업데이트 필요" 메시지가 표시 되 면 Targetplatformversion의 단계를 따릅니다.Note   When opening Bookstore2Universal_10 in Visual Studio, if you see the message "Visual Studio update required", then follow the steps in TargetPlatformVersion.

다운로드Downloads

Bookstore2 _ 81 Universal 8.1 앱을 다운로드합니다.Download the Bookstore2_81 Universal 8.1 app.

Bookstore2Universal _ 10 Windows 10 앱을 다운로드합니다.Download the Bookstore2Universal_10 Windows 10 app.

유니버설 8.1 앱The Universal 8.1 app

Bookstore2 _ 81은 다음과 같으며, 포트를 사용할 앱은 다음과 같습니다.Here’s what Bookstore2_81—the app that we're going to port—looks like. 작성자 별로 그룹화 된 책을 보여 주는 가로 스크롤 (Windows Phone에서 세로 스크롤) SemanticZoom .It's a horizontally-scrolling (vertically-scrolling on Windows Phone) SemanticZoom showing books grouped by author. 점프 목록을 축소 하 고 원하는 그룹으로 다시 이동할 수 있습니다.You can zoom out to the jump list and from there you can navigate back into any group. 이 앱에는 그룹화 된 데이터 원본을 제공 하는 뷰 모델과 해당 뷰 모델에 바인딩되는 사용자 인터페이스가 있습니다.There are two main pieces to this app: the view model that provides the grouped data source, and the user interface that binds to that view model. 여기에서 볼 수 있듯이 이러한 두 부분은 모두 WinRT 8.1 기술에서 Windows 10으로 쉽게 이식할 수 있습니다.As we'll see, both of these pieces port easily from WinRT 8.1 technology to Windows 10.

-windows의 bookstore2 81, 확대 보기

_Windows의 Bookstore2 81, 확대 보기Bookstore2_81 on Windows, zoomed-in view

-windows의 bookstore2 81, 축소 보기

_Windows의 Bookstore2 81, 축소 보기Bookstore2_81 on Windows, zoomed-out view

-windows phone의 bookstore2 81, 확대 보기

Bookstore2 _ 81 on Windows Phone, 확대 보기Bookstore2_81 on Windows Phone, zoomed-in view

-windows phone의 bookstore2 81, 축소 보기

Bookstore2 _ 81 on Windows Phone, 확대 보기Bookstore2_81 on Windows Phone, zoomed-out view

Windows 10 프로젝트로 포팅Porting to a Windows 10 project

Bookstore2 _ 81 솔루션은 8.1 유니버설 앱 프로젝트입니다.The Bookstore2_81 solution is an 8.1 Universal App project. Bookstore2 _ 프로젝트는 Windows 8.1에 대 한 앱 패키지를 빌드하고 Bookstore2 _ appname.windowsphone 프로젝트는 8.1 Windows Phone에 대 한 앱 패키지를 빌드합니다.The Bookstore2_81.Windows project builds the app package for Windows 8.1, and the Bookstore2_81.WindowsPhone project builds the app package for Windows Phone 8.1. Bookstore2 _ 81. Shared는 다른 두 프로젝트 모두에서 사용 되는 소스 코드, 태그 파일 및 기타 자산 및 리소스를 포함 하는 프로젝트입니다.Bookstore2_81.Shared is the project that contains source code, markup files, and other assets and resources, that are used by both of the other two projects.

이전 사례 연구와 마찬가지로이 옵션 ( 유니버설 8.1 앱이 있는 경우에 설명 된 항목)은 공유 프로젝트의 콘텐츠를 유니버설 장치 제품군을 대상으로 하는 Windows 10으로 이식 하는 것입니다.Just like with the previous case study, the option we'll take (of the ones described in If you have a Universal 8.1 app) is to port the contents of the Shared project to a Windows 10 that targets the Universal device family.

새 빈 응용 프로그램 (Windows 유니버설) 프로젝트를 만들어 시작 합니다.Begin by creating a new Blank Application (Windows Universal) project. 이름을 Bookstore2Universal _ 10으로 합니다.Name it Bookstore2Universal_10. Bookstore2 _ 81에서 Bookstore2Universal 10으로 복사할 파일 _ 입니다.These are the files to copy over from Bookstore2_81 to Bookstore2Universal_10.

공유 프로젝트에서From the Shared project

  • 책 표지 이미지를 포함 하는 폴더를 복사 합니다. PNG 파일 \ ( \ CoverImages 폴더)입니다.Copy the folder containing the book cover image PNG files (the folder is \Assets\CoverImages). 폴더를 복사한 후 솔루션 탐색기에서 모든 파일 표시 가 설정 되어 있는지 확인 합니다.After copying the folder, in Solution Explorer, make sure Show All Files is toggled on. 복사한 폴더를 마우스 오른쪽 단추로 클릭 하 고 프로젝트에 포함을 클릭 합니다.Right-click the folder that you copied and click Include In Project. 이 명령은 프로젝트의 파일 또는 폴더를 "포함" 하 여 의미 합니다.That command is what we mean by "including" files or folders in a project. 파일이 나 폴더를 복사할 때마다 각 복사본은 솔루션 탐색기 에서 새로 고침 을 클릭 한 다음 프로젝트에 파일 또는 폴더를 포함 합니다.Each time you copy a file or folder, each copy, click Refresh in Solution Explorer and then include the file or folder in the project. 대상에서 대체 하는 파일에 대해서는이 작업을 수행할 필요가 없습니다.There's no need to do this for files that you're replacing in the destination.
  • 뷰 모델 원본 파일이 포함 된 폴더를 복사 \ 합니다 (ViewModel).Copy the folder containing the view model source file (the folder is \ViewModel).
  • MainPage을 복사 하 고 대상의 파일을 바꿉니다.Copy MainPage.xaml and replace the file in the destination.

Windows 프로젝트에서From the Windows project

  • BookstoreStyles을 복사 합니다.Copy BookstoreStyles.xaml. 이 파일의 모든 리소스 키가 Windows 10 앱에서 확인 되기 때문에이를 적절 한 시작 지점으로 사용 합니다. 해당 하는 Appname.windowsphone 파일에 있는 일부는 그렇지 않습니다.We'll use this one as a good starting-point because all the resource keys in this file will resolve in a Windows 10 app; some of those in the equivalent WindowsPhone file will not.
  • SeZoUC. .xaml 및 SeZoUC.xaml.cs을 복사 합니다.Copy SeZoUC.xaml and SeZoUC.xaml.cs. 이 보기의 Windows 버전부터 시작 합니다 .이 보기는 와이드 창에 적합 하 고, 나중에 작은 창 및 그 보다 작은 장치에 맞게 조정 됩니다.We'll start with the Windows version of this view, which is appropriate for wide windows, and then later we'll make it adapt to smaller windows and, consequently, smaller devices.

방금 복사한 소스 코드 및 태그 파일을 편집 하 고 Bookstore2 81 네임 스페이스에 대 한 참조를 _ Bookstore2Universal 10으로 변경 합니다 _ .Edit the source code and markup files that you just copied and change any references to the Bookstore2_81 namespace to Bookstore2Universal_10. 이 작업을 수행 하는 빠른 방법은 파일에서 바꾸기 기능을 사용 하는 것입니다.A quick way to do that is to use the Replace In Files feature. 뷰 모델에는 코드 변경이 필요 하지 않으며 다른 명령적 코드에도 필요 하지 않습니다.No code changes are needed in the view model, nor in any other imperative code. 그러나 실행 중인 앱의 버전을 보다 쉽게 확인할 수 있도록 하려면 **Bookstore2Universal _ ** 속성에서 반환 하는 값을 "Bookstore2 _ 81"에서 "Bookstore2Universal 10"으로 변경 합니다 _ .But, just to make it easier to see which version of the app is running, change the value returned by the Bookstore2Universal_10.BookstoreViewModel.AppName property from "Bookstore2_81" to "BOOKSTORE2UNIVERSAL_10".

이제를 빌드하고 실행할 수 있습니다.Right now, you can build and run. 다음은 아직 작업을 수행 하지 않고 Windows 10으로 이식할 수 있는 새 UWP 앱의 모습입니다.Here's how our new UWP app looks after having done no work yet to port it to Windows 10.

바탕 화면 장치에서 실행 되는 초기 소스 코드 변경 내용이 포함 된 windows 10 앱, 확대 된 보기

바탕 화면 장치에서 실행 되는 초기 소스 코드 변경 내용이 포함 된 Windows 10 앱, 확대 된 보기The Windows 10 app with initial source code changes running on a Desktop device, zoomed-in view

데스크톱 장치에서 실행 되는 초기 소스 코드 변경 내용이 포함 된 windows 10 앱 (축소 된 보기)

데스크톱 장치에서 실행 되는 초기 소스 코드 변경 내용이 포함 된 Windows 10 앱 (축소 된 보기)The Windows 10 app with initial source code changes running on a Desktop device, zoomed-out view

보기 모델 및 확대 된 뷰 및 확대 뷰가 제대로 작동 하는 것은 아니지만이를 확인 하는 문제가 있습니다.The view model and the zoomed-in and zoomed-out views are working together correctly, although there are issues that make that a little hard to see. 한 가지 문제는 SemanticZoom 스크롤되지 않는다는 것입니다.One issue is that the SemanticZoom doesn't scroll. 이는 Windows 10에서 GridView 의 기본 스타일이 세로로 배치 되기 때문입니다. 즉, windows 10 디자인 지침에서는 새로운 및 이식 된 앱에서 해당 방법을 사용 하는 것이 좋습니다.This is because, in Windows 10, the default style of a GridView causes it to be laid out vertically (and the Windows 10 design guidelines recommend that we use it that way in new and in ported apps). 하지만, Bookstore2 81 프로젝트 (8.1 앱 용으로 설계 됨)에서 복사한 사용자 지정 항목 패널 템플릿의 가로 스크롤 설정은 _ windows 10 앱으로 이식 된 결과로 적용 되는 windows 10 기본 스타일의 세로 스크롤 설정과 충돌 합니다.But, horizontal scrolling settings in the custom items panel template that we copied from the Bookstore2_81 project (which was designed for the 8.1 app) are in conflict with vertical scrolling settings in the Windows 10 default style that is being applied as a result of us having ported to a Windows 10 app. 두 번째는 앱이 사용자 인터페이스를 아직 조정 하지 않아 크기가 다양 한 windows 및 소형 장치에서 최상의 환경을 제공 하지 않는다는 것입니다.A second thing is that the app doesn't yet adapt its user-interface to give the best experience in different-sized windows and on small devices. 그리고, thirdly는 올바른 스타일 및 브러시를 아직 사용 하지 않아 텍스트를 많이 표시 하지 않습니다 (축소 하기 위해 클릭할 수 있는 그룹 머리글 포함).And, thirdly, the correct styles and brushes are not yet being used, resulting in much of the text being invisible (including the group headers that you can click to zoom out). 따라서 다음 세 섹션 (SemanticZoom 및 GridView 디자인 변경 내용, 적응 UI범용 스타일)에서는 이러한 세 가지 문제를 해결 합니다.So, in the next three sections (SemanticZoom and GridView design changes, Adaptive UI, and Universal styling) we'll remedy those three issues.

SemanticZoom 및 GridView 디자인 변경 내용SemanticZoom and GridView design changes

SemanticZoom 컨트롤에 대 한 Windows 10의 디자인 변경 내용은 SemanticZoom changes섹션에 설명 되어 있습니다.The design changes in Windows 10 to the SemanticZoom control are described in the section SemanticZoom changes. 이러한 변경에 대 한 응답으로이 섹션에서 수행할 작업은 없습니다.We have no work to do in this section in response to those changes.

Gridview 에 대 한 변경 내용은 gridview/ListView 변경 내용섹션에 설명 되어 있습니다.The changes to GridView are described in the section GridView/ListView changes. 아래에 설명 된 대로 이러한 변경 사항에 맞게 조정 하기 위해 몇 가지 사소한 조정이 있습니다.We have some very minor adjustments to make to adapt to those changes, as described below.

  • SeZoUC .xaml의에서 ZoomedInItemsPanelTemplate 및를 설정 Orientation="Horizontal" GroupPadding="0,0,0,20" 합니다.In SeZoUC.xaml, in ZoomedInItemsPanelTemplate, set Orientation="Horizontal" and GroupPadding="0,0,0,20".
  • Sezouc.xaml에서 ZoomedOutItemsPanelTemplate ItemsPanel 축소 된 뷰에서 특성을 삭제 하 고 제거 합니다.In SeZoUC.xaml, delete ZoomedOutItemsPanelTemplate and remove the ItemsPanel attribute from the zoomed-out view.

정말 간단하죠!And that's it!

적응 UIAdaptive UI

이렇게 변경한 후에는 응용 프로그램이 와이드 창에서 실행 되는 경우 (큰 화면을 사용 하는 장치 에서만 가능),이를 위해 SeZoUC.After that change, the UI layout that SeZoUC.xaml gives us is great for when the app is running in a wide window (which is only possible on a device with a large screen). 앱의 창이 좁은 경우 (작은 장치에서 발생 하 고 큰 장치 에서도 발생할 수 있음) Windows Phone 스토어 앱에 있던 UI는 가장 적합 합니다.When the app's window is narrow, though (which happens on a small device, and can also happen on a large device), the UI that we had in the Windows Phone Store app is arguably most appropriate.

적응 시각적 상태 관리자 기능을 사용 하 여이를 달성할 수 있습니다.We can use the adaptive Visual State Manager feature to achieve this. 기본적으로 Windows Phone 스토어 앱에서 사용 하는 더 작은 템플릿을 사용 하 여 UI가 좁은 상태로 배치 되도록 시각적 요소에 대 한 속성을 설정 합니다.We'll set properties on visual elements so that, by default, the UI is laid out in the narrow state using the smaller templates that we were using in the Windows Phone Store app. 그런 다음 앱의 창이 특정 크기 ( 유효 픽셀단위로 측정 됨) 보다 크거나 같은 경우를 검색 하 고,이에 대 한 응답으로 시각적 요소의 속성을 변경 하 여 더 크고 더 넓은 레이아웃을 가져옵니다.Then, we'll detect when the app's window is wider-than-or-equal-to a specific size (measured in units of effective pixels), and in response, we'll change the properties of visual elements so that we get a larger, and wider, layout. 이러한 속성 변경 내용을 시각적 상태로 설정 하 고, 적응 트리거를 사용 하 여 해당 시각적 상태를 적용 하는지 여부를 지속적으로 모니터링 하 고 해당 시각적 상태를 적용 하는지 여부를 결정 합니다.We'll put those property changes in a visual state, and we'll use an adaptive trigger to continuously monitor and determine whether to apply that visual state, or not, depending on the width of the window in effective pixels. 이 경우 창 너비를 트리거하기는 하지만 창 높이를 트리거할 수도 있습니다.We're triggering on window width in this case, but it's possible to trigger on window height, too.

최소 창 너비 548 window.epx.codesnippet는이 사용 사례에 적합 합니다. 가장 작은 장치의 크기 이므로 넓은 레이아웃을 표시 하고자 합니다.A minimum window width of 548 epx is appropriate for this use case because that's the size of the smallest device we would want to show the wide layout on. 휴대폰은 일반적으로 548 window.epx.codesnippet 보다 작으므로 기본 좁은 레이아웃을 유지 하는 것 처럼 작은 장치에 있습니다.Phones are typically smaller than 548 epx so on a small device like that we'd remain in the default narrow layout. PC에서 창은 전체 상태로 전환 하기에 충분 하 게 기본적으로 시작 됩니다.On a PC, the window will launch by default wide enough to trigger the switch to the wide state. 여기에서 250x250 크기 항목의 두 열을 표시 하기에 충분히 좁게 창을 끌 수 있습니다.From there, you'll be able to drag the window narrow enough to display two columns of the 250x250-sized items. 이 보다 약간 좁아서, 트리거는 비활성화 되 고, 가로 시각적 상태는 제거 되 고, 기본 좁은 레이아웃은 적용 됩니다.A little narrower than that and the trigger will deactivate, the wide visual state will be removed, and the default narrow layout will be in effect.

따라서 이러한 두 가지 레이아웃을 얻으려면 설정 하 고 변경 해야 하는 속성은 무엇 인가요?So, what properties do we need to set—and change—to achieve these two different layouts? 두 가지 대안이 있으며 각각 다른 방법을 사용 합니다.There are two alternatives and each entails a different approach.

  1. 태그에 두 개의 SemanticZoom 컨트롤을 배치할 수 있습니다.We can put two SemanticZoom controls in our markup. 하나는 Windows 런타임 8.x 앱에서 사용 중인 태그의 복사본 ( GridView 컨트롤을 사용 하 여)이 고 기본적으로 축소 되어 있습니다.One would be a copy of the markup that we were using in the Windows Runtime 8.x app (using GridView controls inside it), and collapsed by default. 다른는 Windows Phone 스토어 앱에서 사용 하 고 있는 태그의 복사본이 며, 기본적으로 표시 되는 ListView 컨트롤을 사용 합니다.The other would be a copy of the markup that we were using in the Windows Phone Store app (using ListView controls inside it), and visible by default. 시각적 상태는 두 SemanticZoom 컨트롤의 표시 유형 속성을 전환 합니다.The visual state would switch the visibility properties of the two SemanticZoom controls. 이 작업을 수행 하는 데는 거의 노력 하지 않아도 되지만 일반적으로 고성능 기술이 아닙니다.This would require very little effort to achieve but this not, in general, a high-performance technique. 따라서 사용 하는 경우 앱을 프로 파일링 하 고 여전히 성능 목표를 충족 하 고 있는지 확인 해야 합니다.So, if you use it, you should profile your app and make sure it is still meeting your performance goals.
  2. ListView 컨트롤을 포함 하는 단일 SemanticZoom 를 사용할 수 있습니다.We can use a single SemanticZoom containing ListView controls. 넓은 시각적 상태에서 두 가지 레이아웃을 얻기 위해 적용 되는 템플릿을 포함 하 여 ListView 컨트롤의 속성을 변경 하 여 GridView 와 동일한 방식으로 레이아웃을 지정할 수 있습니다.To achieve our two layouts, in the wide visual state, we would change the properties of the ListView controls, including the templates that are applied to them, to cause them to lay out in the same way as a GridView does. 이렇게 하면 성능이 향상 될 수 있지만 GridViewListView 의 다양 한 스타일과 템플릿과 다양 한 항목 유형 사이에서 많은 작은 차이가 있습니다.This might perform better, but there are so many small differences between the various styles and templates of GridView and ListView and between their various item types that this is the more difficult solution to achieve. 이 솔루션은이 시점에서 기본 스타일 및 템플릿이 설계 되는 방식과 긴밀 하 게 결합 되어 있으며,이를 통해 나중에 기본값을 변경 하는 것에 영향을 주는 문제를 해결 하는 솔루션을 제공 합니다.This solution is also tightly coupled to the way the default styles and templates are designed at this moment in time, giving us a solution that's fragile and sensitive to any future changes to the defaults.

이 사례 연구에서는 첫 번째 대안을 살펴보겠습니다.In this case study, we're going to go with the first alternative. 하지만 원하는 경우 두 번째 작업을 시도 하 여 더 잘 작동 하는지 확인할 수 있습니다.But, if you like, you can try the second one and see if that works better for you. 첫 번째 대안을 구현 하기 위해 수행 해야 하는 단계는 다음과 같습니다.Here are the steps to take to implement that first alternative.

  • 새 프로젝트의 태그에 있는 SemanticZoom 에서 및를 설정 합니다 x:Name="wideSeZo" Visibility="Collapsed" .On the SemanticZoom in the markup in your new project, set x:Name="wideSeZo" and Visibility="Collapsed".
  • Bookstore2 _ appname.windowsphone 프로젝트로 돌아가서 SeZoUC를 엽니다.Go back to the Bookstore2_81.WindowsPhone project and open SeZoUC.xaml. 해당 파일에서 SemanticZoom 요소 태그를 복사 하 여 wideSeZo 새 프로젝트의 바로 뒤에 붙여 넣습니다.Copy the SemanticZoom element markup out of that file and paste it immediately after wideSeZo in your new project. x:Name="narrowSeZo"방금 붙여 넣은 요소에 설정 합니다.Set x:Name="narrowSeZo" on element that you just pasted.
  • 그러나 narrowSeZo 아직 복사 하지 않은 몇 가지 스타일이 필요 합니다.But narrowSeZo needs a couple of styles that we haven't copied yet. Bookstore2 Appname.windowsphone에서 다시 _ , 두 스타일 ( AuthorGroupHeaderContainerStyleZoomedOutAuthorItemContainerStyle )을 SeZoUC에 복사 하 고 새 프로젝트의 BookstoreStyles에 붙여넣습니다.Again in Bookstore2_81.WindowsPhone, copy the two styles (AuthorGroupHeaderContainerStyle and ZoomedOutAuthorItemContainerStyle) out of SeZoUC.xaml and paste them into BookstoreStyles.xaml in your new project.
  • 이제 새 SeZoUC에 두 개의 SemanticZoom 요소가 있습니다.You now have two SemanticZoom elements in your new SeZoUC.xaml. 이러한 두 요소를 표로래핑합니다.Wrap those two elements in a Grid.
  • 새 프로젝트의 BookstoreStyles에서 Wide 이 세 가지 리소스 키에 단어를 추가 하 고 (내부 참조에만 해당 wideSeZo ) AuthorGroupHeaderTemplate , 및를 참조 ZoomedOutAuthorTemplate BookTemplate 하세요.In BookstoreStyles.xaml in your new project, append the word Wide to these three resource keys (and to their references in SeZoUC.xaml, but only to the references inside wideSeZo): AuthorGroupHeaderTemplate, ZoomedOutAuthorTemplate, and BookTemplate.
  • Bookstore2 _ appname.windowsphone 프로젝트에서 BookstoreStyles를 엽니다.In the Bookstore2_81.WindowsPhone project, open BookstoreStyles.xaml. 이 파일에서 위의 세 가지 리소스 (위에서 언급 한 것으로 설명)와 두 개의 점프 목록 항목 변환기를 복사 하 고, 네임 스페이스 접두사 선언 Windows _ UI _ Xaml은 _ _ 기본 형식을 제어 하 고 새 프로젝트의 BookstoreStyles에 모두 붙여넣습니다.From this file, copy those same three resources (mentioned above), and the two jump list item converters, and the namespace prefix declaration Windows_UI_Xaml_Controls_Primitives, and paste them all into BookstoreStyles.xaml in your new project.
  • 마지막으로 새 프로젝트의 Sezouc.xaml에서 위에 추가한 표에 적절 한 시각적 상태 관리자 태그를 추가 합니다.Finally, in SeZoUC.xaml in your new project, add the appropriate Visual State Manager markup to the Grid that you added above.
    <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>

유니버설 스타일 지정Universal styling

이제 이전 프로젝트에서 복사 하는 동안 위에서 소개한 스타일 문제를 포함 하 여 일부 스타일 문제를 수정 하겠습니다.Now, let's fix up some styling issues, including one that we introduced above while copying from the old project.

  • MainPage에서 LayoutRoot 의 배경을로 "{ThemeResource ApplicationPageBackgroundThemeBrush}" 변경 합니다.In MainPage.xaml, change LayoutRoot's Background to "{ThemeResource ApplicationPageBackgroundThemeBrush}".
  • BookstoreStyles에서 리소스의 값을 TitlePanelMargin 로 설정 0 하거나 적절 한 값을 표시 합니다.In BookstoreStyles.xaml, set the value of the resource TitlePanelMargin to 0 (or whatever value looks good to you).
  • Sezouc.xaml에서의 여백을로 설정 하거나, wideSeZo 적절 한 값을 표시 0 합니다.In SeZoUC.xaml, set the Margin of wideSeZo to 0 (or whatever value looks good to you).
  • BookstoreStyles에서의 Margin 특성을 제거 합니다 AuthorGroupHeaderTemplateWide .In BookstoreStyles.xaml, remove the Margin attribute from AuthorGroupHeaderTemplateWide.
  • 에서 FontFamily 특성을 제거 AuthorGroupHeaderTemplate ZoomedOutAuthorTemplate 합니다.Remove the FontFamily attribute from AuthorGroupHeaderTemplate and from ZoomedOutAuthorTemplate.
  • Bookstore2 _ 81는 BookTemplateTitleTextBlockStyle , BookTemplateAuthorTextBlockStylePageTitleTextBlockStyle 리소스 키를 간접 참조로 사용 하 여 단일 키가 두 앱에서 서로 다른 구현을 갖도록 했습니다.Bookstore2_81 used the BookTemplateTitleTextBlockStyle, BookTemplateAuthorTextBlockStyle, and PageTitleTextBlockStyle resource keys as an indirection so that a single key had different implementations in the two apps. 해당 간접 참조가 필요 하지 않습니다. 시스템 스타일을 직접 참조할 수 있습니다.We don't need that indirection any more; we can just reference system styles directly. 따라서 앱 전체에서, 및로 참조를 TitleTextBlockStyle 대체 CaptionTextBlockStyle HeaderTextBlockStyle 합니다.So, replace those references throughout the app with TitleTextBlockStyle, CaptionTextBlockStyle, and HeaderTextBlockStyle respectively. Visual Studio 파일에서 바꾸기 기능을 사용 하 여 빠르고 정확 하 게이 작업을 수행할 수 있습니다.You can use the Visual Studio Replace In Files feature to do this quickly and accurately. 그런 다음 사용 하지 않는 세 리소스를 삭제할 수 있습니다.You can then delete those three unused resources.
  • 에서를로 바꾸고,를 사용 하 여 AuthorGroupHeaderTemplate PhoneAccentBrush SystemControlBackgroundAccentBrush TextBlock에 설정 하 고, Foreground="White" 모바일 장치 제품군에서 실행 될 때 올바르게 표시 되도록 합니다. TextBlockIn AuthorGroupHeaderTemplate, replace PhoneAccentBrush with SystemControlBackgroundAccentBrush, and set Foreground="White" on the TextBlock so that it looks correct when running on the mobile device family.
  • 에서 BookTemplateWide 두 번째 TextBlock의 전경 특성을 첫 번째 TextBlock 에 복사 합니다.In BookTemplateWide, copy the Foreground attribute from the second TextBlock to the first.
  • 에서에 대 한 참조를에 대 한 ZoomedOutAuthorTemplateWide SubheaderTextBlockStyle 참조 (이제는 조금 큼)로 변경 SubtitleTextBlockStyle 합니다.In ZoomedOutAuthorTemplateWide, change the reference to SubheaderTextBlockStyle (which is now a little too big) to a reference to SubtitleTextBlockStyle.
  • 확대 된 보기 (점프 목록)는 더 이상 새 플랫폼에서 확대 된 보기를 겹쳐서 표시 하지 않으므로 Background 의 축소 된 보기에서 특성을 제거할 수 있습니다 narrowSeZo .The zoomed-out view (the jump list) no longer overlays the zoomed-in view in the new platform, so we can remove the Background attribute from the zoomed-out view of narrowSeZo.
  • 모든 스타일 및 템플릿이 하나의 파일에 있도록 하려면 ZoomedInItemsPanelTemplate SeZoUC. .xaml에서 BookstoreStyles로 이동 합니다.So that all the styles and templates are in one file, move ZoomedInItemsPanelTemplate out of SeZoUC.xaml and into BookstoreStyles.xaml.

스타일 지정 작업의 마지막 시퀀스는 앱을 다음과 같이 그대로 둡니다.That last sequence of styling operations leaves the app looking like this.

데스크톱 장치에서 실행 되는 이식 된 windows 10 앱, 확대 된 보기, 2 가지 크기의 창

데스크톱 장치에서 실행 되는 이식 된 Windows 10 앱, 확대 된 보기, 2 가지 크기의 창The ported Windows 10 app running on a Desktop device, zoomed-in view, two sizes of window

데스크톱 장치에서 실행 되는 이식 된 windows 10 앱, 축소 된 보기, 2 가지 크기의 창

데스크톱 장치에서 실행 되는 이식 된 Windows 10 앱, 축소 된 보기, 2 가지 크기의 창The ported Windows 10 app running on a Desktop device, zoomed-out view, two sizes of window

모바일 장치에서 실행 되는 이식 된 windows 10 앱, 확대 된 보기

모바일 장치에서 실행 되는 이식 된 Windows 10 앱, 확대 된 보기The ported Windows 10 app running on a Mobile device, zoomed-in view

모바일 장치에서 실행 되는 이식 된 windows 10 앱, 축소 된 보기

모바일 장치에서 실행 되는 이식 된 Windows 10 앱, 축소 된 보기The ported Windows 10 app running on a Mobile device, zoomed-out view

결론Conclusion

이 사례 연구는 이전 보다 더 원대한 사용자 인터페이스를 포함 합니다.This case study involved a more ambitious user interface than the previous one. 이전 사례 연구와 마찬가지로이 특정 뷰 모델은 전혀 작동 하지 않으며 주로 사용자 인터페이스를 리팩터링 하는 데 사용 됩니다.As with the previous case study, this particular view model required no work at all, and our efforts went primarily into refactoring the user interface. 일부 변경 내용은 여러 폼 팩터를 지 원하는 동안 두 프로젝트를 하나로 결합 하는 데 필요한 결과 였습니다 (실제로는 이전 보다 훨씬 많은 형태).Some of the changes were a necessary result of combining two projects into one while still supporting many form factors (in fact, many more than we could before). 플랫폼에 적용 된 변경 내용과 관련 하 여 몇 가지 사항이 변경 되었습니다.A few of the changes were to do with changes that have been made to the platform.

다음 사례 연구는 그룹화 된 데이터에 액세스 하 고 표시 하는 것을 QuizGame.The next case study is QuizGame, in which we look at accessing and displaying grouped data.