Visual Studio是一款完備的工具和服務，可幫助您為Microsoft平臺和其他平臺建立各種各樣的應用程式。在本系列教程中將介紹如何為影象編輯建立基本的使用者介面，有任何建議或提示請在下方評論區留言，我們會及時處理。
第 2 部分：使用 XAML 編輯器新增 GridView 控制元件
在第 1 部分中介紹了使用 XAML 設計器和 Visual Studio 提供的其他工具，本文將繼續介紹使用 XAML 編輯器直接處理 XAML 標記。
首先將根佈局 Grid 替換為 RelativePanel。 利用 RelativePanel，可更加輕鬆地相對於皮膚或其他部分 UI 重新排列 UI 塊，然後新增 GridView 控制元件以顯示你的資料。
- 在 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>複製程式碼 - 在 TextBlock 元素下面，新增名為ImageGridView的 GridView 控制元件。 設定 RelativePanel 附加屬性以將此控制元件放在標題文字下面，並使其橫跨整個螢幕寬度。新增以下 XAML
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBlock x:Name="TitleTextBlock" Text="Collection" Margin="24,0,0,24" Style="{StaticResource TitleTextBlockStyle}"/> </RelativePanel>複製程式碼<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <TextBlock x:Name="TitleTextBlock" Text="Collection" Margin="24,0,0,24" Style="{StaticResource TitleTextBlockStyle}"/> <!-- Add the GridView here. --> </RelativePanel>複製程式碼 - 為了讓 GridView 顯示內容，需要為其提供要顯示的資料集。 開啟 MainPage.xaml.cs 並查詢 GetItemsAsync 方法。 此方法會填充一個稱為 Images（這是我們已新增到 MainPage 的屬性）的集合。在 GetItemsAsync 中的 foreach 迴圈後面，新增以下程式碼行。
這會將 GridView 的 ItemsSource 屬性設定為應用的 Images 集合，併為 GridView 提供要顯示的內容。ImageGridView.ItemsSource = Images;複製程式碼
這是執行應用並確保一切正常工作的好地方。 它應該如下所示。
第 3 部分：新增 DataTemplate 以顯示你的資料
這部分將建立 DataTemplate，以告訴 GridView 如何顯示你的資料，目前將僅新增佔位符以幫助建立所需的佈局。 在 XAML 資料繫結教程中，你將用 ImageFileInfo 類中的實際資料替換這些佔位符。
將資料模板新增到網格檢視
- 開啟 MainPage.xaml。
- 若要顯示分級，你可以使用 Telerik 的 UI for UWP NuGet 程式包中的 RadRating 控制元件。 新增 XAML 名稱空間引用以指定 Telerik 控制元件的名稱空間。 將此項放在左 Page 標記中，緊靠在其他xmlns條目後面。新增以下 XAML
xmlns:telerikInput="using:Telerik.UI.Xaml.Controls.Input"複製程式碼<Page x:Name="page" x:Class="PhotoLab.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:PhotoLab" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerikInput="using:Telerik.UI.Xaml.Controls.Input" mc:Ignorable="d" NavigationCacheMode="Enabled">複製程式碼 - 在Document Outline中，右鍵單擊 ImageGridView，在上下文選單中，選擇Edit Additional Templates > Edit Generated Items (ItemTemplate) > Create Empty...。建立資源對話方塊將會開啟。
- 在此對話方塊中，將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}"/>複製程式碼
- DataTemplate 將新增到 MainPage.xaml 的 Page.Resources 部分。
- 在 ImageGridView_DefaultItemTemplate 資源中，為根 Grid 提供一個值為 300 的高度和寬度以及一個值為 8 的邊距。然後新增兩行，並將第二行的高度設定為 Auto。之前
之後<Grid/>複製程式碼<Grid Height="300" Width="300" Margin="8"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> </Grid>複製程式碼 - 將控制元件新增到網格。
- 在第一個網格行中新增 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 以及你剛剛建立的項模板。 但是可能不會看到分級控制元件，因為它的白星在白色背景中。
