locked
How to change group header position in a gridview ?

    Question

  • I have a gridview with group header at the top ,i am trying to position in to the left and its items shown next to it horizontally .How can i do this i've tried to do this but i'm failing .Any help will be appreciated Thanks.  

    19karabo91

    Thursday, June 5, 2014 8:46 AM

Answers

  • Hi,

    Please refer to the sample below:

    http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

    In scenario two, you will find there are some codes for define the group header position:

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

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; 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.

    • Marked as answer by 19karabo91 Friday, June 6, 2014 10:01 AM
    Friday, June 6, 2014 2:15 AM

All replies

  • Have you tried editing the default template? You can see the default template here.

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709916.aspx

    Look for the ItemsControl HeaderTemplate. Edit this template.

    To edit a default template, in blend or in the VS document outline window, right click the gridview and select edit template. 

    I recommend looking up how to edit a default xaml template.

    Good luck!

    Here is a quick way to set the header template of a gridview.

            <GridView>
                <GridView.HeaderTemplate>
                    <DataTemplate>
                        <!-- your template -->
                    </DataTemplate>
                </GridView.HeaderTemplate>
            </GridView>


    Thursday, June 5, 2014 1:07 PM
  • Try to apply this style as ContainerStyle for GroupStyle:

    <Style x:Key="GroupItemStyle1" TargetType="GroupItem">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GroupItem">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
                                    <ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Column="1" TabIndex="1" TabNavigation="Once">
                                        <ItemsControl.ItemContainerTransitions>
                                            <TransitionCollection>
                                                <AddDeleteThemeTransition/>
                                                <ContentThemeTransition/>
                                                <ReorderThemeTransition/>
                                                <EntranceThemeTransition IsStaggeringEnabled="False"/>
                                            </TransitionCollection>
                                        </ItemsControl.ItemContainerTransitions>
                                    </ItemsControl>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    the text in BOLD are the changes that i did in the default style.

    - Ram
    If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".

    Thursday, June 5, 2014 1:58 PM
  • Hi,

    Please refer to the sample below:

    http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

    In scenario two, you will find there are some codes for define the group header position:

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

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; 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.

    • Marked as answer by 19karabo91 Friday, June 6, 2014 10:01 AM
    Friday, June 6, 2014 2:15 AM
  • To add to Anne's solution- If you'd like the items in the Group to be displayed horizontally, you can change the ItemsPanel to ItemsStackPanel and set it's GroupHeaderPlacement property to "Left" 

    -Sagar

    Friday, June 6, 2014 9:52 AM
  • Thanks Anne Jing That was easy ,i really appreciate it .

    19karabo91

    Friday, June 6, 2014 10:02 AM