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

---

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

---

第 2 部分：使用 XAML 編輯器添加 GridView 控件

在第 1 部分中介紹了使用 XAML 設計器和 Visual Studio 提供的其他工具，本文將繼續介紹使用 XAML 編輯器直接處理 XAML 標記。

首先將根布局 Grid 替換為 RelativePanel。 利用 RelativePanel，可更加輕松地相對于面板或其他部分 UI 重新排列 UI 塊，然后添加 GridView 控件以顯示你的數據。

1. 在 XAML 編輯器中，將根 Grid 更改為 RelativePanel。之前

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <TextBlock x:Name="TitleTextBlock"
                    Text="Collection"
                    Margin="24,0,0,24"
                    Style="{StaticResource TitleTextBlockStyle}"/>
   </Grid>

   之后

   <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <TextBlock x:Name="TitleTextBlock"
                  Text="Collection"
                  Margin="24,0,0,24"
                  Style="{StaticResource TitleTextBlockStyle}"/>
   </RelativePanel>

2. 在 TextBlock 元素下面，添加名為ImageGridView的 GridView 控件。 設置 RelativePanel 附加屬性以將此控件放在標題文本下面，并使其橫跨整個屏幕寬度。添加以下 XAML

   <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <TextBlock x:Name="TitleTextBlock"
                  Text="Collection"
                  Margin="24,0,0,24"
                  Style="{StaticResource TitleTextBlockStyle}"/>
   </RelativePanel>

   添加到以下 TextBlock 之后

   <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <TextBlock x:Name="TitleTextBlock"
                  Text="Collection"
                  Margin="24,0,0,24"
                  Style="{StaticResource TitleTextBlockStyle}"/>
   
       <!-- Add the GridView here. -->
   
   </RelativePanel>

3. 為了讓 GridView 顯示內容，需要為其提供要顯示的數據集。 打開 MainPage.xaml.cs 并查找 GetItemsAsync 方法。 此方法會填充一個稱為 Images（這是我們已添加到 MainPage 的屬性）的集合。在 GetItemsAsync 中的 foreach 循環后面，添加以下代碼行。

   ImageGridView.ItemsSource = Images;

   這會將 GridView 的 ItemsSource 屬性設置為應用的 Images 集合，并為 GridView 提供要顯示的內容。

這是運行應用并確保一切正常工作的好地方。 它應該如下所示。

第 3 部分：添加 DataTemplate 以顯示你的數據

這部分將創建 DataTemplate，以告訴 GridView 如何顯示你的數據，目前將僅添加占位符以幫助創建所需的布局。 在 XAML 數據綁定教程中，你將用 ImageFileInfo 類中的實際數據替換這些占位符。

將數據模板添加到網格視圖

1. 打開 MainPage.xaml。
2. 若要顯示分級，你可以使用 Telerik 的 UI for UWP NuGet 程序包中的 RadRating 控件。 添加 XAML 命名空間引用以指定 Telerik 控件的命名空間。 將此項放在左 Page 標記中，緊靠在其他xmlns條目后面。添加以下 XAML

   xmlns:telerikInput="using:Telerik.UI.Xaml.Controls.Input"

   添加到以下最后一個xmlns條目后面

   <Page x:Name="page"
     x:Class="PhotoLab.MainPage"
     xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:PhotoLab"
     xmlns:d="//schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:telerikInput="using:Telerik.UI.Xaml.Controls.Input"
     mc:Ignorable="d"
     NavigationCacheMode="Enabled">

3. 在Document Outline中，右鍵單擊 ImageGridView，在上下文菜單中，選擇Edit Additional Templates > Edit Generated Items (ItemTemplate) > Create Empty...。創建資源對話框將會打開。
4. 在此對話框中，將Name值更改為 ImageGridView_DefaultItemTemplate，然后單擊確定。在單擊確定時，會出現以下幾種情況：
   • DataTemplate 將添加到 MainPage.xaml 的 Page.Resources 部分。

     <Page.Resources>
         <DataTemplate x:Key="ImageGridView_DefaultItemTemplate">
             <Grid/>
         </DataTemplate>
     </Page.Resources>

   • Document Outline范圍會被設置為 DataTemplate。創建完數據模板后，你可以單擊Document Outline左上角中的向上箭頭以返回到頁面范圍。
   • GridView 的 ItemTemplate 屬性被設置為 DataTemplate 資源。

     <GridView x:Name="ImageGridView"
                 Margin="0,0,0,8"
                 RelativePanel.AlignLeftWithPanel="True"
                 RelativePanel.AlignRightWithPanel="True"
                 RelativePanel.Below="TitleTextBlock"
                 ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"/>

5. 在 ImageGridView_DefaultItemTemplate 資源中，為根 Grid 提供一個值為 300 的高度和寬度以及一個值為 8 的邊距。然后添加兩行，并將第二行的高度設置為 Auto。之前

   <Grid/>

   之后

   <Grid Height="300"
         Width="300"
         Margin="8">
       <Grid.RowDefinitions>
           <RowDefinition />
           <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
   </Grid>

6. 將控件添加到網格。
   • 在第一個網格行中添加 Image 控件。 此處將顯示圖像，但是目前將使用應用的應用商店徽標作為占位符。
   • 添加 TextBlock 控件以顯示圖像的名稱、文件類型和尺寸。 為此，你可以使用 StackPanel 控件排列文本塊。
   • 將 RadRating 控件添加到外部（垂直）StackPanel。 將其放在內部（水平）StackPanel 的后面。
   最終模板

   <Grid Height="300"
         Width="300"
         Margin="8">
       <Grid.RowDefinitions>
           <RowDefinition />
           <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
   
       <Image x:Name="ItemImage"
              Source="Assets/StoreLogo.png"
              Stretch="Uniform" />
   
       <StackPanel Orientation="Vertical"
                   Grid.Row="1">
           <TextBlock Text="ImageTitle"
                      HorizontalAlignment="Center"
                      Style="{StaticResource SubtitleTextBlockStyle}" />
           <StackPanel Orientation="Horizontal"
                       HorizontalAlignment="Center">
               <TextBlock Text="ImageFileType"
                          HorizontalAlignment="Center"
                          Style="{StaticResource CaptionTextBlockStyle}" />
               <TextBlock Text="ImageDimensions"
                          HorizontalAlignment="Center"
                          Style="{StaticResource CaptionTextBlockStyle}"
                          Margin="8,0,0,0" />
           </StackPanel>
   
           <telerikInput:RadRating Value="3"
                                   IsReadOnly="True">
               <telerikInput:RadRating.FilledIconContentTemplate>
                   <DataTemplate>
                       <SymbolIcon Symbol="SolidStar"
                                   Foreground="White" />
                   </DataTemplate>
               </telerikInput:RadRating.FilledIconContentTemplate>
               <telerikInput:RadRating.EmptyIconContentTemplate>
                   <DataTemplate>
                       <SymbolIcon Symbol="OutlineStar"
                                   Foreground="White" />
                   </DataTemplate>
               </telerikInput:RadRating.EmptyIconContentTemplate>
           </telerikInput:RadRating>
   
       </StackPanel>
   </Grid>

現在，運行應用以查看 GridView 以及你剛剛創建的項模板。 但是可能不會看到分級控件，因為它的白星在白色背景中。

---

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

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