locked
ListView within a GridView

    Question

  • I want to use the horizontal scrolling feature of a GridView to display individual groups of data. However, within each GridView panel I want to display a ListView because each GridView group has dozens of items, and in using a ListView I had hoped to be able to scroll vertically through all the items in the group. I tried the following, but it did not yield a ListView within a GridView. Are there any suggestions?

    <GridView x:Name="ZoomedInGridView" 
     Margin="120,0,0,0"
            Padding="0,0,40,46"
            ItemsSource="{Binding Source={StaticResource GroupedItemsViewSource}}"     
            ItemTemplate="{StaticResource PTKListGridEventTemplate}"
            SelectionMode="None"
            ScrollViewer.IsHorizontalScrollChainingEnabled="False"
            IsItemClickEnabled="True"                       
            Loaded="ZoomedInGridView_Loaded">
                       
            <GridView.GroupStyle>
             <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                     <DataTemplate>
                            <Button AutomationProperties.Name="{Binding ItemGroupName}"
                             Foreground="{StaticResource PTKAccentTextBrush}"
                                                Style="{StaticResource TextPrimaryButtonStyle}"
                                                Command="{Binding CategoryNavigationCommand}"
                                                Margin="0,0,0,10">
                                    <Button.Content>
                                     <StackPanel Orientation="Horizontal">
                                             <TextBlock Text="{Binding GroupName}"
                                                               Style="{StaticResource GroupHeaderTextStyle}"
                                                               Margin="-4,0,0,0"
                                                               HorizontalAlignment="Left"/>
                                                    <TextBlock Text="{StaticResource ChevronGlyph}"
                                                               Style="{StaticResource GroupHeaderTextStyle}"
                                                               FontFamily="{StaticResource SymbolThemeFontFamily}"
                                                               Margin="10,0,0,0"
                                                               HorizontalAlignment="Left"/>
                                                    <TextBlock Text="{Binding GroupCount}"
                                                               Style="{StaticResource GroupHeaderTextStyle}"
                                                               Margin="10,0,0,0"
                                                               HorizontalAlignment="Left"/>
                                                    <TextBlock x:Uid="Items" Text="Label"
                                                               Style="{StaticResource GroupHeaderTextStyle}"
                                                               Margin="10,0,0,0"
                                                               HorizontalAlignment="Left"/>
                                        </StackPanel>
                                       </Button.Content>
                               </Button>                                   
                               </DataTemplate>
                      </GroupStyle.HeaderTemplate>

                      <GroupStyle.Panel>                               
                       <ItemsPanelTemplate>
                              <ListView />
                        </ItemsPanelTemplate>
                      </GroupStyle.Panel>

                     </GroupStyle>
               </GridView.GroupStyle>
    </GridView>

    Monday, September 22, 2014 10:05 PM

Answers

  • You don't have an ItemsTemplate for this GridView. My recommendation is that you actually embed a ListView inside the GridView's ItemTemplate, and bind that Listview to the list which is part of the data.  Just like this:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <Border Height="500" Width="800" BorderBrush="Red" BorderThickness="1">
        <GridView x:Name="MyGridView" Margin="10">
          <GridView.ItemTemplate>
            <DataTemplate>
              <Border Height="500" Width="200" BorderBrush="Blue" BorderThickness="1">
                <ListView ItemsSource="{Binding}" Margin="10"/>
              </Border>
            </DataTemplate>
          </GridView.ItemTemplate>
        </GridView>
      </Border>
    </Grid>

    public MainPage()
    {
      this.InitializeComponent();
      List<List<string>> MainList = new List<List<string>>();
      for (int i=0; i< 20; i++)
      {
        List<string> InnerList = new List<string>();
        for (int j=0; j< 20; j++)
        {
          InnerList.Add("Grid #" + i.ToString() + " - List #" + j.ToString());
        }
        MainList.Add(InnerList);
      }
      MyGridView.ItemsSource = MainList;
    }


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

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, September 23, 2014 2:05 PM
    Moderator