UWP图像不会绑定到我的AdaptiveGirdView

Question

我已经被尝试不同的方式来实现自适应网格和我自己的图像填充，但无论怎样我只是得到一个空白屏幕。

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

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中：

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

您的方法的问题是您要设置整个视图的数据上下文，而不是设置的AdaptivePanel。

只需更换下面的代码：

this.DataContext = PicItems; 

有：

AdaptiveGridViewControl.ItemsSource = PicItems;

对于上面的东西的工作，请确保你的名字你的控制，而不是为Name="AdaptiveGridViewControl"到x:Name="AdaptiveGridViewControl"

的x:有助于在代码中使用控件后面的对照ols不是UWP默认控件的一部分。

这就是说，我强烈建议你使用x:bind而不是Binding。我可以看到你在数据模板中尝试过。你不能够这样做，因为你需要x:Bind的图像控制的BitmapImage，而不是一个字符串。您可以通过指定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> 

---

话虽这么说，我也建议使用DataBinding设置你的ItemSource。