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

時間 2019-11-19

標籤 visual studio 系列教程使用 xaml 工具建立用戶界面欄目 Visual Studio 简体版

原文原文鏈接

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

第 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>

添加到如下 TextBlock 以後

<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 循環後面，添加如下代碼行。
```
ImageGridView.ItemsSource = Images;
```
這會將 GridView 的 ItemsSource 屬性設置爲應用的 Images 集合，併爲 GridView 提供要顯示的內容。

這是運行應用並確保一切正常工做的好地方。它應該以下所示。佈局

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

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

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

打開 MainPage.xaml。

若要顯示分級，你可使用 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="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}"/>
```
在 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 以及你剛剛建立的項模板。可是可能不會看到分級控件，由於它的白星在白色背景中。orm