Data Binding in a GridView

Question

I am trying to associate some data with a GridView element in a Windows 8.1 Hub .

I currently have a DataTemplate configured 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> 

Then I have a 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 a DataContext:

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

Where is the FavData class:

  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, the HubSection does not display data. What am I doing wrong?

Answer 1

You need to associate a list, such as List<FavData> or ObservableCollection<FavData> with a hub.

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

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

The binding is indicated as {Binding Items} , which means that for any object currently bound to the hub, take the List stored in the Items property. Since you currently set up one FavData instance for the hub using the DataContext , and it did not have a property named Items , there is nothing to display.

So my suggestion is to create a list of FavData instances and associate this with the Hub instance instead. If you want to directly link the list, rather than storing the list in another “parent” object, you will also need to adjust the Binding to refer to the self rather than the specific property. To do this, you simply use the syntax: {Binding} . It just means attach to me. So, the GridView will look for a list of elements directly on the linked object ( FavData list).

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

And in C #:

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