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 的第一部分添加到你的應用中，能夠運行該應用以查看其外觀。