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

---

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

---

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

在第 1 部分中介紹了使用 XAML 設(shè)計(jì)器和 Visual Studio 提供的其他工具，本文將繼續(xù)介紹使用 XAML 編輯器直接處理 XAML 標(biāo)記。

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

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 控件。 設(shè)置 RelativePanel 附加屬性以將此控件放在標(biāo)題文本下面，并使其橫跨整個(gè)屏幕寬度。添加以下 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 顯示內(nèi)容，需要為其提供要顯示的數(shù)據(jù)集。 打開 MainPage.xaml.cs 并查找 GetItemsAsync 方法。 此方法會(huì)填充一個(gè)稱為 Images（這是我們已添加到 MainPage 的屬性）的集合。在 GetItemsAsync 中的 foreach 循環(huán)后面，添加以下代碼行。

   ImageGridView.ItemsSource = Images;

   這會(huì)將 GridView 的 ItemsSource 屬性設(shè)置為應(yīng)用的 Images 集合，并為 GridView 提供要顯示的內(nèi)容。

這是運(yùn)行應(yīng)用并確保一切正常工作的好地方。 它應(yīng)該如下所示。

第 3 部分：添加 DataTemplate 以顯示你的數(shù)據(jù)

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

將數(shù)據(jù)模板添加到網(wǎng)格視圖

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

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

   添加到以下最后一個(gè)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...。創(chuàng)建資源對(duì)話框?qū)?huì)打開。
4. 在此對(duì)話框中，將Name值更改為 ImageGridView_DefaultItemTemplate，然后單擊確定。在單擊確定時(shí)，會(huì)出現(xiàn)以下幾種情況：
   • DataTemplate 將添加到 MainPage.xaml 的 Page.Resources 部分。

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

   • Document Outline范圍會(huì)被設(shè)置為 DataTemplate。創(chuàng)建完數(shù)據(jù)模板后，你可以單擊Document Outline左上角中的向上箭頭以返回到頁面范圍。
   • GridView 的 ItemTemplate 屬性被設(shè)置為 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 提供一個(gè)值為 300 的高度和寬度以及一個(gè)值為 8 的邊距。然后添加兩行，并將第二行的高度設(shè)置為 Auto。之前

   <Grid/>

   之后

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

6. 將控件添加到網(wǎng)格。
   • 在第一個(gè)網(wǎng)格行中添加 Image 控件。 此處將顯示圖像，但是目前將使用應(yīng)用的應(yīng)用商店徽標(biāo)作為占位符。
   • 添加 TextBlock 控件以顯示圖像的名稱、文件類型和尺寸。 為此，你可以使用 StackPanel 控件排列文本塊。
   • 將 RadRating 控件添加到外部（垂直）StackPanel。 將其放在內(nèi)部（水平）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>

現(xiàn)在，運(yùn)行應(yīng)用以查看 GridView 以及你剛剛創(chuàng)建的項(xiàng)模板。 但是可能不會(huì)看到分級(jí)控件，因?yàn)樗陌仔窃诎咨尘爸小?/p>

---

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

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