創建你的第一個 Windows 10 通用應用。

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

與常規情況的差異

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

相同之處有：

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

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

你仍然可以創建使用 Windows 操作系統類型和你自己的自定義類型的應用。

你仍然可以使用 Visual Studio 調試器、探查器和其他開發工具。

你仍然可以通過使用 Visual C++ 編譯器創建用來編譯原生機器代碼的應用。使用 C++編寫的Windows 應用商店應用不能在托管的運行時環境中執行。

新增內容

Windows 應用商店應用和 Universal Windows App 的設計準則與桌面應用的設計準則有很大差別。設計的重點不再是窗口邊框、標簽和對話框等。內容才是最重要的。出色的Universal Windows App 從最開始的規劃階段就嚴格遵循這些準則。

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

盡管在 Windows 設備上 Win32 仍然可用于某些功能，但你將主要面向一個易于導航且面向對象的全新 API（即 Windows 運行時）進行編程。

使用 C++/CX 使用和創建 Windows 運行時對象。C++/CX 支持 C++ 異常處理、代理、事件和動態創建的對象的自動引用計數。使用 C++/CX 時，基礎 COM 和 Windows 體系結構的詳細信息從應用代碼中隱藏。有關詳細信息，請參閱 C++/CX 語言參考。

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

在 Windows 應用商店和 Windows Phone 應用商店中，你的應用通過一個驗證流程確定為安全之后，即可面向無數潛在客戶發布。

開始開發應用

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

我們將從基礎開始：

如何使用 Visual Studio 2015 創建 Universal Windows App。

如何了解創建的項目和文件。

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

首先，在 Visual Studio 中創建一個解決方案（圖）：

創建空白通用應用

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

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

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

4. 輸入項目名稱。我們將其命名為 HelloWorld。

5. 選擇“確定”按鈕。已創建項目文件。在繼續之前，讓我們看一下解決方案的內容（圖）。、

解決方案的內容

關于項目文件

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

讓我們先看一下項目文件。

App.xaml、App.xaml.h、App.xaml.cpp：代表應用程序對象，這是應用的入口點。App.

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

MainPage.xaml、MainPage.xaml.h、MainPage.xaml.cpp：包含應用中的默認“開始”

頁面的 XAML 標記和代碼隱藏。它沒有導航支持或內置控件。

pch.h, pch.cpp：預編譯標頭文件和在你的項目中包含它的文件。在 pch.h 中，你可以在解決方案中包含任何不經常更改且包含在其他文件中的標頭。

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

HelloWorld.Windows_TemporaryKey.pfx：在 Visual Studio 中，支持在此計算機上進行應用部署的密鑰。

代碼一覽

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

以下是你將在 C++/CX 中看到的最常見的非標準語法元素：

引用類

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

你也可以創建自己的引用類。

namespace HelloWorld

public ref class MainPage sealed

{

public:

MainPage();

...

};

}

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

ref new 和 ^ (hats)

你通過使用 ^（乘冪號）運算符聲明引用類的變量，并且使用引用新關鍵字實例化該對象。

然后你使用 -> 運算符訪問對象的實例方法，就像 C++ 指針一樣。使用 :: 運算符訪問靜態方法，就像 ISO C++ 中一樣。

在以下代碼中，我們使用完全限定的名稱來實例化對象，并使用 -> 運算符調用實例方法。

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 指令和自動關鍵字，因此相同的代碼看似如下：

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

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);}

}

代理

和在托管語言中一樣，代理是包裝帶有特定簽名的函數的引用類型。它們經常與事件和事件處理程序一同使用// 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);}

向應用添加內容

讓我們來向應用添加一些內容。

步驟 1：修改你的起始頁

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

通過向根 Grid 添加以下 XAML 來為 UI 創建控件，緊挨在其結束標記之前。它包含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>

我們將在導航、布局和視圖文章中談論有關 XAML 布局的詳細信息。

此時，你已創建了一個非常基本的 Windows 應用。若要查看 Windows 應用商店應用的外觀，請按 F5，在調試模式下構建、部署并運行該應用。

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

當初始屏幕消失時，將顯示你的應用。它顯示黑屏和標題"My Application"。

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

創建的通用應用頁面

它還做不了多少事，但是祝賀你，你已經構建了你的第一個 Windows 應用商店應用!

要停止調試并關閉應用，請返回到 Visual Studio 并按 Shift+F5。

有關詳細信息，請參閱從 Visual Studio 運行 Windows 應用商店應用。

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

在移動設備仿真器上啟動該應用

你的應用可在任何 Windows 10 設備上運行，讓我們看一下它在 Windows Phone 上的情況如何。

除了在桌面設備上執行調試的選項，Visual Studio 還提供用于在連接到計算機的物理移動設備上或移動設備仿真器上部署和調試應用的選項。你可以為帶有不同內存和顯示配置的設備在仿真器中進行選擇。

設備

仿真器 10.0.0.0 WVGA 4 英寸 512MB

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

最好在帶有小型屏幕和有限內存的設備上測試應用，因此請使用“仿真器 10.0.0.0WVGA 4 英寸 512MB”選項。

提示 有關使用手機仿真器的詳細信息，請參閱在仿真器中運行 Windows Phone 應用。

若要在物理設備上調試你的應用，你必須具有已注冊用于開發的設備。有關詳細信息，請參閱注冊你的 Windows Phone。

在移動設備仿真器上開始調試

1. 在“標準”工具欄上的目標設備菜單 (下圖) 中，選取“仿真器 10.0.0.0

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

或在移動設備仿真器中，應用的外觀如下所示。

移動應用仿真器中的通用應用界面

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

步驟 2：創建事件處理程序

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

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

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

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

cpp 中創建并已打開，因此你可以添加在事件出現時執行的代碼。

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

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

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

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

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

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

greetingOutput TextBlock將顯示相關結果。

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

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

8. 將項目設置為啟動，然后按 F5 生成并運行應用。當你在文本框中鍵入姓名并單擊閃電按鈕后，應用會顯示個性化問候（圖）。

通用應用中的“問候”

步驟 3：設置起始頁的樣式

選擇主題

輕松自定義應用的外觀。默認情況下，應用使用深色樣式的資源。系統資源還包含淺色主題。

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

切換到淺色主題的步驟

1. 在“已共享”項目中，打開 App.xaml。

2. 在開始標記 Application 中，添加 RequestedTheme 屬性，并將其值設置為 Light：

RequestedTheme="Light"

以下是添加了淺色主題的完整 Application 標記：

<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.使其中一個平臺項目成為啟動項目，然后按 F5 以構建并運行它。請注意它使用淺色主題。

現在將其他平臺項目設置為啟動項目，按 F5，并且請注意它也使用淺色主題。這是因為 App.

xaml 已由兩個項目共享。

通用應用的淺色主題

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

注意 在應用啟動時應用主題，并且無法在應用運行時更改主題。

使用系統樣式

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

更改元素樣式的步驟

1. 在 Windows 項目中，打開 MainPage.xaml。

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

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

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

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

6. 單擊屬性標記（“樣式”屬性右側的綠色框），然后在菜單上，依次選擇“系統資源”>“BaseTextBlockStyle”。

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

屬性窗口

在 XAML 設計圖面中，文本外觀會發生更改。在 XAML 編輯器中，TextBlock 的 XAML會進行更新：

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

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

提示 盡管此 TextBlock 中沒有文本，但當你將指針移動到 XAML 設計圖面上時，藍色輪廓會顯示它的位置，以便你可以選擇它。

現在的 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 構建并運行應用。現在它的外觀如下所示（圖）：

淺色主題中通用應用的問候

步驟 4：使 UI 適應不同的窗口大小

現在我們將使 UI 適應不同的屏幕大小，以使其在移動設備上外觀良好。若要執行此操作，添加 VisualStateManager 并設置應用于不同視覺狀態的屬性。

1. 在 XAML 編輯器中，在根 Grid 元素的開始標記后添加此 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. 在本地計算機上調試應用。請注意，UI 外觀與以前相同，除非窗口變得窄于 641 與設備無關的像素 (DIP)。

3. 在移動設備仿真器上調試應用。請注意 UI 使用你在 narrowState 中定義的屬性并正確顯示在小屏幕上。

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

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

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

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

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

圖4-13 移動應用仿真器中的淺

色主題通用應用界面

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

這樣，你的第一個通用應用就寫成了。