UWPToolkit - 什么是ItemTemplate，以及如何为我的AdaptiveGrid创建一个？

Question

我目前正在尝试使用工具箱中的AdaptiveGrid来显示一些图像，然后可以点击导致页面，我认为这是ItemTemplate是什么提供的例子中的图像。这是否与DataTemplate相同？我无法在网上找到关于这些或文档的任何信息。

<Controls:AdaptiveGridView Name="AdaptiveGridViewControl" 
            OneRowModeEnabled="False" 
            ItemHeight="200" 
            DesiredWidth="300" 
            SelectionMode="Single" 
            IsItemClickEnabled="True" 
            ItemTemplate="{StaticResource PhotosTemplate}"/> 

我试过下面，我没有错误，但没有显示出来，当我运行它除了本地命令栏：

MainPage.xaml中：

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:MobileAppProject" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:viewModels="using:ViewModels" 
    xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" 
    x:Class="MobileAppProject.MainPage" 
    mc:Ignorable="d"> 


    <Page.Resources> 
     <DataTemplate x:Key="AdaptTemplate"> 
      <Grid 
       Background="White" 
       BorderBrush="Black" 
       BorderThickness="1"> 
       <Image 
        Source="{Binding Image}" 
        Stretch="UniformToFill" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center"/> 
      </Grid> 
     </DataTemplate> 
    </Page.Resources> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <ScrollViewer VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto"> 
      <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12,10,12,12"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="Auto"/> 
       </Grid.RowDefinitions> 



       <StackPanel Margin="0,0,0,10"/> 

       <Grid Grid.Row="1"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition/> 
        </Grid.RowDefinitions> 
        <Controls:AdaptiveGridView Name="AdaptiveGridViewControl" 
            OneRowModeEnabled="False" 
            ItemHeight="200" 
            DesiredWidth="300" 
            SelectionMode="Single" 
            IsItemClickEnabled="True" 
            ItemTemplate="{StaticResource AdaptTemplate}"/> 
        <StackPanel VerticalAlignment="Bottom" Margin="0,24,0,0" Grid.Row="1" Background="{ThemeResource SystemControlBackgroundAccentBrush}"> 

         <CommandBar x:Name="cmdbar" 
            IsOpen="{Binding IsChecked, ElementName=isopentoggle, Mode=TwoWay}" 
            IsSticky="{Binding IsChecked, ElementName=isstickytoggle, Mode=TwoWay}" 
            ClosedDisplayMode="{Binding SelectedItem.Content, ElementName=combobox}"> 
          <CommandBar.SecondaryCommands> 
           <AppBarButton Label="Menu Item 1"/> 
           <AppBarButton Label="Menu Item 2"/> 
           <AppBarButton Label="Menu Item 3"/> 
           <AppBarButton Label="Menu Item 4"/> 
          </CommandBar.SecondaryCommands> 
          <AppBarButton Icon="Accept" Label="Accept"/> 
          <AppBarToggleButton Icon="Contact" Label="Contact"/> 
         </CommandBar> 
         <Image HorizontalAlignment="Left" Source="Assets/storeLogo-sdk.png" Stretch="None"/> 
        </StackPanel> 
       </Grid> 

       <!-- Status Block for providing messages to the user. Use the 
      NotifyUser() method to populate the message --> 
       <TextBlock x:Name="StatusBlock" Grid.Row="2" Margin="12, 10, 12, 10" Visibility="Collapsed"/> 
      </Grid> 
     </ScrollViewer> 

    </Grid> 
</Page> 

MainPage.xaml中的.cs：

private ObservableCollection<AdaptItem> picItems_; 

     private ObservableCollection<AdaptItem> PicItems 
     { 
      get 
      { 
       return picItems_; 
      } 
      set 
      { 
       picItems_ = value; 
      } 

     } 
     public MainPage() 
     { 
      this.InitializeComponent(); 
      picItems_ = AdaptItem.AdaptList(); 
      this.DataContext = PicItems; 
     } 

AdaptTemplate.cs用于填充AdaptGrid：

public class AdaptItem 
    { 
     public String Image 
     { 
      get; 
      set; 
     } 
    } 

    public static ObservableCollection<AdaptItem> AdaptList() 
    { 
     ObservableCollection<AdaptItem> pics = new ObservableCollection<AdaptItem>() 
     { 
      new AdaptItem 
      { 
       Image = "Assets/01.jpg" 
      }, 
      new AdaptItem 
      { 
       Image = "Assets/02.jpg" 
      }, 
      new AdaptItem 
      { 
       Image = "Assets/03.jpg" 
      }, 
      new AdaptItem 
      { 
       Image = "Assets/04.jpg" 
      }, 
      new AdaptItem 
      { 
       Image = "Assets/05.jpg" 
      } 
     }; 

     return pics; 
    } 

Answer 1

您可以检查模板是如何在UWP工具包示例应用程序或sample code on GitHub使用：

<Controls:AdaptiveGridView Name="AdaptiveGridViewControl" 
            OneRowModeEnabled="False" 
            ItemHeight="200" 
            DesiredWidth="300" 
            SelectionMode="Single" 
            IsItemClickEnabled="True" 
            ItemTemplate="{StaticResource PhotosTemplate}"> 
    <Controls:AdaptiveGridView.Resources> 
     <DataTemplate x:Key="PhotosTemplate"> 
     <Grid 
      Background="White" 
      BorderBrush="Black" 
      BorderThickness="1"> 
      <Image 
       Source="{Binding Thumbnail}" 
       Stretch="UniformToFill" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center"/> 
     </Grid> 
     </DataTemplate> 
    </Controls:AdaptiveGridView.Resources> 
</Controls:AdaptiveGridView> 

总之 - 是的，ItemTemplate的工作方式与其他任何DataTemplate相同。