Visual Studio系列教程：使用XAML工具創(chuàng)建用戶界面（一）

Visual Studio是一款完備的工具和服務(wù)，可幫助您為Microsoft平臺(tái)和其他平臺(tái)創(chuàng)建各種各樣的應(yīng)用程序。在本系列教程中將介紹如何為圖像編輯創(chuàng)建基本的用戶界面，有任何建議或提示請(qǐng)?jiān)谙路皆u(píng)論區(qū)留言，我們會(huì)及時(shí)處理。

本教程將從一個(gè)簡(jiǎn)化版的PhotoLab示例開(kāi)始，點(diǎn)擊下方鏈接下載，得到壓縮包后，訪問(wèn)Windows-appsample-photo-lab-master\xaml-basics-starting-points\user-interface目錄，進(jìn)行后續(xù)操作。

PhotoLab示例下載>>

第 1 部分：使用 XAML 設(shè)計(jì)器添加 TextBlock

為了使創(chuàng)建XAML UI更輕松，Visual Studio提供了一些工具。利用XAML設(shè)計(jì)器，你可以將控件拖到設(shè)計(jì)圖面上并查看它們的外觀，然后再運(yùn)行應(yīng)用。利用Properties面板，你可以查看和設(shè)置設(shè)計(jì)器中處于活動(dòng)狀態(tài)的所有控件屬性。文檔大綱顯示了UI的XAML可視化樹(shù)的父子結(jié)構(gòu)。利用XAML編輯器，你可以直接輸入和修改XAML標(biāo)記。

下面是標(biāo)記了工具的 Visual Studio UI。

利用這些工具中的每個(gè)工具，都可以更加輕松地創(chuàng)建你的 UI，因此我們將在本教程中使用所有這些工具。 首先，你將使用 XAML 設(shè)計(jì)器添加控件。

使用 XAML 設(shè)計(jì)器添加控件：

1. 在Solution Explorer中雙擊MainPage.xaml打開(kāi)它，將顯示未添加任何 UI 元素的應(yīng)用主頁(yè)面。
2. 在執(zhí)行進(jìn)一步操作之前，你需要對(duì) Visual Studio 進(jìn)行一些調(diào)整。
   • 請(qǐng)確保將解決方案平臺(tái)設(shè)置為 x86 或 x64，而不是 ARM。
   • 將主頁(yè)面 XAML 設(shè)計(jì)器設(shè)置為顯示 13.3 英寸的桌面預(yù)覽。你應(yīng)該會(huì)在窗口頂部附近看到兩個(gè)設(shè)置，如下所示。
     
   完成后可以運(yùn)行該應(yīng)用，但不會(huì)看到太多內(nèi)容。接下來(lái)將添加一些 UI 元素以使內(nèi)容變得更豐富。
3. 在工具箱中，展開(kāi)常見(jiàn) XAML 控件并查找 TextBlock 控件。將 TextBlock 拖到頁(yè)面左上角附近的設(shè)計(jì)圖面上。TextBlock 周圍會(huì)以藍(lán)色高亮顯示以指明它現(xiàn)在是活動(dòng)對(duì)象，請(qǐng)注意設(shè)計(jì)器添加的邊距和其他設(shè)置。

   <TextBlock x:Name="textBlock"
              HorizontalAlignment="Left"
              Margin="351,44,0,0"
              TextWrapping="Wrap"
              Text="TextBlock"
              VerticalAlignment="Top"/>

4. 在Properties面板中，將 TextBlock 的Name值從 textBlock 更改為 TitleTextBlock（請(qǐng)確保 TextBlock 仍然是活動(dòng)對(duì)象）。
5. 在Common下面，將Text值更改為集合。
   
   在 XAML 編輯器中，你的 XAML 現(xiàn)在如下所示。

   <TextBlock x:Name="TitleTextBlock"
              HorizontalAlignment="Left"
              Margin="351,44,0,0"
              TextWrapping="Wrap"
              Text="Collection"
              VerticalAlignment="Top"/>

6. 若要定位 TextBlock，應(yīng)首先刪除 Visual Studio 添加的屬性值。 在Document Outline中，右鍵單擊 TitleTextBlock，然后選擇Layout > Reset ALL。
   
7. 在Properties面板內(nèi)的搜索框中輸入 margin 可以輕松地查找 Margin 屬性。并將左邊距和下邊距設(shè)置為 24。
   
   邊距可在頁(yè)面上對(duì)元素進(jìn)行最基本的定位，它們可用于微調(diào)你的布局，但是使用大邊距值（如 Visual Studio 添加的大邊距值）會(huì)使 UI 難以適應(yīng)各種屏幕大小，因此應(yīng)該避免使用大邊距值。
8. 在Document Outline面板中，右鍵單擊TitleTextBlock，然后依次選擇Edit Style > Apply Resource > TitleTextBlockStyle。 這會(huì)對(duì)你的標(biāo)題文本應(yīng)用系統(tǒng)定義的樣式。

   <TextBlock x:Name="TitleTextBlock"
              TextWrapping="Wrap"
              Text="Collection"
              Margin="24,0,0,24"
              Style="{StaticResource TitleTextBlockStyle}"/>

9. 在Properties面板內(nèi)的搜索框中輸入 textwrapping 可以查找 TextWrapping 屬性。

現(xiàn)在已將 UI 的第一部分添加到你的應(yīng)用中，可以運(yùn)行該應(yīng)用以查看其外觀。

更多Visual Studio精彩教程敬請(qǐng)關(guān)注~

想要購(gòu)買(mǎi)Visual Studio正版授權(quán)，或者獲取更多該產(chǎn)品相關(guān)信息的朋友可以點(diǎn)擊" "~