Windows 執行階段 8.x 到 UWP 案例研究：Bookstore1

本主題提供將簡易 Universal 8.1 應用程式移植到 Windows 10 通用 Windows 平台 (UWP) 應用程式的案例研究。 Universal 8.1應用程式可建置適用於 Windows 8.1 的應用程式套件，以及適用於 Windows Phone 8.1 的其他應用程式套件。 使用 Windows 10，您可以建立一個應用程式套件，讓客戶可以將其安裝到各種裝置上，這就是我們在本案例研究中要做的事情。 請參閱 UWP 應用程式指南。

我們將移植的應用程式由繫結到檢視模型的 ListBox 所組成。 檢視模型有一份書籍清單，其中會顯示標題、作者和書籍封面。 書籍封面影像將建置動作設定為內容，並將複製到輸出目錄設定為不要複製。

本節前面的主題說明了平台之間的差異，並提供了有關應用程式各個方面移植過程的詳細資訊和指南，包括從 XAML 標記到繫結至檢視模型，再到存取資料。 案例研究旨在透過真實範例展示該指南的實際應用來補充該指南。 案例研究假設您已閱讀指南，因此不會重複該內容。

注意 在 Visual Studio 中開啟 Bookstore1Universal_10 時，如果看到「需要更新 Visual Studio」訊息，請按照 TargetPlatformVersion 中的步驟操作。

下載

下載 Bookstore1_81 Universal 8.1 應用程式。

下載 Bookstore1Universal_10 Windows 10 應用程式。

Universal 8.1 應用程式

以下是我們要移植的應用程式 Bookstore1_81 的樣子。 它只是一個垂直捲動書籍清單框，其位於應用程式名稱和頁面標題的標題下方。

Windows 上的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 形式中都具有相同的功能，並且主要使用相同的程式碼。 因此，我們將把共用專案的內容 (以及我們所需的其他專案中的內容) 移植到針對通用裝置系列 (可以安裝到最多裝置上) 的 Windows 10。

您可以快速地在 Visual Studio 中建立一個新專案、將檔案從 Bookstore1_81 複製到專案，並將複製的檔案加入新專案中。 首先建立一個新的空白應用程式 (Windows 通用) 專案。 將其命名為 Bookstore1Universal_10。 以下是要從 Bookstore1_81 複製到 Bookstore1Universal_10 的檔案。

從共用專案

• 複製包含書籍封面影像 PNG 檔案的資料夾 (該資料夾為 \Assets\CoverImages)。 複製資料夾後，在方案總管中，請確認顯示所有檔案已開啟。 在您複製的資料夾上按右鍵，然後按一下加入至專案。 該命令就是所謂的在專案中「加入」檔案或資料夾。 每次複製檔案或資料夾時，在方案總管中按一下重新整理，然後將該檔案或資料夾加入專案中。 對於您要在目的地中取代的檔案，無需執行此操作。
• 複製包含檢視模型來源檔案的資料夾 (該資料夾為 \ViewModel)。
• 複製 MainPage.xaml，然後取代目的地中的檔案。

從 Windows 專案

• 複製 BookstoreStyles.xaml。 我們將使用此檔案作為起點，這是個不錯的選擇，因為此檔案中的所有資源索引鍵都將在 Windows 10 應用程式中解析；而對等 WindowsPhone 檔案中的某些索引鍵則不會。

編輯剛剛複製的原始程式碼和標記檔案，將對 Bookstore1_81 命名空間的所有參考變更為 Bookstore1Universal_10。 若想快速執行此動作，可使用取代檔案功能。 檢視模型和其他命令式程式碼都不需要變更程式碼。 但是，為了讓您能更輕鬆地查看正在執行的應用程式版本，請將 Bookstore1Universal_10.BookstoreViewModel.AppName 屬性傳回的值從「BOOKSTORE1_81」變更為「BOOKSTORE1UNIVERSAL_10」。

現在，您可以建置並執行了。 以下是尚未移植到 Windows 10 的新 UWP 應用程式外觀。

在桌面裝置上執行的變更初始原始程式碼的 Windows 10 應用程式

在行動裝置上執行的變更初始原始程式碼的 Windows 10 應用程式

檢視和檢視模型正常協同運作，並且 ListBox 運作正常。 我們只需要修改樣式。 在行動裝置的淺色主題中，我們可以看到清單框的框線，但這可以輕鬆隱藏。 而且，字體排版太大，所以我們要變更所使用的樣式。 此外，如果想讓應用程式看起來像預設設定，那麼在桌面裝置上執行時，應用程式的顏色應該要是淺色的。 所以我們要修改一下。

通用樣式

Bookstore1_81 應用程式使用兩個不同的資源字典 (BookstoreStyles.xaml) 來根據 Windows 8.1 和 Windows Phone 8.1 作業系統自訂其樣式。 這兩個 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 的參考。 另一個我們不再需要的 Bookstore1_81 間接取值是 PageTitleTextBlockStyle。 將其變更為參考 HeaderTextBlockStyle。
• 我們不再需要在 ListBox 上設定任何特殊的背景、樣式或 ItemContainerStyle，因此只需從標記中刪除這三個屬性及其值即可。 不過，我們想隱藏 ListBox 的框線，因此將 BorderBrush="{x:Null}" 新增至其中。
• 我們不再參考 BookstoreStyles.xaml ResourceDictionary 檔案中的任何資源。 您可以把這些資源全部刪除。 但是，請不要刪除 BookstoreStyles.xaml 檔案本身：我們還需要使用它一次，這將在下一節中說明。

最後一連串的樣式設定會讓應用程式看起來像這樣。

在桌面裝置上執行差不多完成移植的 Windows 10 應用程式

在行動裝置上執行差不多完成移植的 Windows 10 應用程式

行動裝置清單框的選擇性調整

當應用程式在行動裝置上執行時，兩個主題中清單框的背景預設都是淺色的。 這可能是您喜歡的樣式，如果是這樣，那麼接下來就只要稍做整理：從專案中刪除 BookstoreStyles.xaml 資源字典動作，並移除將其合併到 MainPage.xaml 的標記。

但是，控制項的設計是為了讓您可以自訂其外觀，同時不影響其行為。 因此，如果您希望清單框在深色主題中以深色呈現 (原始應用程式的外觀)，本節將介紹其作法。

我們所做的變更只需要影響在行動裝置上執行的應用程式。 因此，當應用程式在行動裝置系列上執行時，要使用我們稍加自訂的清單框樣式，而在其他位置執行時，將繼續使用預設樣式。 為此，我們將製作 BookstoreStyles.xaml 的副本，並為其指定一個特殊的 MRT 限定名稱，這將導致它僅在行動裝置上載入。

新增 ResourceDictionary 專案項目，並將其命名為 BookstoreStyles.DeviceFamily-Mobile.xaml。 您現在有兩個檔案，其邏輯名稱均為 BookstoreStyles.xaml (這是您在標記和程式碼中使用的名稱)。 不過，這些檔案具有不同的實體名稱，因此它們可以包含不同的標記。 您可以對任何 xaml 檔案使用此 MRT 限定命名配置，但請注意，具有相同邏輯名稱的所有 xaml 檔案共用一個 xaml.cs 程式碼後置檔案 (如果適用)。

編輯清單框的控制項範本副本，並將其與 BookstoreListBoxStyle 索引鍵一起儲存在新資源字典 BookstoreStyles.DeviceFamily-Mobile.xaml 中。 現在，我們將對三個設定器進行簡單的改動。

• 在前景設定器中，將值變更為 "{x:Null}"。 請注意，直接在元素上將屬性設為 "{x:Null}" 的效果與在程式碼中將其設為 null 相同。 但是，在設定器中使用 "{x:Null}" 值具有獨特的效果：它會覆寫預設樣式中的設定器 (針對相同屬性)，並恢復目標元素上屬性的預設值。
• 在背景設定器中，將值變更為 "Transparent" 以移除淺色背景。
• 在範本設定器中，找到名為 Focused 的視覺狀態，並刪除其 Storyboard，使其成為空標籤。
• 從標記中刪除所有其他設定器。

最後，將 BookstoreListBoxStyle 複製到 BookstoreStyles.xaml 中，並刪除其三個設定器，使其成為一個空標籤。 我們這樣做是為了在行動裝置以外的裝置上，可解析對 BookstoreStyles.xaml 和 BookstoreListBoxStyle 的參考，但不產生任何效果。

在行動裝置上執行的移植 Windows 10 應用程式

推論

這個案例研究說明了移植簡易應用程式 (幾乎不可能有如此簡單的應用程式) 的過程。 例如，清單框可用於選取或建立瀏覽內容；應用程式將瀏覽到頁面，其中包含已點擊項目的更多詳細資訊。 這個特定的應用程式不會對使用者的選擇執行任何動作，且不會進行瀏覽。 即便如此，該案例研究還是進行了初步介紹，說明了移植過程，並展示了能在實際 UWP 應用程式中使用的重要技術。

我們也看到證據表明移植檢視模型通常是一個順暢的過程。 在移植時，可能需要多注意使用者介面和外觀支援方面。

下一個案例研究是 Bookstore2，我們將透過此案例了解存取和顯示分組資料。