UWP Images from my DataTemplate wont bind to my AdaptiveGirdView

Question

I've being trying different ways to implement the Adaptive grid and filling it with my own images but no matter what I just get a blank screen.

I've tried the following, I get no errors but nothing shows up when I run it locally except the command bar:

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 for filling the 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

The issue with your approach is that you're setting the data context of the whole view instead of setting the ItemSource of the AdaptivePanel.

Just replace the below code:

this.DataContext = PicItems;

with:

AdaptiveGridViewControl.ItemsSource = PicItems;

For the above thing to work, please make sure you name your control instead of as Name="AdaptiveGridViewControl" to x:Name="AdaptiveGridViewControl"

the x: helps to use the controls in code behind for the controls that aren't a part of UWP default controls.

That being said, I would highly recommend you use x:bind instead of the Binding. I could see that you'd tried in the data template. You weren't able to do so because you need x:Bind an image control to a BitmapImage and not a string. you can do so by specifying the AdaptItem as below:

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

and your DataTemplate is as below:

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

---

That being said, i would also recommend using DataBinding to set your ItemSource.