exemple binding
<HubSection IsHeaderInteractive="True" DataContext="{Binding Section3Items}" d:DataContext="{Binding Groups[3], Source={d:DesignData Source=../iX.Shared/DataModel/SampleData.json, Type=data:SampleDataSource}}" x:Uid="Section3Header" Header="Asset" Padding="40,40,40,32"> <DataTemplate> <GridView x:Name="itemGridView" ItemsSource="{Binding Items}" Margin="-9,-14,0,0" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Items In Group" ItemTemplate="{StaticResource Standard310x260ItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="Header_Click"> </GridView> </DataTemplate> </HubSection> <Page.Resources> <!-- Grid-appropriate 310 by 260 pixel item template as seen in section 4 --> <DataTemplate x:Key="Standard310x260ItemTemplate"> <Grid Height="250" Width="310" Margin="5,10,5,10"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Height="150"> <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel Grid.Row="1" Margin="0,10,0,0"> <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/> <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60" /> </StackPanel> </Grid> </DataTemplate> </Page.Resources> private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e) { // TODO: Create an appropriate data model for your problem domain to replace the sample data var sampleDataGroup = await SampleDataSource.GetGroupAsync("Group-4"); this.DefaultViewModel["Section3Items"] = sampleDataGroup; }
public class SampleDataGroup : SampleDataCommon { public SampleDataGroup(String uniqueId, String title, String subtitle, String imagePath, String description) : base(uniqueId, title, subtitle, imagePath, description) { } private ObservableCollection<SampleDataItem> _items = new ObservableCollection<SampleDataItem>(); public ObservableCollection<SampleDataItem> Items { get { return this._items; } } public IEnumerable<SampleDataItem> TopItems { // Provides a subset of the full items collection to bind to from a GroupedItemsPage // for two reasons: GridView will not virtualize large items collections, and it // improves the user experience when browsing through groups with large numbers of // items. // // A maximum of 12 items are displayed because it results in filled grid columns // whether there are 1, 2, 3, 4, or 6 rows displayed get { return this._items.Take(12); } } } private async Task GetSampleDataAsync() { if (this._groups.Count != 0) return; Uri dataUri = new Uri("ms-appx:///DataModel/SampleData.json"); StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(dataUri); string jsonText = await FileIO.ReadTextAsync(file); JsonObject jsonObject = JsonObject.Parse(jsonText); JsonArray jsonArray = jsonObject["Groups"].GetArray(); foreach (JsonValue groupValue in jsonArray) { JsonObject groupObject = groupValue.GetObject(); SampleDataGroup group = new SampleDataGroup(groupObject["UniqueId"].GetString(), groupObject["Title"].GetString(), groupObject["Subtitle"].GetString(), groupObject["ImagePath"].GetString(), groupObject["Description"].GetString()); foreach (JsonValue itemValue in groupObject["Items"].GetArray()) { JsonObject itemObject = itemValue.GetObject(); group.Items.Add(new SampleDataItem(itemObject["UniqueId"].GetString(), itemObject["Title"].GetString(), itemObject["Subtitle"].GetString(), itemObject["ImagePath"].GetString(), itemObject["Description"].GetString(), itemObject["Content"].GetString(), group)); } this.Groups.Add(group); } }