UWP app HelloWorld 的建立

標籤：

步驟 1：在 Visual Studio 中建立新項目

• 啟動 Visual Studio 2015 RC。將出現 Visual Studio 2015 RC 起始頁。 （從現在開始，我們將 Visual Studio 2015 RC 簡稱為 Visual Studio 。）
• 依次選擇“檔案”>“建立”>“項目”。會出現“建立項目”對話方塊。可以在對話方塊的左側邊窗格中選擇要顯示模板的類型。
• 在左側邊窗格中，展開“已安裝>模板> Visual C# > Windows”，然後選取“Windows 通用”模板組。對話方塊的中心窗格會顯示一系列用於 Universal Windows Platform (UWP) App 的項目模板。
• 在中心窗格中，選擇“空白應用（Windows 通用）”模板。“空白應用程式”模板會建立一個最基本的 UWP App，該應用可以編譯和運行，但不包含任何使用者介面控制項或資料。本教程將指導你向該應用添加控制項。
• 在“名稱”文字框中，鍵入“HelloWorld”""。
• 單擊“確定”以建立項目。Visual Studio 會建立項目並在“方案總管”中顯示該項目。
  

儘管“空白應用”是最基本的模板，但它仍然包含很多檔案：

• 資訊清單檔 (Package.appxmanifest)，介紹應用（其名稱、描述、磁貼、起始頁等等）並列出應用程式套件含的檔案。
• 用於在“開始”菜單中顯示的一組徽標映像（Assets\Logo.scale-100.png、Assets\WideLogo.scale-100.png 和 Assets\SmallLogo.scale-100.png）。
• 表示應用位於 Windows 市集的映像 (Assets\StoreLogo.scale-100.png)。
• 用於在應用啟動時顯示的啟動顯示畫面 (Assets\SplashScreen.scale-100.png)。
• 應用的 XAML 和代碼檔案（App.xaml 和 App.xaml.cs）。
• 起始頁 (MainPage.xaml) 和附帶的代碼檔案 (MainPage.xaml.cs)，這些檔案在應用啟動時運行。
  

這些檔案是使用 C# 的所有 UWP App 必不可少的檔案。在 Visual Studio 中建立的每一個項目都包含這些檔案。

 第 2 步：修改起始頁檔案中包含哪些內容？

若要查看和編輯項目中的檔案，請雙擊“方案總管”中的檔案。預設情況下，你可以像展開檔案夾一樣展開 XAML 檔案以查看其相關聯的代碼檔案。 XAML 檔案在分割檢視中開啟，可同時顯示設計介面和 XAML 編輯器。在本教程中，你可以只使用少量以前列出的檔案：App.xaml、MainPage.xaml 和 MainPage.xaml.cs。

App.xaml 和 App.xaml.cs

App.xaml 是你聲明應用中所使用的資源的位置。App.xaml.cs 是 App.xaml 的程式碼後置檔案。程式碼後置是與 XAML 頁的部分類結合的代碼。XAML 與程式碼後置一同組成完整的類。App.xaml.cs 為應用的進入點。與所有程式碼後置頁面一樣，它包含一個調用 InitializeComponent 方法的建構函式。你不必編寫 InitializeComponent 方法。該方法由 Visual Studio 產生，其主要作用是初始化在 XAML 檔案中聲明的元素。App.xaml.cs 還包含一些處理應用的啟用和掛起的方法。 

MainPage.xaml

在 MainPage.xaml 中，為應用定義 UI。你可以直接使用 XAML 標記添加元素，也可以使用 Visual Studio 提供的設計工具。 MainPage.xaml.cs 是 MainPage.xaml 的程式碼後置頁面。你可以在其中添加應用邏輯和事件處理常式。這兩個檔案一起定義稱為 MainPage 的新類，該類繼承自 HelloWorld 命名空間中的 Page。MainPage.xaml

[url=]XAML[/url]

<Page    x:Class="HelloWorld.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:HelloWorld"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    </Grid></Page>

MainPage.xaml.cs

[url=]C#[/url]


using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace HelloWorld{    /// <summary>    /// An empty page that can be used on its own or navigated to within a Frame.    /// </summary>    public sealed partial class MainPage : Page    {        public MainPage()        {            this.InitializeComponent();        }    }}

修改起始頁

現在，讓我們來嚮應用添加一些內容。                            修改起始頁的步驟

• 在“方案總管”中雙擊 MainPage.xaml 將其開啟。
• 在 XAML 編輯器中，為 UI 添加控制項。在根 Grid 中，添加此 XAML。它包含一個標題為 TextBlock 的StackPanel、一個詢問使用者名稱稱的 TextBlock、一個用於接受使用者名稱稱的 TextBox 元素、一個Button，以及另一個用於顯示問候的 TextBlock。其中一些控制項有名稱，因此稍後你可以在代碼中引用它們。

  [url=]XAML[/url]
  
  
          <StackPanel x:Name="contentPanel" Margin="120,30,0,0">            <TextBlock Text="Hello, world!" Margin="0,0,0,40"/>            <TextBlock Text="What‘s your name?"/>            <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">                <TextBox x:Name="nameInput" Width="270" HorizontalAlignment="Left"/>                <Button x:Name="inputButton" Content="Say "Hello""/>            </StackPanel>            <TextBlock x:Name="greetingOutput"/>        </StackPanel>

  
  
  
  在 XAML 編輯器中添加的控制項將顯示在設計檢視中。

 

步驟 3：啟動應用

至此，你已建立了一個非常簡單的應用。現在是構建、部署和啟動應用並查看其外觀的好時機。你可以在本機電腦上、模擬器或模擬器中或者在遠程裝置上調試應用。在電腦裝置上啟動應用
預設情況下，應用在本機電腦上運行。目標裝置菜單提供用於在電腦裝置系列中的裝置上調試應用的多個選項。

• 模擬器
• 本機電腦
• 遠端電腦

 

 

UWP app HelloWorld 的建立