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

---

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

---

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

PhotoLab示例下載>>

第 1 部分：使用 XAML 設計器添加 TextBlock

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

下面是標記了工具的 Visual Studio UI。

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

使用 XAML 設計器添加控件：

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

   <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 現在如下所示。

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

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

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

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

現在已將 UI 的第一部分添加到你的應用中，可以運行該應用以查看其外觀。

---

更多Visual Studio精彩教程敬請關注~

想要購買Visual Studio正版授權，或者獲取更多該產品相關信息的朋友可以點擊" "~