建你的第一個 Windows 10 通用應(yīng)用。

“Hello World”是程序員初學(xué)的一句編程套用語。在這節(jié)中，我們將以C++和XAML 為例，開發(fā)一個含有“Hello World”的通用應(yīng)用。

與常規(guī)情況的差異

如果你習(xí)慣使用 C++ 編寫 Windows 桌面程序，你可能會發(fā)現(xiàn) Windows 應(yīng)用商店應(yīng)用和 Windows Phone 應(yīng)用編程的某些方面與此類似，但在其他一些方面則需要了解更多知識。

相同之處有：

你可以使用 STL、CRT（有某些例外）以及任何其他 C++ 庫，只要代碼不嘗試調(diào)用不可從 Windows 運(yùn)行時環(huán)境訪問的 Windows 函數(shù)。

如果你習(xí)慣可視設(shè)計(jì)器，你仍然可以使用內(nèi)置于 Microsoft Visual Studio 的設(shè)計(jì)器，或者你可以使用功能更加完整的 Blend for Visual Studio。如果你習(xí)慣手動編寫 UI 代碼，則可以手動編寫 XAML 的代碼。

你仍然可以創(chuàng)建使用 Windows 操作系統(tǒng)類型和你自己的自定義類型的應(yīng)用。

你仍然可以使用 Visual Studio 調(diào)試器、探查器和其他開發(fā)工具。

你仍然可以通過使用 Visual C++ 編譯器創(chuàng)建用來編譯原生機(jī)器代碼的應(yīng)用。使用 C++編寫的Windows 應(yīng)用商店應(yīng)用不能在托管的運(yùn)行時環(huán)境中執(zhí)行。

新增內(nèi)容

Windows 應(yīng)用商店應(yīng)用和 Universal Windows App 的設(shè)計(jì)準(zhǔn)則與桌面應(yīng)用的設(shè)計(jì)準(zhǔn)則有很大差別。設(shè)計(jì)的重點(diǎn)不再是窗口邊框、標(biāo)簽和對話框等。內(nèi)容才是最重要的。出色的Universal Windows App 從最開始的規(guī)劃階段就嚴(yán)格遵循這些準(zhǔn)則。

你將使用 XAML 定義整個 UI。在 Universal Windows App 中，UI 與核心程序邏輯之間的分離遠(yuǎn)比在 MFC 或 Win32 應(yīng)用中更為清晰。你在代碼文件中處理行為的同時，其他用戶可以在 XAML 文件中處理 UI 的外觀。

盡管在 Windows 設(shè)備上 Win32 仍然可用于某些功能，但你將主要面向一個易于導(dǎo)航且面向?qū)ο蟮娜?API（即 Windows 運(yùn)行時）進(jìn)行編程。

使用 C++/CX 使用和創(chuàng)建 Windows 運(yùn)行時對象。C++/CX 支持 C++ 異常處理、代理、事件和動態(tài)創(chuàng)建的對象的自動引用計(jì)數(shù)。使用 C++/CX 時，基礎(chǔ) COM 和 Windows 體系結(jié)構(gòu)的詳細(xì)信息從應(yīng)用代碼中隱藏。有關(guān)詳細(xì)信息，請參閱 C++/CX 語言參考。

你的應(yīng)用將編譯為一個程序包，其中還包含有關(guān)你的應(yīng)用所包含的類型、它使用的資源以及它需要的功能（文件訪問、Internet 訪問和相機(jī)訪問等）的元數(shù)據(jù)。

在 Windows 應(yīng)用商店和 Windows Phone 應(yīng)用商店中，你的應(yīng)用通過一個驗(yàn)證流程確定為安全之后，即可面向無數(shù)潛在客戶發(fā)布。

開始開發(fā)應(yīng)用

我們的第一個應(yīng)用是“Hello World”，它演示了交互性、布局和樣式的一些基本功能。我們將通過 Universal Windows App 項(xiàng)目模板創(chuàng)建應(yīng)用。如果你之前開發(fā)過 Windows 8.1和 Windows Phone 8.1 應(yīng)用，你可能還記得在 Visual Studio 中，你必須具有三個項(xiàng)目：一個用于 Windows App，一個用于手機(jī)應(yīng)用，另一個用于共享代碼。Windows 10 UniversalWindows Platform (UAP) 使只有一個項(xiàng)目成為可能，該項(xiàng)目可在所有設(shè)備上運(yùn)行，包括運(yùn)行Windows 10 的臺式機(jī)和筆記本電腦，平板電腦、手機(jī)等設(shè)備，等等。

我們將從基礎(chǔ)開始：

如何使用 Visual Studio 2015 創(chuàng)建 Universal Windows App。

如何了解創(chuàng)建的項(xiàng)目和文件。

如何了解 Visual C++ 組件擴(kuò)展中的擴(kuò)展以及何時使用它們。

首先，在 Visual Studio 中創(chuàng)建一個解決方案（圖）：

創(chuàng)建空白通用應(yīng)用

1. 在 Visual Studio 中，依次選擇“文件”>“新建”>“項(xiàng)目”。

2. 在“ 新 建 項(xiàng) 目” 對 話 框 的 左 側(cè) 窗 格 中，展 開“ 已 安裝”>“VisualC++”>“Windows”>“Windows 通用”。

3. 在中心窗格中，選擇“空白應(yīng)用 (Windows 通用)”。

4. 輸入項(xiàng)目名稱。我們將其命名為 HelloWorld。

5. 選擇“確定”按鈕。已創(chuàng)建項(xiàng)目文件。在繼續(xù)之前，讓我們看一下解決方案的內(nèi)容（圖）。、

解決方案的內(nèi)容

關(guān)于項(xiàng)目文件

項(xiàng)目文件中的每個 .xaml 文件都在同一個文件夾有對應(yīng)的 .xaml.h 文件和 .xaml.cpp 文件，在“生成的文件”文件夾中有 .g 文件和 .g.hpp 文件。修改XAML 文件以創(chuàng)建 UI 元素，并將其連接到數(shù)據(jù)源 (DataBinding)。修改 .h 和.cpp 文件以為事件處理程序添加自定義邏輯。自動生成的文件表示 XAML 標(biāo)記到 C++ 的轉(zhuǎn)換。不要修改這些文件，但是請研究它們以更好地了解代碼隱藏的工作原理。基本上，生成的文件包含XAML 根元素的部分類定義；此類是你在 *.xaml.h 和 .cpp 文件中修改的相同類。生成的文件將 XAML UI 子元素聲明為類成員，以便你可以在你編寫的代上圖解決方案的內(nèi)容碼中引用它們。在構(gòu)建時，生成的代碼和你的代碼合并為完整的類定義，然后進(jìn)行編譯。

讓我們先看一下項(xiàng)目文件。

App.xaml、App.xaml.h、App.xaml.cpp：代表應(yīng)用程序?qū)ο螅@是應(yīng)用的入口點(diǎn)。App.

xaml 不包含特定于頁面的 UI 標(biāo)記，但是你可以添加希望可以從任何頁面訪問的 UI 樣式和其他元素。代碼隱藏文件包含 OnLaunched 和OnSuspending 事件的處理程序。通常，你在此處添加自定義代碼以應(yīng)用啟動時初始化應(yīng)用并在它掛起或終止時執(zhí)行清理。

MainPage.xaml、MainPage.xaml.h、MainPage.xaml.cpp：包含應(yīng)用中的默認(rèn)“開始”

頁面的 XAML 標(biāo)記和代碼隱藏。它沒有導(dǎo)航支持或內(nèi)置控件。

pch.h, pch.cpp：預(yù)編譯標(biāo)頭文件和在你的項(xiàng)目中包含它的文件。在 pch.h 中，你可以在解決方案中包含任何不經(jīng)常更改且包含在其他文件中的標(biāo)頭。

package.appxmanifest：描述應(yīng)用所需的設(shè)備功能、應(yīng)用版本信息以及其他元數(shù)據(jù)的XML 文件。要在“清單設(shè)計(jì)器”中打開此文件，只需右鍵單擊它。

HelloWorld.Windows_TemporaryKey.pfx：在 Visual Studio 中，支持在此計(jì)算機(jī)上進(jìn)行應(yīng)用部署的密鑰。

代碼一覽

如果檢查已共享項(xiàng)目的 App.xaml.h 和 App.xaml.cpp 中以及每個特定于平臺的項(xiàng)目的MainPage.xaml.h 和 .cpp 中的代碼，你將注意到大部分 C++ 代碼看起來都很熟悉。但是，如果你不熟悉 Windows RT 應(yīng)用，或者你使用過 C++/CLI，某些語法元素可能不那么熟悉。

以下是你將在 C++/CX 中看到的最常見的非標(biāo)準(zhǔn)語法元素：

引用類

幾乎所有 Windows 運(yùn)行時類，包括 Windows API--XAML 控件中的所有類型、應(yīng)用中的頁面、應(yīng)用類本身，所有設(shè)備和網(wǎng)絡(luò)對象、所有容器類型，都聲明為 ref class。（一些Windows 類型是 value class 或 value struct）。引用類可從任何語言使用。在 C++ 中，這些類型的生存期由自動引用計(jì)數(shù)管理（非垃圾集合），以便你從來不會明確地刪除這些對象。

你也可以創(chuàng)建自己的引用類。

namespace HelloWorld

public ref class MainPage sealed

{

public:

MainPage();

...

};

}

所有 Windows 運(yùn)行時類型必須在命名空間中進(jìn)行聲明，而且與 ISO C++ 中不同，這些類型本身具有輔助功能修改器。public 修改器使類對命名空間之外的 Windows 運(yùn)行時組件可見。sealed 關(guān)鍵字表示該類無法用作基類。幾乎已密封所有引用類；不廣泛支持類繼承，因?yàn)?Javascript 不理解它。

ref new 和 ^ (hats)

你通過使用 ^（乘冪號）運(yùn)算符聲明引用類的變量，并且使用引用新關(guān)鍵字實(shí)例化該對象。

然后你使用 -> 運(yùn)算符訪問對象的實(shí)例方法，就像 C++ 指針一樣。使用 :: 運(yùn)算符訪問靜態(tài)方法，就像 ISO C++ 中一樣。

在以下代碼中，我們使用完全限定的名稱來實(shí)例化對象，并使用 -> 運(yùn)算符調(diào)用實(shí)例方法。

Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();bitmapImage->SetSource(fileStream);通常，在 .cpp 文件中，我們將添加 using namespace Windows::UI::Xaml::Media::Imaging 指令和自動關(guān)鍵字，因此相同的代碼看似如下：

auto bitmapImage = ref new BitmapImage();bitmapImage->SetSource(fileStream);屬性引用類可以具有屬性，和在托管的語言中一樣，這些屬性是對使用代碼顯示為字段的特殊成員函數(shù)。

public ref class SaveStateEventArgs sealed{public:

// Declare the property

property Windows::Foundation::Collections::IMap<Platform::String^, Platform::-Object^>^ PageStateform::Object^>^ get();{

Windows::Foundation::Collections::IMap<Platform::String^, Plat-}

...

};

...

// consume the property like a public fieldvoid PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e){if (mruToken != nullptr && !mruToken->IsEmpty()){e->PageState->Insert(“mruToken”, mruToken);}

}

代理

和在托管語言中一樣，代理是包裝帶有特定簽名的函數(shù)的引用類型。它們經(jīng)常與事件和事件處理程序一同使用// Delegate declaration (within namespace scope)public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);// Event declaration (class scope)public ref class NavigationHelper sealed{

public:

event LoadStateEventHandler^ LoadState;

};

// Create the event handler in consuming classMainPage::MainPage(){auto navigationHelper = ref new Common::NavigationHelper(this);navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);}

向應(yīng)用添加內(nèi)容

讓我們來向應(yīng)用添加一些內(nèi)容。

步驟 1：修改你的起始頁

在“解決方案資源管理器”中，打開 MainPage.xaml。

通過向根 Grid 添加以下 XAML 來為 UI 創(chuàng)建控件，緊挨在其結(jié)束標(biāo)記之前。它包含StackPanel，后者具有一個詢問用戶名的 TextBlock、一個接受用戶名的 TextBox 元素、一個 Button 和其他 TextBlock 元素。

<StackPanel Margin=”120,30,0,0”>

<TextBlock HorizontalAlignment=”Left” Text=”Hello World” FontSize=”36”/>

<TextBlock Text=”What’s your name?”/>

<StackPanel Orientation=”Horizontal” Margin=”0,20,0,20”>

<TextBox x:Name=”nameInput” Width=”300” HorizontalAlignment=”Left”/>

<Button Content=”Say &quot;Hello&quot;”/>

</StackPanel>

<TextBlock x:Name=”greetingOutput”/>

</StackPanel>

我們將在導(dǎo)航、布局和視圖文章中談?wù)撚嘘P(guān) XAML 布局的詳細(xì)信息。

此時，你已創(chuàng)建了一個非常基本的 Windows 應(yīng)用。若要查看 Windows 應(yīng)用商店應(yīng)用的外觀，請按 F5，在調(diào)試模式下構(gòu)建、部署并運(yùn)行該應(yīng)用。

首先會出現(xiàn)默認(rèn)的初始屏幕。它有一個圖像 (Assets\SplashScreen.scale-100.png) 以及在應(yīng)用的清單文件中指定的背景色。若要了解如何自定義初始屏幕，請參閱添加初始屏幕。

當(dāng)初始屏幕消失時，將顯示你的應(yīng)用。它顯示黑屏和標(biāo)題"My Application"。

沒有關(guān)閉應(yīng)用的按鈕或命令。盡管你可以使用關(guān)閉手勢或 Alt+F4 來關(guān)閉它，但是通常不關(guān)閉 Windows 應(yīng)用商店應(yīng)用。（第 2 部分：管理應(yīng)用生命周期和狀態(tài)中討論了這一點(diǎn)。）按Windows 鍵可轉(zhuǎn)到“開始”菜單的應(yīng)用列表，而且請注意，部署應(yīng)用時會將其磁貼添加到“開始”菜單。若要再次運(yùn)行應(yīng)用，只需點(diǎn)擊或單擊該應(yīng)用的磁貼，或在 Visual Studio 中按 F5 在調(diào)試模式下運(yùn)行該應(yīng)用。

創(chuàng)建的通用應(yīng)用頁面

它還做不了多少事，但是祝賀你，你已經(jīng)構(gòu)建了你的第一個 Windows 應(yīng)用商店應(yīng)用!

要停止調(diào)試并關(guān)閉應(yīng)用，請返回到 Visual Studio 并按 Shift+F5。

有關(guān)詳細(xì)信息，請參閱從 Visual Studio 運(yùn)行 Windows 應(yīng)用商店應(yīng)用。

在應(yīng)用中，你可以在 TextBox 中鍵入，但是單擊 Button 不執(zhí)行任何操作。在以后的步驟中，為按鈕的 Click 事件創(chuàng)建事件處理程序，該事件顯示了個性化問候。向 MainPage.xaml.h 和MainPage.xaml.cpp 文件添加事件處理程序代碼。

在移動設(shè)備仿真器上啟動該應(yīng)用

你的應(yīng)用可在任何 Windows 10 設(shè)備上運(yùn)行，讓我們看一下它在 Windows Phone 上的情況如何。

除了在桌面設(shè)備上執(zhí)行調(diào)試的選項(xiàng)，Visual Studio 還提供用于在連接到計(jì)算機(jī)的物理移動設(shè)備上或移動設(shè)備仿真器上部署和調(diào)試應(yīng)用的選項(xiàng)。你可以為帶有不同內(nèi)存和顯示配置的設(shè)備在仿真器中進(jìn)行選擇。

設(shè)備

仿真器 10.0.0.0 WVGA 4 英寸 512MB

采用其他配置的各種仿真器

最好在帶有小型屏幕和有限內(nèi)存的設(shè)備上測試應(yīng)用，因此請使用“仿真器 10.0.0.0WVGA 4 英寸 512MB”選項(xiàng)。

提示 有關(guān)使用手機(jī)仿真器的詳細(xì)信息，請參閱在仿真器中運(yùn)行 Windows Phone 應(yīng)用。

若要在物理設(shè)備上調(diào)試你的應(yīng)用，你必須具有已注冊用于開發(fā)的設(shè)備。有關(guān)詳細(xì)信息，請參閱注冊你的 Windows Phone。

在移動設(shè)備仿真器上開始調(diào)試

1. 在“標(biāo)準(zhǔn)”工具欄上的目標(biāo)設(shè)備菜單 (下圖) 中，選取“仿真器 10.0.0.0

2. 單擊工具欄中的“開始調(diào)試”按鈕 (圖) ；或在“調(diào)試”菜單中，單擊“開始調(diào)試”；

或在移動設(shè)備仿真器中，應(yīng)用的外觀如下所示。

移動應(yīng)用仿真器中的通用應(yīng)用界面

你可能還會注意到，你可以在 TextBox 中鍵入內(nèi)容，但此時單擊 Button 不會起任何作用。在接下來的步驟中，你將為按鈕的 Click 事件創(chuàng)建事件處理程序，以顯示個性化的問候。將事件處理程序代碼添加到 MainPage.xaml.cs 文件。Visual Studio 將啟動選定的仿真器，然后部署和啟動你的應(yīng)用。你會首先注意到，在本地計(jì)算機(jī)上能正常顯示的 120 像素左邊距，在屏幕較小的移動設(shè)備上會將內(nèi)容推到屏幕之外。在本教程的后面部分中，你將了解如何使 UI 適應(yīng)不同的屏幕大小，以使應(yīng)用始終保持外觀良好。

步驟 2：創(chuàng)建事件處理程序

1. 在 MainPage.xaml 的 XAML 或設(shè)計(jì)視圖中，在之前添加的 StackPanel 中選擇 "Say Hello"Button。

2. 按 Alt+Enter 打開“屬性窗口”，然后選擇事件按鈕 (圖)。

3. 查找 Click 事件。在其文本框中，鍵入處理 Click 事件的函數(shù)名稱。對于本示例，請鍵入 "Button_Click"。

4. 按 Enter。事件處理程序方法在 MainPage.xaml.

cpp 中創(chuàng)建并已打開，因此你可以添加在事件出現(xiàn)時執(zhí)行的代碼。

同時，在 MainPage.xaml 中，更新 Button 的 XAML 以聲明 Click 事件處理程序，如下所示：

<Button Content=”Say &quot;Hello&quot;” Click=”Button_Click”/>

5. 在 MainPage.xaml.cpp 中，將以下代碼添加到你剛剛創(chuàng)建的 Button_Click 事件處理程序。此代碼將從nameInputTextBox 控件檢索用戶名并使用該用戶名創(chuàng)圖中應(yīng)用控件屬性窗口建問候greetingOutput TextBlock 將顯示相關(guān)結(jié)果。

6. 按 Enter。事件處理程序方法在 MainPage.xaml.cpp 中創(chuàng)建并已打開，因此你可以添加在事件出現(xiàn)時執(zhí)行的代碼。

同時，在 MainPage.xaml 中，更新 Button 的 XAML 以聲明 Click 事件處理程序，如下所示：<Button Content=”Say &quot;Hello&quot;” Click=”Button_Click”/>

7.在 MainPage.xaml.cpp中，將以下代碼添加到你剛剛創(chuàng)建的 Button_Click 事件處理程序。此代碼將從 nameInputTextBox控件檢索用戶名并使用該用戶名創(chuàng)建問候。

greetingOutput TextBlock將顯示相關(guān)結(jié)果。

void HelloWorld::MainPage::Button_Clicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e){

greetingOutput->Text = “Hello, “ + nameInput->Text + “!”;}

8. 將項(xiàng)目設(shè)置為啟動，然后按 F5 生成并運(yùn)行應(yīng)用。當(dāng)你在文本框中鍵入姓名并單擊閃電按鈕后，應(yīng)用會顯示個性化問候（圖）。

通用應(yīng)用中的“問候”

步驟 3：設(shè)置起始頁的樣式

選擇主題

輕松自定義應(yīng)用的外觀。默認(rèn)情況下，應(yīng)用使用深色樣式的資源。系統(tǒng)資源還包含淺色主題。

我們來嘗試一下并看看它的外觀。

切換到淺色主題的步驟

1. 在“已共享”項(xiàng)目中，打開 App.xaml。

2. 在開始標(biāo)記 Application 中，添加 RequestedTheme 屬性，并將其值設(shè)置為 Light：

RequestedTheme="Light"

以下是添加了淺色主題的完整 Application 標(biāo)記：

<Application

x:Class=”HelloWorld.App”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

xmlns:local=”using:HelloWorld”

RequestedTheme=”Light”>

1.使其中一個平臺項(xiàng)目成為啟動項(xiàng)目，然后按 F5 以構(gòu)建并運(yùn)行它。請注意它使用淺色主題。

現(xiàn)在將其他平臺項(xiàng)目設(shè)置為啟動項(xiàng)目，按 F5，并且請注意它也使用淺色主題。這是因?yàn)?App.

xaml 已由兩個項(xiàng)目共享。

通用應(yīng)用的淺色主題

你應(yīng)使用哪個主題？你需要的任何一個。以下我們的觀點(diǎn)：對于主要顯示圖像或視頻的應(yīng)用，我們建議深色主題；對于包含大量文本的應(yīng)用，我們建議淺色主題（上圖）。如果你使用的是自定義配色方案，則請使用最適合應(yīng)用外觀和感覺的主題。

注意 在應(yīng)用啟動時應(yīng)用主題，并且無法在應(yīng)用運(yùn)行時更改主題。

使用系統(tǒng)樣式

此時，在 Windows 應(yīng)用中，所有文本都非常小，因此很難閱讀。讓我們通過應(yīng)用系統(tǒng)樣式來解決該問題。

更改元素樣式的步驟

1. 在 Windows 項(xiàng)目中，打開 MainPage.xaml。

2. 在 XAML 或設(shè)計(jì)視圖中，選擇以前添加的" 你叫什么名字？"TextBlock。

3. 在“屬性” 窗口（圖）中，選擇右上角的“屬性”按鈕 ()。

4. 展開“文本”組，并將字體大小設(shè)置為 18 px。

5. 展開“其他”組并找到“樣式”屬性。

6. 單擊屬性標(biāo)記（“樣式”屬性右側(cè)的綠色框），然后在菜單上，依次選擇“系統(tǒng)資源”>“BaseTextBlockStyle”。

“BasicTextStyle”為在 <root>\Program Files\Windows Kits\Include\winrt\xaml\design\generic.xaml 中的ResourceDictionary 中定義的資源。

屬性窗口

在 XAML 設(shè)計(jì)圖面中，文本外觀會發(fā)生更改。在 XAML 編輯器中，TextBlock 的 XAML會進(jìn)行更新：

<TextBlock Text=”What’s your name?” Style=”{StaticResource BasicTextStyle}”/>

7. 重 復(fù) 該 過 程 可 設(shè) 置 字 體 大 小 并 將“BaseTextBlockStyle”分 配 到greetingOutputTextBlock 元素。

提示 盡管此 TextBlock 中沒有文本，但當(dāng)你將指針移動到 XAML 設(shè)計(jì)圖面上時，藍(lán)色輪廓會顯示它的位置，以便你可以選擇它。

現(xiàn)在的 XAML 如下所示：

<StackPanel Margin=”120,30,0,0”>

<TextBlock Style=”{ThemeResource BaseTextBlockStyle}” FontSize=”16” Text=”What’s your name?”/>

<StackPanel Orientation=”Horizontal” Margin=”0,20,0,20”>

<TextBox x:Name=”nameInput” Width=”300” HorizontalAlignment=”Left”/>

<Button Content=”Say &quot;Hello&quot;” Click=”Button_Click”/>

</StackPanel>

<TextBlock Style=”{ThemeResource BaseTextBlockStyle}” FontSize=”16” x:Name=”greetingOutput”/>

</StackPanel>

8. 按 F5 構(gòu)建并運(yùn)行應(yīng)用。現(xiàn)在它的外觀如下所示（圖）：

淺色主題中通用應(yīng)用的問候

步驟 4：使 UI 適應(yīng)不同的窗口大小

現(xiàn)在我們將使 UI 適應(yīng)不同的屏幕大小，以使其在移動設(shè)備上外觀良好。若要執(zhí)行此操作，添加 VisualStateManager 并設(shè)置應(yīng)用于不同視覺狀態(tài)的屬性。

1. 在 XAML 編輯器中，在根 Grid 元素的開始標(biāo)記后添加此 XAML 塊。

<VisualStateManager.VisualStateGroups>

<VisualStateGroup>

<VisualState x:Name=”wideState”>

<VisualState.StateTriggers>

<AdaptiveTrigger MinWindowWidth=”641” />

</VisualState.StateTriggers>

</VisualState>

<VisualState x:Name=”narrowState”>

<VisualState.StateTriggers>

<AdaptiveTrigger MinWindowWidth=”0” />

</VisualState.StateTriggers>

<VisualState.Setters>

<Setter Target=”contentPanel.Margin” Value=”20,30,0,0”/>

<Setter Target=”inputPanel.Orientation” Value=”Vertical”/>

<Setter Target=”inputButton.Margin” Value=”0,4,0,0”/>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

2. 在本地計(jì)算機(jī)上調(diào)試應(yīng)用。請注意，UI 外觀與以前相同，除非窗口變得窄于 641 與設(shè)備無關(guān)的像素 (DIP)。

3. 在移動設(shè)備仿真器上調(diào)試應(yīng)用。請注意 UI 使用你在 narrowState 中定義的屬性并正確顯示在小屏幕上。

如 果 你 在 以 前 版 本 的 XAML 中 使 用 過VisualStateManager，你可能會注意到 XAML 在此處使用簡化的語法。

名 為 wideState 的 VisualState 具 有 一 個AdaptiveTrigger，并且其 MinWindowWidth 屬性設(shè)置為641。這意味著僅在窗口寬度不小于 641 DIP 的最小值時應(yīng)用該狀態(tài)。你沒有為此狀態(tài)定義任何 Setter 對象，因此它會將你在 XAML 中定義的布局屬性用于頁面內(nèi)容。

名為 narrowState 的第二個 VisualState 具有一個AdaptiveTrigger，其 MinWindowWidth 屬性設(shè)置為 0。當(dāng)窗口寬度大于 0 但小于 641 DIP 時，應(yīng)用此狀態(tài)。（在 641DIP 時，應(yīng)用 wideState。）在此狀態(tài)下，定義一些Setter 對象以更改 UI 中控件的布局屬性：

將 contentPanel 元素的左邊距從 120 降低為 20。

將inputPanel 元素的Orientation 從Horizontal 更改為 Vertical。

圖4-13 移動應(yīng)用仿真器中的淺

色主題通用應(yīng)用界面

將 4 DIP 的上邊距添加到 inputButton 元素。

這樣，你的第一個通用應(yīng)用就寫成了。