locked
GridView Group Header

    Question

  • Hi there,

    I have a gridview control with a group header, it works but it's too small, I'm trying to get it to look like this,

    where the red boxes are group headers and the blue boxes are items.  The view scrolls horizontally.  At the moment my header is appearing as a thin strip above the items rather than to the left of them.

                        <GridView Margin="12,0,0,0" ItemsSource="{Binding Source={StaticResource GroupedTracks}}" SelectionMode="None">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1"></WrapGrid>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.GroupStyle>
                                <GroupStyle HidesIfEmpty="True">
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <local:SectionHeader Title="{Binding Key}" Width="256" />
                                            <!--<Grid>
                                                <TextBlock Text='{Binding Key}' Style="{ThemeResource SubheaderTextBlockStyle}"/>
                                            </Grid>-->
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
    
                                    <GroupStyle.Panel>
                                        <ItemsPanelTemplate>
                                            <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
                                        </ItemsPanelTemplate>
                                    </GroupStyle.Panel>
                                </GroupStyle>
                            </GridView.GroupStyle>
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <Button Width="256" Height="256">
                                        <StackPanel>
                                            <TextBlock Text="{Binding Album}" />
                                            <TextBlock Text="{Binding Title}" />
                                        </StackPanel>
                                    </Button>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>


    Somewhere out there...

    Monday, March 31, 2014 8:36 AM

Answers

  • Hi Firkinfedup,

    A really helpful sample for you: http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

    In scenario two, you can find some code for customize the group header. I believe this is what you need.

    And this is the key line:

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid GroupHeaderPlacement="Left" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Wednesday, April 02, 2014 1:38 AM
    Moderator

All replies

  • My section header control is a simple grid with a textblock in i,

        <Grid Height="Auto" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="12" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock x:Name="TitleLabel" Grid.Row="1" Margin="8,0,0,0" Text="Title" Foreground="Black" Style="{ThemeResource HeaderTextBlockStyle}" />
        </Grid>



    Somewhere out there...

    Monday, March 31, 2014 8:39 AM
  • Hi Firkinfedup,

    A really helpful sample for you: http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

    In scenario two, you can find some code for customize the group header. I believe this is what you need.

    And this is the key line:

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid GroupHeaderPlacement="Left" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Wednesday, April 02, 2014 1:38 AM
    Moderator
  • Hi Firkinfedup,

    A really helpful sample for you: http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

    In scenario two, you can find some code for customize the group header. I believe this is what you need.

    And this is the key line:

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid GroupHeaderPlacement="Left" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Hi James,

    Thanks for your answer, I'm just trying to modify my xaml now.  At current I have a wrapgrid in as the itemspaneltemplate child,

                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="2" />
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>

    When I change this to ItemsWrapGrid to get to the group header placement option everything vanishes.

    I'll keep messing with and see if I can get the stuff to appear.


    Somewhere out there...

    • Marked as answer by Firkinfedup Saturday, April 05, 2014 9:34 AM
    • Unmarked as answer by Firkinfedup Saturday, April 05, 2014 9:34 AM
    Saturday, April 05, 2014 9:19 AM
  • False alarm, my app startup code was being bypassed.  Cheers that worked great!

    Somewhere out there...

    Saturday, April 05, 2014 9:33 AM