UWPToolkit - Qu'est-ce qu'un ItemTemplate et comment en créer un pour mon AdaptiveGrid?

Question

Im actuellement en essayant d'utiliser le AdaptiveGrid dans le toolkit pour afficher Quelques images qui peuvent alors être cliquées dessus pour mener aux pages, je pense que ce ItemTemplate est ce qui fournit les images dans l'exemple. Est-ce la même chose que n'importe quel DataTemplate? Je ne peux trouver aucune information en ligne à propos de ces documents.

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

J'ai essayé ce qui suit, je reçois aucune erreur, mais rien ne montre quand je le lance localement, sauf la barre de commande:

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 pour remplir le 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

Vous pouvez vérifier le modèle est utilisé dans l'exemple d'application Toolkit UWP ou dans le 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> 

En bref - oui, le ItemTemplate fonctionne de la même manière que toute autre DataTemplate.