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 다음 AdaptGrid를 작성을위한

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 :

,

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와 동일한 방식으로 작동합니다.