Data Binding in GridView

Question

I'm trying to bind some data to a GridView in Windows 8.1's Hub control.

Currently, I have a DataTemplate set up under Page.Resources as follows:

        <DataTemplate x:Key="Standard240x320ItemTemplateFAV">
        <Grid HorizontalAlignment="Left" Width="320" Height="240">
            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                <Image Source="{Binding FavImage}" Stretch="UniformToFill"/>
            </Border>
            <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                <TextBlock Text="{Binding FavTitle}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="48" Margin="15,0,15,0"/>
            </StackPanel>
        </Grid>
    </DataTemplate>

I then have this HubSection:

            <HubSection x:Name="FavHub" Padding="40,60,40,0" >
            <DataTemplate>
                <GridView
                    x:Name="itemGridView"
                    Margin="-4,-4,0,0"
                    AutomationProperties.AutomationId="ItemGridView"
                    AutomationProperties.Name="Items In Group"
                    ItemsSource="{Binding Items}"
                    ItemTemplate="{StaticResource Standard240x320ItemTemplateFAV}"
                    SelectionMode="Single"
                    IsSwipeEnabled="false"
                    IsItemClickEnabled="True"
                    ItemClick="ItemView_ItemClick">
                </GridView>
            </DataTemplate>
        </HubSection>

I use this code to add the DataContext:

FavHub.DataContext = new FavData(Constants.getImage("1002"), "No Favourites");

Where the FavData class is:

    public class FavData
    {
        public static string FavImage { get; set; }
        public static string FavTitle { get; set; }

        public FavData() { }

        public FavData(string itemImageSet, string itemNameSet)
        {
            FavImage = itemImageSet;
            FavTitle = itemNameSet;
        }
    }

However, no data shows up in the HubSection. What am I doing wrong?

Answer 1

You'll need to bind a list, like a List<FavData> or an ObservableCollection<FavData> to the Hub.

Right now, you've got a GridView that among many other attributes, includes initialization of the ItemsSource property. This property is used as the source for a list of items.

<GridView x:Name="itemGridView"
    ItemsSource="{Binding Items}"
</GridView>

The binding is specified as {Binding Items} which means that for whatever object is bound currently to the Hub, grab the List stored on the Items property. As you currently had set a single FavData instance to the Hub via the DataContext property, and it did not have a property called Items, there was nothing to display.

So, my suggestion is to create a list of FavData instances and bind that to the Hub instance instead. If you want to directly bind the list rather than store the list in another "parent" object, you'll also need to adjust the Binding to refer to "self" rather than a specific property. For that, you just use the syntax: {Binding}. It just means, "bind to me." So, the GridView will look for the list of items directly on the bound object (the list of FavData).

<GridView x:Name="itemGridView"
    ItemsSource="{Binding}"
</GridView>

And in the C#:

List<FavData> favs = new List<FavData>();
favs.Add(new FavData(Constants.getImage("1002"), "No Favourites"));
FavHub.DataContext = favs;