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

---

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

---

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

PhotoLab示例下載>>

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

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

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

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

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

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

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

4. 在Properties面板中，將 TextBlock 的Name值從 textBlock 更改為 TitleTextBlock（請確保 TextBlock 仍然是活動對象）。
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。
   
   邊距可在頁面上對元素進行最基本的定位，它們可用于微調(diào)你的布局，但是使用大邊距值（如 Visual Studio 添加的大邊距值）會使 UI 難以適應(yīng)各種屏幕大小，因此應(yīng)該避免使用大邊距值。
8. 在Document Outline面板中，右鍵單擊TitleTextBlock，然后依次選擇Edit Style > Apply Resource > TitleTextBlockStyle。 這會對你的標(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īng)用以查看其外觀。

---

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

想要購買Visual Studio正版授權(quán)，或者獲取更多該產(chǎn)品相關(guān)信息的朋友可以點擊" 咨詢在線客服 "~