Visual Studio系列教程：使用XAML工具建立使用者介面（一）

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

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 的第一部分新增到你的應用中，可以執行該應用以檢視其外觀。