將 Windows 執行階段 8.x XAML 和 UI 移植到 UWP

發行項
04/18/2024

上一個主題是疑難排解。

以宣告式 XAML 標記的形式定義 UI 的做法可以很好地從通用 8.1 應用程式轉換為通用 Windows 平台 (UWP) 應用程式。您會發現大多數標記都是相容的，不過您可能需要對正在使用的系統資源索引鍵或自訂範本進行一些調整。檢視模型中的命令式程式碼只需要稍作變更，也可能不需要變更。即使是在展示層中操作 UI 元素的大部分程式碼也應該易於移植。

命令式程式碼

如果您只想進入專案建置階段，則可以註解或刪除任何非必要的程式碼。然後一次一個，逐一查看問題，並參考本節中的以下主題 (以及上一主題：疑難排解)，直到解決所有建置和執行階段問題，並完成移植。

調適型/回應式 UI

因為您的應用程式要在各種裝置上執行 (每個裝置都有自己的螢幕尺寸和解析度)，所以您將需要執行更多步驟來移植應用程式，並且您將需要自訂 UI，以在這些裝置上呈現最佳效果。您可以使用調適型「視覺狀態管理器」功能動態偵測視窗大小，並變更版片配置作為回應，Bookstore2 案例研究主題中的調適型 UI 一節說明了如何執行此操作的範例。

返回按鈕處理

Universal 8.1 應用程式、Windows 執行階段 8.x 應用程式和 Windows Phone Store 應用程式以不同的方法來處理顯示的 UI 和返回按鈕的事件。但是，對於 Windows 10 應用程式，您可以在應用程式中使用單一方法。在行動裝置上，該按鈕會以裝置上的電容式按鈕或外殼按鈕的形式提供。在桌面裝置上，只要應用程式內可以進行返回瀏覽，您就可以將按鈕新增至應用程式的組件區塊，該按鈕將顯示在視窗應用程式的標題列中或平板電腦模式 (僅限 Windows 10) 的工作列中。返回按鈕事件是所有裝置系列的通用概念，在硬體或軟體中實作的按鈕會引發相同的 BackRequested 事件。

以下的範例適用於所有裝置系列，且適用於當相同處理可套用至所有頁面以及不需要確認瀏覽的情況 (例如，警告未儲存的變更)。

   // app.xaml.cs

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        [...]

        Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
        rootFrame.Navigated += RootFrame_Navigated;
    }

    private void RootFrame_Navigated(object sender, NavigationEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        // Note: On device families that have no title bar, setting AppViewBackButtonVisibility can safely execute 
        // but it will have no effect. Such device families provide back button UI for you.
        if (rootFrame.CanGoBack)
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Visible;
        }
        else
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Collapsed;
        }
    }

    private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        if (rootFrame.CanGoBack)
        {
            rootFrame.GoBack();
        }
    }

所有裝置系列都可以使用單一方法，以程式設計方式結束應用程式。

   Windows.UI.Xaml.Application.Current.Exit();

Charms

您不需要變更與常用工具列整合的任何程式碼，但您需要在應用程式中新增一些 UI 以取代常用工具列，而常用工具列不是 Windows 10 殼層的一部分。在 Windows 10 上執行的 Universal 8.1 應用程式有自己的替換 UI，由應用程式標題列中系統轉譯的組件區塊提供。

控制項以及控制項樣式和範本

在 Windows 10 上執行的 Universal 8.1 應用程式將保留 8.1 外觀和控制項行為。但是，當您將該應用程式移植到 Windows 10 應用程式時，需要注意外觀和行為上的一些差異。 Windows 10 應用程式的控制項架構和設計基本上沒有變化，不同之處主要在於設計語言、簡化和可用性改善。

注意 PointerOver 視覺狀態與 Windows 10 應用程式和 Windows 執行階段 8.x 應用程式中的自訂樣式/範本相關，但與 Windows Phone Store 應用程式無關。因此 (並且由於 Windows 10 應用程式支援的系統資源索引鍵)，建議您在將應用程式移植到 Windows 10 時，重新使用 Windows 執行階段 8.x 應用程式中的自訂樣式/範本。如果您想確認自訂樣式/範本是否使用最新的視覺狀態集，並受益於對預設樣式/範本所做的效能改善，請編輯新的 Windows 10 預設範本的副本，並重新套用您的自訂。效能改善的其中一個範例是，先前包含 ContentPresenter 或 Panel 的所有框線皆已刪除，現在由子元素呈現框線。

以下是一些更具體的控制項變更範例。

控制項名稱	變更
AppBar	如果您使用 AppBar 控制項 (建議使用 CommandBar)，則預設情況下它不會在 Windows 10 應用程式中隱藏。您可以使用 AppBar.ClosedDisplayMode 屬性進行控制。
AppBar、CommandBar	在 Windows 10 應用程式中，AppBar 和 CommandBar 具有查看更多按鈕 (省略符號)。
CommandBar	在 Windows 執行階段 8.x 應用程式中，一律會顯示 CommandBar 的次要命令。在 Windows Phone Store 應用程式和 Windows 10 應用程式中，其直到命令列開啟後才會出現。
CommandBar	對於 Windows Phone Store 應用程式，CommandBar.IsSticky 的值不會影響該列是否可關閉。對於 Windows 10 應用程式，如果 IsSticky 設定為 True，則 CommandBar 會忽略輕微的關閉手勢。
CommandBar	在 Windows 10 應用程式中，CommandBar 不會處理 EdgeGesture.Completed 或 UIElement.RightTapped 事件。它也不會回應點選或向上撥動。您仍然可以選擇處理這些事件並設定 IsOpen。
DatePicker、TimePicker	Review how your app looks with the visual changes to DatePicker 和 TimePicker。對於在行動裝置上執行的 Windows 10 應用程式，這些控制項不再瀏覽到選擇頁面，而是使用可關閉的彈出視窗。
DatePicker、TimePicker	在 Windows 10 應用程式中，您無法將 DatePicker 或 TimePicker 放入飛出視窗內。如果您希望這些控制項顯示在快顯類型控制項中，則可以使用 DatePickerFlyout 和 TimePickerFlyout。
GridView、ListView	對於 GridView/ListView，請參閱 GridView 和 ListView 變更。
中樞	在 Windows Phone Store 應用程式中，Hub 控制項會從最後一區段繞回第一區段。在 Windows 執行階段 8.x 應用程式和 Windows 10 應用程式中，中樞區段不會繞回。
中樞	在 Windows Phone Store 應用程式中，Hub 控制項的背景影像相對於中樞區段以視差移動。在 Windows 執行階段 8.x 應用程式和 Windows 10 應用程式中，不會使用視差效果。
中樞	在 Universal 8.1 應用程式中，HubSection.IsHeaderInteractive 屬性會導致區段標題及其旁邊呈現的＞形箭號字符變得具有互動性。在 Windows 10 應用程式中，標題旁邊會有互動式「查看更多」提示，但標題本身不是互動的。 IsHeaderInteractive 仍確定互動是否引發 Hub.SectionHeaderClick 事件。
MessageDialog	如果您使用的是 MessageDialog，請考慮使用更靈活的 ContentDialog。另請參閱 XAML UI 基本知識範例。
ListPickerFlyout、PickerFlyout	Windows 10 應用程式已棄用 ListPickerFlyout 和 PickerFlyout。對於單選飛出視窗，請使用 MenuFlyout；對於更複雜的體驗，請使用 Flyout。
PasswordBox	Windows 10 應用程式中已棄用 PasswordBox.IsPasswordRevealButtonEnabled 屬性，且設定該屬性沒有任何效果。請改用 PasswordBox.PasswordRevealMode，它預設為預覽 (其中顯示眼睛字符，就像在 Windows 執行階段 8.x 應用程式中一樣)。另請參閱密碼方塊方針。
樞紐	Pivot 控制項現已普及，不再局限於在行動裝置上使用。
SearchBox	儘管 SearchBox 可在通用裝置系列中實作，但其在行動裝置上的功能並不完整。請參閱已棄用 SearchBox，而改用 AutoSuggestBox。
SemanticZoom	如需 SemanticZoom，請參閱 SemanticZoom 變更。
ScrollViewer	ScrollViewer 的一些預設屬性已變更。 HorizontalScrollMode 為自動，VerticalScrollMode 為自動，ZoomMode 為已停用。如果新的預設值不適合您的應用程式，那麼您可以透過樣式或控制項本身的本機值來進行變更。
TextBox	在 Windows 執行階段 8.x 應用程式中，TextBox 的拼字檢查預設為關閉。在 Windows Phone Store 應用程式和 Windows 10 應用程式中，它預設為開啟。
TextBox	TextBox 的預設字型大小已從 11 變更為 15。
TextBox	TextBox.TextReadingOrder 的預設值已從 Default 變更為 DetectFromContent。如果這不符合您的需求，請使用 UseFlowDirection。 Default 已棄用。
各種	強調色適用於 Windows Phone Store 應用程式和 Windows 10 應用程式，但不適用於 Windows 執行階段 8.x 應用程式。

有關 UWP 應用控制項的詳細資訊，請參閱依功能排列控制項、控制項清單和控制項指南。

Windows 10 中的設計語言

Universal 8.1 應用程式和 Windows 10 應用程式之間的設計語言存在一些微小但重要的差異。如需所有詳細資料，請參閱設計。儘管設計語言發生了變化，但我們的設計原則仍然保持一致：注重細節，但始終力求簡單，專注於內容而不是裝飾，大幅減少視覺元素，並保持數位領域的真實性；使用視覺階層，尤其是排版；在方格上進行設計；並透過流暢的動畫將您的體驗帶入生活。

有效像素、觀看距離和比例因素

先前的檢視像素是從裝置的實際實體大小和解析度中抽像化 UI 元素的大小和版面配置。檢視像素現已演變為有效像素，以下是該術語的解釋、其含義以及它提供的額外價值。

「解析度」一詞是指像素密度的度量，而不是一般認為的像素數。「有效解析度」是指在考慮到觀看距離和裝置實體像素大小差異 (像素密度是實體像素大小的倒數) 的情況下，組成影像或字形的實體像素對眼睛的解析方式。有效解決方案對於建立體驗是良好的指標，因為它是以使用者為出發點。透過了解所有因素並控制 UI 元素的大小，您可以讓使用者獲得良好的體驗。

不同的裝置具有不同的有效像素寬度，範圍從最小裝置的 320 epx 到中等大小顯示器的 1024 epx，甚至更大的寬度。您所要做的就是像往常一樣繼續使用自動調整大小的元素和動態佈局面板。在某些情況下，您還需要在 XAML 標記中將 UI 元素的屬性設為固定大小。比例因素會自動套用至您的應用程式，具體取決於應用程式執行的裝置，以及使用者所做的顯示設定。此比例因素可讓任何 UI 元素保持固定大小，從而在各種螢幕尺寸上向使用者呈現幾乎是固定大小的觸控 (和閱讀) 目標。搭配動態佈局，您的 UI 將不僅僅是在不同裝置上進行視覺縮放。而是會執行必要的操作，將適當數量的內容放入可用空間中。

為了讓您的應用程式在所有顯示器上都能獲得最佳體驗，建議您以各種大小建立各個點陣圖資產，每個尺寸都適合特定的比例因素。在大多數情況下，以 100% 比例、200% 比例和 400% 比例 (依優先順序排列) 提供資源，可為您在所有中間比例因素中提供出色的結果。

注意如果您出於某種原因只能建立一種尺寸的資源，建議建立 100% 比例的資產。在 Microsoft Visual Studio 中，UWP 應用程式的預設專案範本僅提供一種尺寸的品牌資產 (磚影像和標誌)，但其比例並不是 100%。為您自己的應用程式撰寫資產時，請遵循本節中的指南，提供 100%、200% 和 400% 的大小，並使用資產套件。

如果您的作品比較複雜，那麼您可能需要提供更多尺寸的資產。如果您從向量藝術開始，就能以較輕鬆的方式產生任意比例因素的高品質資源。

不建議您嘗試支援所有比例因素，但 Windows 10 應用程式的完整比例因素清單為 100%、125%、150%、200%、250%、300% 和 400%。如果您有提供這些尺寸，商店將針對各個裝置選擇正確大小的資源，並且只會下載這些資源。商店會根據裝置的 DPI 選擇要下載的資產。您可以按比例因素 (如 140% 和 220%) 重複使用 Windows 執行階段 8.x 應用程式中的資產，但您的應用程式會以其中一個新的比例因素執行，因此部分點陣圖會進行縮放。在各種裝置上測試您的應用程式，看看您是否對結果感到滿意。

您可能會重複使用 Windows 執行階段 8.x 應用程式中的 XAML 標記，且該標記中使用常值維度值 (可能用於調整形狀或其他元素的大小，也可能用於排版)。但是，在某些情況下，Windows 10 應用程式在裝置上使用的比例因素比Universal 8.1 應用程式使用的比例因素更大 (例如，之前為 140% 的地方使用150%，之前為 180% 的地方使用 200%)。因此，如果您發現這些常數值在 Windows 10 上變得太大，請嘗試將它們乘以 0.8。如需詳細資訊，請參閱 UWP 應用程式的回應式設計 101。

GridView 和 ListView 變更

對 GridView 的預設樣式設定器進行了一些變更，以使控制項垂直捲動 (而不是像以前預設那樣水平捲動)。如果您在專案中編輯了預設樣式的副本，則您的副本不會進行這些變更，因此您需要手動進行變更。以下是變更清單。

ScrollViewer.HorizontalScrollBarVisibility 的設定器已從自動變更為已停用。
ScrollViewer.VerticalScrollBarVisibility 的設定器從已停用變更為自動。
ScrollViewer.HorizontalScrollMode 的設定器從已啟用變更為已停用。
ScrollViewer.HorizontalScrollMode 的設定器從已停用變更為已啟用。
在 ItemsPanel 的設定器中，ItemsWrapGrid.Orientation 的值已從垂直變更為水平。

如果最後的變更 (方向的變更) 看起來很不協調，那麼請記住這裡說的是換行方格。水平方向的換行方格 (新值) 類似於文字以水平方式行進，並在頁面末尾中斷換至下一行的書寫系統。這類文字的頁面會垂直捲動。相反地，垂直方向的換行方格 (先前的值) 類似於文字以垂直方式行進，因此水平捲動的書寫系統。

以下 GridView 和 ListView 方面在 Windows 10 中發生變更或不受支援。

Windows 10 應用程式不支援 IsSwipeEnabled 屬性 (僅限 Windows 執行階段 8.x 應用程式)。 API 仍然存在，但設定它不會產生任何效果。支援所有先前的選擇手勢，但向下撥動 (不支援，因為資料顯示它不可發現) 和按滑鼠右鍵 (保留以顯示操作功能表) 除外。
Windows 10 應用程式不支援 ReorderMode 屬性 (僅限 Windows Phone Store 應用程式)。 API 仍然存在，但設定它不會產生任何效果。相反地，在 GridView 或 ListView 上將 AllowDrop 和 CanReorderItems 設為 True，然後使用者將能夠使用按住 (或點擊並拖曳) 手勢重新進行排序。
針對 Windows 10 進行開發時，對於 ListView 和 GridView，請在項目容器樣式中使用 ListViewItemPresenter，而不是 GridViewItemPresenter。如果您編輯預設項目容器樣式的副本，則會取得正確的類型。
Windows 10 應用程式的選擇視覺效果已變更。如果將 SelectionMode 設為 Multiple，則預設情況下將為每個項目呈現一個核取方塊。 ListView 項目的預設設定代表核取方塊會內嵌在項目旁邊，因此項目其餘部分佔用的空間將稍微減少並移動。對於 GridView 項目，此核取方塊預設會重疊在項目頂端。但無論是哪種情況，您都可以控制核取方塊的佈局 (內嵌或重疊) (使用 CheckMode 屬性)，以及它們是否完全顯示 (使用 SelectionCheckMarkVisualEnabled 屬性) 在項目容器樣式內的 ListViewItemPresenter 元素上，範例如下所示。
在 Windows 10 中，UI 虛擬化期間每個項目會引發兩次 ContainerContentChanging 事件：一次用於回收，一次用於重複使用。如果 InRecycleQueue 的值為 True，並且您沒有特殊的回收工作要做，那麼您可以立即退出事件處理程序，並確保當重複使用相同項目時將其重新輸入 (此時 InRecycleQueue 將為 False)。

<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem|GridViewItem">
    ...
    <Setter.Value>
        <ControlTemplate TargetType="ListViewItem|GridViewItem">
            <ListViewItemPresenter CheckMode="Inline|Overlay" ... />
        </ControlTemplate>
    </Setter.Value>
    ...
</Style>

a listviewitempresenter with inline check box

ListViewItemPresenter 和內嵌核取方塊

a listviewitempresenter with overlaid check box

ListViewItemPresenter 和重疊核取方塊

由於取消了向下撥動和右鍵點擊手勢進行選擇 (出於上述原因)，互動模型發生了變化，其結果之一是 ItemClick 和 SelectionChanged 事件不再互斥。對於您的 Windows 10 應用程式，請檢查您的場景，並決定是採用「選擇」還是「呼叫」互動模型。如需詳細資訊，請參閱如何變更互動模式。
用於設定 ListViewItemPresenter 樣式的屬性有一些變更。新屬性包括 CheckBoxBrush、PressedBackground、SelectedPressedBackground 和 FocusSecondaryBorderBrush。 Windows 10 應用程式忽略的屬性包括 Padding (改為使用 ContentMargin) 、CheckHintBrush、CheckSelectingBrush、PointerOverBackgroundMargin、ReorderHintOffset、SelectedBorderThickness 和 SelectedPointerOverBorderBrush。

此表說明了 ListViewItem 和 GridViewItem 控制項範本中視覺狀態和視覺狀態群組的變更。

8.1	功能狀態	Windows 10/11	功能狀態
CommonStates		CommonStates
	正常		正常
	PointerOver		PointerOver
	按下		按下
	PointerOverPressed		[不可用]
	停用		[不可用]
	[不可用]		PointerOverSelected
	[不可用]		Selected
	[不可用]		PressedSelected
[不可用]		DisabledStates
	[不可用]		停用
	[不可用]		已啟用
SelectionHintStates		[不可用]
	VerticalSelectionHint		[不可用]
	HorizontalSelectionHint		[不可用]
	NoSelectionHint		[不可用]
[不可用]		MultiSelectStates
	[不可用]		MultiSelectDisabled
	[不可用]		MultiSelectEnabled
SelectionStates		[不可用]
	取消選取		[不可用]
	未選取		[不可用]
	UnselectedPointerOver		[不可用]
	UnselectedSwiping		[不可用]
	選取		[不可用]
	Selected		[不可用]
	SelectedSwiping		[不可用]
	SelectedUnfocused		[不可用]

如果您有自訂 ListViewItem 或 GridViewItem 控制項範本，請根據上述變更進行檢查。建議您重新開始編輯新預設範本的副本，然後重新套用您的自訂設定。如果您因故而無法執行此操作並需要編輯現有範本，那麼以下一般指南將說明如何進行此動作。

新增 MultiSelectStates 視覺狀態群組。
新增 MultiSelectDisabled 視覺狀態。
新增 MultiSelectEnabled 視覺狀態。
新增 DisabledStates 視覺狀態群組。
新增 Enabled 視覺狀態。
在 CommonStates 視覺狀態群組中，移除 PointerOverPressed 視覺狀態。
將 Disabled 視覺狀態移至 DisabledStates 視覺狀態群組。
新增 PointerOverSelected 視覺狀態。
新增 PressedSelected 視覺狀態。
移除 SelectedHintStates 視覺狀態群組。
在 SelectionStates 視覺狀態群組中，將 Selected 視覺狀態移至 CommonStates 視覺狀態群組。
移除整個 SelectionStates 視覺狀態群組。

當地語系化和全球化

您可以在 UWP 應用程式專案中重複使用 Universal 8.1 專案中的 Resources.resw 檔案。複製檔案後，將其新增至專案中，並將建置動作設為 PRIResource，將複製到輸出目錄設為不要複製。 ResourceContext.QualifierValues 主題說明如何根據裝置系列資源選擇因素載入裝置系列特定的資源。

播放至

對於 Windows 10 應用程式，Windows.Media.PlayTo 命名空間中的 API 已棄用，而改用 Windows.Media.Casting API。

資源索引鍵和 TextBlock 樣式大小

Windows 10 的設計語言已進化，因此某些系統風格也改變了。在某些情況下，您可能需要重新審視檢視的視覺設計，使其與變更後的樣式屬性保持一致。

在其他情況下，不再支援資源索引鍵。 Visual Studio 中的 XAML 標記編輯器會醒目顯示無法解析的資源索引鍵參考。例如，XAML 標記編輯器會用紅色波浪線在樣式索引鍵 ListViewItemTextBlockStyle 的參考底下劃底線。如果不修正該問題，那麼當您嘗試將應用程式部署到仿真器或裝置時，該應用程式將立即終止。因此，確認 XAML 標記是否正確非常重要。您會發現 Visual Studio 是攔截這類問題的絕佳工具。

對於仍然支援的索引鍵，設計語言的變更表示某些樣式設定的屬性已變更。例如，TitleTextBlockStyle 在 Windows 執行階段 8.x 應用程式中將 FontSize 設定為 14.667px，而 Windows Phone Store 應用程式中則將 FontSize 設定為 18.14px。但是，在 Windows 10 應用程式中，相同的樣式將 FontSize 設定為更大的 24px。檢查您的設計和版面配置，並在正確的位置使用適當的樣式。如需更多資訊，請參閱字體和設計 UWP 應用程式指南。

以下是不再支援的索引鍵完整清單。

CheckBoxAndRadioButtonMinWidthSize
CheckBoxAndRadioButtonTextPaddingThickness
ComboBoxFlyoutListPlaceholderTextOpacity
ComboBoxFlyoutListPlaceholderTextThemeMargin
ComboBoxHighlightedBackgroundThemeBrush
ComboBoxHighlightedBorderThemeBrush
ComboBoxHighlightedForegroundThemeBrush
ComboBoxInlinePlaceholderTextForegroundThemeBrush
ComboBoxInlinePlaceholderTextThemeFontWeight
ComboBoxItemDisabledThemeOpacity
ComboBoxItemHighContrastBackgroundThemeMargin
ComboBoxItemMinHeightThemeSize
ComboBoxPlaceholderTextBlockStyle
ComboBoxPlaceholderTextThemeMargin
CommandBarBackgroundThemeBrush
CommandBarForegroundThemeBrush
ContentDialogButton1HostPadding
ContentDialogButton2HostPadding
ContentDialogButtonsMinHeight
ContentDialogContentLandscapeWidth
ContentDialogContentMinHeight
ContentDialogDimmingColor
ContentDialogTitleMinHeight
ControlContextualInfoTextBlockStyle
ControlHeaderContentPresenterStyle
ControlHeaderTextBlockStyle
FlyoutContentPanelLandscapeThemeMargin
FlyoutContentPanelPortraitThemeMargin
GrabberMargin
GridViewItemMargin
GridViewItemPlaceholderBackgroundThemeBrush
GroupHeaderTextBlockStyle
HeaderContentPresenterStyle
HighContrastBlack
HighContrastWhite
HubHeaderCharacterSpacing
HubHeaderFontSize
HubHeaderMarginThickness
HubSectionHeaderCharacterSpacing
HubSectionHeaderFontSize
HubSectionHeaderMarginThickness
HubSectionMarginThickness
InlineWindowPlayPauseMargin
ItemTemplate
LeftFullWindowMargin
LeftMargin
ListViewEmptyStaticTextBlockStyle
ListViewItemContentTextBlockStyle
ListViewItemContentTranslateX
ListViewItemMargin
ListViewItemMultiselectCheckBoxMargin
ListViewItemSubheaderTextBlockStyle
ListViewItemTextBlockStyle
MediaControlPanelAudioThemeBrush
MediaControlPanelPhoneVideoThemeBrush
MediaControlPanelVideoThemeBrush
MediaControlPanelVideoThemeColor
MediaControlPlayPauseThemeBrush
MediaControlTimeRowThemeBrush
MediaControlTimeRowThemeColor
MediaDownloadProgressIndicatorThemeBrush
MediaErrorBackgroundThemeBrush
MediaTextThemeBrush
MenuFlyoutBackgroundThemeBrush
MenuFlyoutBorderThemeBrush
MenuFlyoutLandscapeThemePadding
MenuFlyoutLeftLandscapeBorderThemeThickness
MenuFlyoutPortraitBorderThemeThickness
MenuFlyoutPortraitThemePadding
MenuFlyoutRightLandscapeBorderThemeThickness
MessageDialogContentStyle
MessageDialogTitleStyle
MinimalWindowMargin
PasswordBoxCheckBoxThemeMargin
PhoneAccentBrush
PhoneBackgroundBrush
PhoneBackgroundColor
PhoneBaseBlackColor
PhoneBaseHighColor
PhoneBaseLowColor
PhoneBaseLowSolidColor
PhoneBaseMediumHighColor
PhoneBaseMediumMidColor
PhoneBaseMediumMidSolidColor
PhoneBaseMidColor
PhoneBaseWhiteColor
PhoneBorderThickness
PhoneButtonBasePressedForegroundBrush
PhoneButtonContentPadding
PhoneButtonFontWeight
PhoneButtonMinHeight
PhoneButtonMinWidth
PhoneChromeBrush
PhoneChromeColor
PhoneControlBackgroundColor
PhoneControlDisabledColor
PhoneControlForegroundColor
PhoneDisabledBrush
PhoneDisabledColor
PhoneFontFamilyLight
PhoneFontFamilySemiBold
PhoneForegroundBrush
PhoneForegroundColor
PhoneHighContrastSelectedBackgroundThemeBrush
PhoneHighContrastSelectedForegroundThemeBrush
PhoneImagePlaceholderColor
PhoneLowBrush
PhoneMidBrush
PhonePageBackgroundColor
PhonePivotLockedTranslation
PhonePivotUnselectedItemOpacity
PhoneRadioCheckBoxBorderBrush
PhoneRadioCheckBoxBrush
PhoneRadioCheckBoxCheckBrush
PhoneRadioCheckBoxPressedBrush
PhoneStrokeThickness
PhoneTextHighColor
PhoneTextLowColor
PhoneTextMidColor
PhoneTextOverAccentColor
PhoneTouchTargetLargeOverhang
PhoneTouchTargetOverhang
PivotHeaderItemPadding
PlaceholderContentPresenterStyle
ProgressBarHighContrastAccentBarThemeBrush
ProgressBarIndeterminateRectagleThemeSize
ProgressBarRectangleStyle
ProgressRingActiveBackgroundOpacity
ProgressRingElipseThemeMargin
ProgressRingElipseThemeSize
ProgressRingTextForegroundThemeBrush
ProgressRingTextThemeMargin
ProgressRingThemeSize
RichEditBoxTextThemeMargin
RightFullWindowMargin
RightMargin
ScrollBarMinThemeHeight
ScrollBarMinThemeWidth
ScrollBarPanningThumbThemeHeight
ScrollBarPanningThumbThemeWidth
SliderThumbDisabledBorderThemeBrush
SliderTrackBorderThemeBrush
SliderTrackDisabledBorderThemeBrush
TextBoxBackgroundColor
TextBoxBorderColor
TextBoxDisabledHeaderForegroundThemeBrush
TextBoxFocusedBackgroundThemeBrush
TextBoxForegroundColor
TextBoxPlaceholderColor
TextControlHeaderMarginThemeThickness
TextControlHeaderMinHeightSize
TextStyleExtraExtraLargeFontSize
TextStyleExtraLargePlusFontSize
TextStyleMediumFontSize
TextStyleSmallFontSize
TimeRemainingElementMargin

儘管 SearchBox 可在通用裝置系列中實作，但其在行動裝置上的功能並不完整。使用 AutoSuggestBox 獲得通用搜尋體驗。以下是一般使用 AutoSuggestBox 實作的搜尋體驗。

一旦使用者開始輸入，就會引發 TextChanged 事件，原因是 UserInput。然後，您填入建議清單並設定 AutoSuggestBox 的 ItemsSource。當使用者瀏覽清單時，將引發 SuggestionChosen 事件 (如果您設定了 TextMemberDisplayPath，則文字方塊將自動填入指定的屬性)。當使用者使用 Enter 鍵提交選項時，將引發 QuerySubscribed 事件，此時您可以對該建議採取動作 (在這種情況下，很可能會瀏覽到另一個頁面，其中包含指定內容的更多詳細資訊)。請注意，不再支援 SearchBoxQuerySubscribedEventArgs 的 LinguisticDetails 和 Language 屬性 (有對等的 API 來支援該功能)。並且不再支援 KeyModifiers。

AutoSuggestBox 也支援輸入法編輯器 (IME)。如果您想顯示「尋找」圖示，也可以使用此做法 (與該圖示互動將導致引發 QuerySubscribed 事件)。

   <AutoSuggestBox ... >
        <AutoSuggestBox.QueryIcon>
            <SymbolIcon Symbol="Find"/>
        </AutoSuggestBox.QueryIcon>
    </AutoSuggestBox>

另請參閱 AutoSuggestBox 移植範例。

SemanticZoom 變更

SemanticZoom 的縮小手勢已集中在 Windows Phone 模型上，即點擊或按一下群組標題 (因此，桌上型電腦不再顯示用於縮小的減號按鈕)。現在，我們可在所有裝置上不受限制地獲得相同、一致的行為。與 Windows Phone 模型的外觀差別是縮小檢視 (捷徑清單) 取代了放大檢視，而不是重疊。因此，您可以從縮小檢視中移除任何半透明背景。

在 Windows Phone Store 應用程式中，縮小的檢視會延伸到螢幕大小。在 Windows 執行階段 8.x 應用程式和 Windows 10 應用程式中，縮小檢視的大小受限於 SemanticZoom 控制項的邊界。

在 Windows Phone Store 應用程式中，如果縮小檢視的背景中有任何透明度，則縮小檢視後面的內容會依 Z 軸順序顯示。在 Windows 執行階段 8.x 應用程式和 Windows 10 應用程式中，縮小檢視後面看不到任何內容。

在 Windows 執行階段 8.x 應用程式中，當應用程式停用並重新啟用時，縮小檢視將會關閉 (如果正在顯示)，並顯示放大檢視。在 Windows Phone Store 應用程式和 Windows 10 應用程式中，如果正在顯示縮小的檢視，則該檢視將保持顯示。

在 Windows Phone Store 應用程式和 Windows 10 應用程式中，按下返回鈕時會關閉縮小檢視。 Windows 執行階段 8.x 應用程式沒有內建返回按鈕處理，因此不會有此問題。

設定

Windows 執行階段 8.x SettingsPane 類別不適用於 Windows 10。而除了建立「設定」頁面之外，您還應該為使用者提供一種從應用程式內存取它的方法。建議您在最上層公開此應用程式「設定」頁面，作為瀏覽窗格上的最後一個釘選項目，但以下是完整的選項集。

瀏覽窗格。「設定」應該是瀏覽選項清單中的最後一項，並釘選在底部。
應用程式列/工具列 (在索引標籤檢視或樞紐佈局內)。「設定」應該是應用程式列或工具列功能表飛出視窗中的最後一項。不建議將「設定」作為瀏覽中的最上層的項目。
中樞。「設定」應位於功能表飛出視窗內部 (可來自應用程式列功能表或中樞佈局內的工具列功能表)。

也不建議將「設定」埋沒在主要詳細資料窗格中。

您的「設定」頁面應填滿應用程式的整個視窗，且「設定」頁面中也需包含「關於」和「意見反應」。有關「設定」頁面設計的指南，請參閱應用程式設定指南。

Text

文字 (或排版) 方面對於 UWP 應用程式很重要，在移植時，您可能需要重新審視檢視的視覺設計，使其與新的設計語言和諧共存。使用以下圖例來尋找可用的通用 Windows 平台 (UWP) TextBlock 系統樣式。尋找與您使用的 Windows Phone Silverlight 樣式相對應的樣式。或者，您可以建立自己的通用樣式，並將屬性從 Windows Phone Silverlight 系統樣式複製到其中。

system textblock styles for windows 10 apps
Windows 10 應用程式的系統 TextBlock 樣式

在 Windows 執行階段 8.x 應用程式和 Windows Phone Store 應用程式中，預設字型系列是 Global User Interface。在 Windows 10 應用程式中，預設字型系列是 Segoe UI。因此，應用程式中的字型規格看起來可能會有所不同。如果您想重現 8.1 文字的外觀，您可以使用 LineHeight 和 LineStackingStrategy 等屬性來設定自己的指標。

在 Windows 執行階段 8.x 應用程式和 Windows Phone Store 應用程式中，文字的預設語言設定為建置語言或 en-us。在 Windows 10 應用程式中，預設語言設定為最上層應用程式語言 (字型後援)。您可以明確設定 FrameworkElement.Language，但如果不設定該屬性的值，您將享受更好的字型後援行為。

如需更多資訊，請參閱字體和設計 UWP 應用程式指南。另外，請參閱上面的控制項一節以了解對文字控制項的變更。

主題變更

對於 Universal 8.1 應用程式，預設主題為深色。對於 Windows 10 裝置，預設主題已變更，但您可以透過在 App.xaml 中宣告要求的主題來控制使用的主題。例如，若要在所有裝置上使用深色主題，請將 RequestedTheme="Dark" 新增至根應用程式元素。

磚和快顯通知

對於磚和快顯通知，您目前使用的範本將繼續在 Windows 10 應用程式中使用。但有些新的調適型範本可供您使用，這些範本在通知、磚、快顯通知和徽章中所有說明。

先前，在桌上型電腦上，快顯通知是一則暫時訊息。一旦錯過或忽略快顯通知，它就會消失，並且無法再擷取。在 Windows Phone 上，如果忽略或暫時關閉快顯通知，它將進入控制中心。現在，控制中心不再局限於行動裝置系列。

若要傳送快顯通知，不再需要宣告功能。

視窗大小

對於 Universal 8.1 應用程式，ApplicationView 應用程式資訊清單元素用於宣告最小視窗寬度。在 UWP 應用程式中，您可以使用命令式程式碼指定最小尺寸 (寬度和高度)。預設最小尺寸為 500x320epx，這也是可接受的最小尺寸。可接受最大的最小尺寸為 500x500epx。

   Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetPreferredMinSize
        (new Size { Width = 500, Height = 500 });

下一個主題是 I/O、裝置和應用程式模型移植。

Share via

將 Windows 執行階段 8.x XAML 和 UI 移植到 UWP

命令式程式碼

調適型/回應式 UI

返回按鈕處理

Charms

控制項以及控制項樣式和範本

Windows 10 中的設計語言

有效像素、觀看距離和比例因素

GridView 和 ListView 變更

當地語系化和全球化

播放至

資源索引鍵和 TextBlock 樣式大小

SemanticZoom 變更

設定

Text

主題變更

磚和快顯通知

視窗大小

意見反應

意見反應

其他資源

Share via

將 Windows 執行階段 8.x XAML 和 UI 移植到 UWP

命令式程式碼

調適型/回應式 UI

返回按鈕處理

Charms

控制項以及控制項樣式和範本

Windows 10 中的設計語言

有效像素、觀看距離和比例因素

GridView 和 ListView 變更

當地語系化和全球化

播放至

資源索引鍵和 TextBlock 樣式大小

已棄用 SearchBox，而改用 AutoSuggestBox

SemanticZoom 變更

設定

Text

主題變更

磚和快顯通知

視窗大小

意見反應

意見反應

其他資源