locked
Indent first column in GridView of ListView RRS feed

  • Question

  • I have created a gridview by using list view. There is 2 level of nodes and I would like to indent the child node. Therefore, I have set the margin in the <ItemPresenter>. The result looks pretty good but the second and the third column also been indent and not align according to its header column. Any idea to indent only the first column but not the rest column?

    Result (I cant attach picture here so I roughly sketch the result, assume that '|' is the cell border)

    Name|Time |State

    ^ Parent Node

        ^ Child Node

            Grandchild Node       |   12pm  |    True

    xaml

    <ListView Name="listViewResult" Margin="10,231,0,-299" BorderBrush="#FF000000" BorderThickness="1" >
                    <ListView.View>
                        <GridView>
                            <GridViewColumn Header="Name" Width="280" DisplayMemberBinding="{Binding GrandChildNodeData}" />
                            <GridViewColumn Header="Date/ Time" Width="160" DisplayMemberBinding="{Binding Time}" />
                            <GridViewColumn Header="State" Width="160" DisplayMemberBinding="{Binding State}" />
                        </GridView>
                    </ListView.View>
    
                    <ListView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.ContainerStyle>
                                <Style TargetType="{x:Type GroupItem}">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate>
                                                <Expander IsExpanded="True">
                                                    <Expander.Header>
                                                        <StackPanel Orientation="Horizontal">
                                                            <TextBlock Text="{Binding Name}" FontWeight="Bold" VerticalAlignment="Bottom" />
                                                            <TextBlock Text="{Binding ItemCount}" Foreground="Silver" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
                                                            <TextBlock Text=" item(s)" Foreground="Silver" FontStyle="Italic" VerticalAlignment="Bottom" />
                                                        </StackPanel>
                                                    </Expander.Header>
                                                    <ItemsPresenter Margin="20,0,0,0" />
                                                </Expander>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </GroupStyle.ContainerStyle>
                        </GroupStyle>
                    </ListView.GroupStyle>
                </ListView>





    • Edited by Chin21 Thursday, October 9, 2014 1:03 AM mistake on gridviewcolumn header
    Wednesday, October 8, 2014 8:12 AM

Answers

  • You are setting the Margin of the entire GroupItem. You should define a CellTemplate for the first column and set the Margins in there:

          <ListView.View>
            <GridView>
              <GridViewColumn Header="Name" Width="120">
                <GridViewColumn.CellTemplate>
                  <DataTemplate>
                    <TextBlock Text="{Binding Name}" Margin="20 0 0 0"/>
                  </DataTemplate>
                </GridViewColumn.CellTemplate>
              </GridViewColumn>
              <GridViewColumn Header="Date/ Time" Width="160" DisplayMemberBinding="{Binding Time}" />
              <GridViewColumn Header="State" Width="160" DisplayMemberBinding="{Binding State}" />
            </GridView>
          </ListView.View>
            <ListView.GroupStyle>
            <GroupStyle>
              <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                  <Setter Property="Template">
                    <Setter.Value>
                      <ControlTemplate>
                        <Expander IsExpanded="True">
                          <Expander.Header>
                            <StackPanel Orientation="Horizontal">
                              <TextBlock Text="{Binding Name}" FontWeight="Bold" VerticalAlignment="Bottom" />
                              <TextBlock Text="{Binding ItemCount}" Foreground="Silver" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
                              <TextBlock Text=" item(s)" Foreground="Silver" FontStyle="Italic" VerticalAlignment="Bottom" />
                            </StackPanel>
                          </Expander.Header>
                          <ItemsPresenter />
                        </Expander>
                      </ControlTemplate>
                    </Setter.Value>
                  </Setter>
                </Style>
              </GroupStyle.ContainerStyle>
            </GroupStyle>
          </ListView.GroupStyle>
    

    • Marked as answer by Chin21 Thursday, October 9, 2014 3:15 AM
    Wednesday, October 8, 2014 3:54 PM

All replies

  • You are setting the Margin of the entire GroupItem. You should define a CellTemplate for the first column and set the Margins in there:

          <ListView.View>
            <GridView>
              <GridViewColumn Header="Name" Width="120">
                <GridViewColumn.CellTemplate>
                  <DataTemplate>
                    <TextBlock Text="{Binding Name}" Margin="20 0 0 0"/>
                  </DataTemplate>
                </GridViewColumn.CellTemplate>
              </GridViewColumn>
              <GridViewColumn Header="Date/ Time" Width="160" DisplayMemberBinding="{Binding Time}" />
              <GridViewColumn Header="State" Width="160" DisplayMemberBinding="{Binding State}" />
            </GridView>
          </ListView.View>
            <ListView.GroupStyle>
            <GroupStyle>
              <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                  <Setter Property="Template">
                    <Setter.Value>
                      <ControlTemplate>
                        <Expander IsExpanded="True">
                          <Expander.Header>
                            <StackPanel Orientation="Horizontal">
                              <TextBlock Text="{Binding Name}" FontWeight="Bold" VerticalAlignment="Bottom" />
                              <TextBlock Text="{Binding ItemCount}" Foreground="Silver" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
                              <TextBlock Text=" item(s)" Foreground="Silver" FontStyle="Italic" VerticalAlignment="Bottom" />
                            </StackPanel>
                          </Expander.Header>
                          <ItemsPresenter />
                        </Expander>
                      </ControlTemplate>
                    </Setter.Value>
                  </Setter>
                </Style>
              </GroupStyle.ContainerStyle>
            </GroupStyle>
          </ListView.GroupStyle>
    

    • Marked as answer by Chin21 Thursday, October 9, 2014 3:15 AM
    Wednesday, October 8, 2014 3:54 PM
  • Hi Magnus, thanks for your effort.

    Your answer is work perfectly for the granchild node, but the child node is still align same as the parent node.

    There is a change in my code:

    <GridViewColumn Header="Name" Width="280" DisplayMemberBinding="{Binding Name}" />

    should be

    <GridViewColumn Header="Name" Width="280" DisplayMemberBinding="{Binding GrandChildNodeData}" />

    Thursday, October 9, 2014 12:16 AM