locked
dynamically updating the itemsource of a gridview (Metro apps) RRS feed

  • Question

  • Hi,

    I am using the gridview sample from http://code.msdn.microsoft.com/windowsapps/XAML-ListView-sample-pack-0ec6b60f. In the sample "XAML GridView grouping and SemanticZoom sample" there is a grid view with grouped items. I want to update the items binded to the gridview dynamically like I will have a two buttons. when I click first button, it should show some items and should show some other items when second button is clicked .(The no.of buttons may increase). How to achieve this?

    In the button tap event, I am clearing the itemsource of the gridview and then again binding. but it does not works. Any suggestions?


    Nazia

    Wednesday, May 30, 2012 10:45 AM

Answers

  • Hi,

    This is working for me in an app I'm developing, at least with the same collection of items, but grouped in a different way. I have a SemanticZoom with GridView grouping. I set the contents of the grids on OnNavigatedTo:

    // Group them

    CollectionViewSource groups = new CollectionViewSource(); groups.Source = this.items.GetItemsByLetter(); groups.IsSourceGrouped = true; // Show them to user this.myGridZoomedIn.DataContext = groups; (this.semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = groups.View.CollectionGroups;

    Then I modify them when clicking a button with a code like this:

                // Group items
                CollectionViewSource groups = new CollectionViewSource();
                groups.Source = this.items.GetItemsByYear();
                groups.IsSourceGrouped = true;
    
                // Show them to user
                this.myGridZoomedIn.DataContext = groups;
                (this.semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = groups.View.CollectionGroups;

    The XAML looks like this:

                <SemanticZoom Grid.Row="1" x:Name="semanticZoom">
                    <SemanticZoom.ZoomedOutView>
                        <GridView x:Name="myGridZoomedOut" SelectionMode="None">
    
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
    
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Background="White" Margin="5" Width="75" Height="75">
                                        <TextBlock Text="{Binding Group.Key}" Foreground="Gray" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </SemanticZoom.ZoomedOutView>
    
                    <SemanticZoom.ZoomedInView>
                        <GridView x:Name="myGridZoomedIn" ItemsSource="{Binding}" SelectionMode="None">
    
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
    
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <Grid HorizontalAlignment="Left">
                                        <Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundBrush}">
                                            <TextBlock Text="{Binding Name}" FontSize="18"/>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
    
                            <GridView.GroupStyle>
                                <GroupStyle>
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <Grid x:Name="zoomedInGridHeader" Background="White" Margin="5" Tapped="zoomedInGridHeader_Tapped">
                                                <TextBlock Text="{Binding Key}" Foreground="Gray" FontSize="25" Padding="5,2,0,2" />
                                            </Grid>
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
    
                                    <GroupStyle.Panel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal"/>
                                        </ItemsPanelTemplate>
                                    </GroupStyle.Panel>
                                </GroupStyle>
                            </GridView.GroupStyle>
                        </GridView>
    
                    </SemanticZoom.ZoomedInView>
                </SemanticZoom>


    --------------------------------------------------------------------------------

    Alejandro Campos Magencio - Microsoft Escalation Engineer - Forum Moderator
     If my reply answers your question, please mark this post as answered.

    Wednesday, May 30, 2012 1:44 PM
    Moderator

All replies

  • Hi,

    This is working for me in an app I'm developing, at least with the same collection of items, but grouped in a different way. I have a SemanticZoom with GridView grouping. I set the contents of the grids on OnNavigatedTo:

    // Group them

    CollectionViewSource groups = new CollectionViewSource(); groups.Source = this.items.GetItemsByLetter(); groups.IsSourceGrouped = true; // Show them to user this.myGridZoomedIn.DataContext = groups; (this.semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = groups.View.CollectionGroups;

    Then I modify them when clicking a button with a code like this:

                // Group items
                CollectionViewSource groups = new CollectionViewSource();
                groups.Source = this.items.GetItemsByYear();
                groups.IsSourceGrouped = true;
    
                // Show them to user
                this.myGridZoomedIn.DataContext = groups;
                (this.semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = groups.View.CollectionGroups;

    The XAML looks like this:

                <SemanticZoom Grid.Row="1" x:Name="semanticZoom">
                    <SemanticZoom.ZoomedOutView>
                        <GridView x:Name="myGridZoomedOut" SelectionMode="None">
    
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
    
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Background="White" Margin="5" Width="75" Height="75">
                                        <TextBlock Text="{Binding Group.Key}" Foreground="Gray" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </SemanticZoom.ZoomedOutView>
    
                    <SemanticZoom.ZoomedInView>
                        <GridView x:Name="myGridZoomedIn" ItemsSource="{Binding}" SelectionMode="None">
    
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
    
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <Grid HorizontalAlignment="Left">
                                        <Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
                                        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundBrush}">
                                            <TextBlock Text="{Binding Name}" FontSize="18"/>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
    
                            <GridView.GroupStyle>
                                <GroupStyle>
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <Grid x:Name="zoomedInGridHeader" Background="White" Margin="5" Tapped="zoomedInGridHeader_Tapped">
                                                <TextBlock Text="{Binding Key}" Foreground="Gray" FontSize="25" Padding="5,2,0,2" />
                                            </Grid>
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
    
                                    <GroupStyle.Panel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal"/>
                                        </ItemsPanelTemplate>
                                    </GroupStyle.Panel>
                                </GroupStyle>
                            </GridView.GroupStyle>
                        </GridView>
    
                    </SemanticZoom.ZoomedInView>
                </SemanticZoom>


    --------------------------------------------------------------------------------

    Alejandro Campos Magencio - Microsoft Escalation Engineer - Forum Moderator
     If my reply answers your question, please mark this post as answered.

    Wednesday, May 30, 2012 1:44 PM
    Moderator
  • Thanks for the snippets Alejandro.  Quite helpful.
    Friday, June 1, 2012 4:19 AM