UWP私のDataTemplateの画像は私のAdaptiveGirdViewにバインドされていません

Question

私はAdaptiveグリッドを実装し、それを自分の画像で塗りつぶしています。

私は次のことを試してみた

、私はエラーを取得していないが、私はコマンドバーを除いて、ローカルで実行したときに何も現れません：

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" x:DataType="local:AdaptItem"> 
      <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：

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; 
    } 

：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

Answer 1

のItemSourceを設定する代わりに、全体のビューのデータコンテキストを設定しているという問題があります。

ただ、以下のコードに置き換えますと

this.DataContext = PicItems; 

を：

仕事をする以上のことについては

AdaptiveGridViewControl.ItemsSource = PicItems;

、代わりに

x:Name="AdaptiveGridViewControl"から Name="AdaptiveGridViewControl"としてのあなたがコントロールに名前を付けることを確認してください

x:は、contrのコードビハインドでコントロールを使用するのに役立ちますolsはUWPデフォルトコントロールの一部ではありません。

これは、Bindingの代わりにx:bindを使用することを強くお勧めします。私はあなたがデータテンプレートで試してみたことが分かりました。文字列ではなくBitmapImageに画像コントロールx:Bindが必要なので、これを行うことができませんでした。あなたは以下のようにAdaptItemを指定することで、そうすることができます。

public class AdaptItem 
{ 
    public Windows.UI.Xaml.Media.Imaging.BitmapImage Image { get; set; } 

    public static ObservableCollection<AdaptItem> AdaptList() 
    { 
     ObservableCollection<AdaptItem> pics = new ObservableCollection<AdaptItem>() 
     { 
      new AdaptItem 
      { 
       Image = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/01.jpg")) 
      }, 
      new AdaptItem 
      { 
       Image = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/02.png")) 
      }, 
      new AdaptItem 
      { 
       Image = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/03.png")) 
      }, 
     }; 

     return pics; 
    } 
} 

をし、あなたのDataTemplateは以下の通りです：

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

---

言われていること、私はまた、あなたのItemSourceを設定するDataBindingを使用することをお勧めします。