none
Inexplicable Margins in TreeViewItem rendered with custom control template RRS feed

  • Question

  • Hi

    I have a TreeView control that uses default System.Windows.Controls.TreeViewItems with their own control template (template XAML see below). The TreeListView exposes GridViewColumns just like a ListView ind GridViewMode. So it has a GridViewRowPresenter inside its template. This GridViewRowPresenter binds to a Columns collections and uses the CellTemplates provided by the 'client' to display the cell content.

    Now there is one automatism that i can't explain or modify and that is that for each cell of each column the GridViewRowPresenter creates a ContentPresenter at runtime (which is normal). The ContentPresenter then presents the content of the cell based on the CellTemplate of the GridVilewColumn(s). This is fully OK.

    The problem is that the ContentPresenter has its margin set to 6,0,6,0, so there is a gap of 6px on the left of each treeview item!

    This is what I'd like to get rid of. I Want a margin of 0.

    I cannot see where this margin is defined, Its not in the TreeViewItem template, not in the TreeListView template and also not in the (many) cell DataTemplates. It seems some automatism coming from the GridViewRowPresenter or ContentPresenter default styles, I suppose.

    If I modify the Margin to 0 using Snoop, then I get the result i want.

    Does anyone know, which style / template is responsible for these horizontal margins and how i could fix them?

    Thanks a lot,
    Chris

    Btw plz have a look at the Control Template and also the
    screen shots of Snoop and the App!

    The control template is as follows:

    <ControlTemplate x:Key="TreeListViewItemTemplate" TargetType="TreeViewItem">
            <!--  #region TreeViewItem Content  -->
            <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Orientation="Vertical"                    >
                <StackPanel Orientation="Horizontal" x:Name="PART_HeaderPanel">
                    <!--  #region "Normal" content  -->
                    <Border x:Name="Border"
                            Margin="0"
                            Background="Transparent"
                            BorderBrush="Transparent"
                            BorderThickness="1"
                            CornerRadius="2">
                        <Border x:Name="InnerBorder"
                                BorderBrush="Transparent"
                                BorderThickness="0.5"
                                CornerRadius="1.5">
                            <!--  #region GridViewRowPresenter containing the Columns and their CellTemplates  -->
                            <GridViewRowPresenter x:Name="PART_Header"
                                                  Grid.Column="1"
                                                  Columns="{Binding Path=Columns, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=primitives:TreeListView}}"
                                                  Content="{TemplateBinding Header}"
                                                  <!-- ContentPresenters with Margins generated here , one for each column! -->
                                                  Focusable="True" />
                            <!--  #endregion  -->
                        </Border>
                    </Border>
                    <!--  #endregion  -->
                </StackPanel>
                <!--  #region ItemsPresenter containing ItemsPanel to display the sub nodes  -->
                <ItemsPresenter x:Name="ItemsPresenter"
                                Focusable="True"
                                Visibility="Collapsed" />
                <!--  #endregion  -->
            </StackPanel>
    <ControlTemplate.Triggers>
                <!--  lots of triggers for selection / focus / etc   -->
    </ControlTemplate.Triggers>

    Image Snoop:

    snoop screen shot: margins in gridviewrowpresenters contentpresenters of treeviewitem control template

    Image Margin in app at runtime:

    app screen shot: 6px left-margins in gridviewrowpresenters contentpresenters of treeviewitem control template


    Wednesday, August 28, 2013 10:42 AM

Answers

  • Hi,

    According to your description, I've done some tests, as you said:

    The problem is that the ContentPresenter has its margin set to 6,0,6,0, so there is a gap of 6px on the left of each treeview item!

    So I think we can just get around this using Margin="-6,0,-6,0":

    <!--  #region GridViewRowPresenter containing the Columns and their CellTemplates  -->
                <GridViewRowPresenter x:Name="PART_Header"
                                  Grid.Column="1"
                                  Columns="{Binding Path=Columns, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=primitives:TreeListView}}"
                                  Content="{TemplateBinding Header}"
                                  Focusable="True"
                                  Margin="-6,0,-6,0" />
    <!--  #endregion  -->

    In my sample project, it works fine:

    Please check the following references:

    #GridViewRowPresenter Class
    http://msdn.microsoft.com/en-us/library/system.windows.controls.gridviewrowpresenter.aspx

    #ListView Column Margin
    http://www.interact-sw.co.uk/iangblog/2007/05/30/wpf-listview-column-margins


    <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.

    Thursday, August 29, 2013 3:54 AM
    Moderator

All replies

  • Hi,

    According to your description, I've done some tests, as you said:

    The problem is that the ContentPresenter has its margin set to 6,0,6,0, so there is a gap of 6px on the left of each treeview item!

    So I think we can just get around this using Margin="-6,0,-6,0":

    <!--  #region GridViewRowPresenter containing the Columns and their CellTemplates  -->
                <GridViewRowPresenter x:Name="PART_Header"
                                  Grid.Column="1"
                                  Columns="{Binding Path=Columns, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=primitives:TreeListView}}"
                                  Content="{TemplateBinding Header}"
                                  Focusable="True"
                                  Margin="-6,0,-6,0" />
    <!--  #endregion  -->

    In my sample project, it works fine:

    Please check the following references:

    #GridViewRowPresenter Class
    http://msdn.microsoft.com/en-us/library/system.windows.controls.gridviewrowpresenter.aspx

    #ListView Column Margin
    http://www.interact-sw.co.uk/iangblog/2007/05/30/wpf-listview-column-margins


    <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.

    Thursday, August 29, 2013 3:54 AM
    Moderator
  • Hi Franklin

    Thanks a lot for your anwser, this actually fully solves the problem, so I don't need to
    customize another control template ;-)
    Also very useful that you took the time and could repro the issue in your test case,
    very much appreciated and great help!

    Thx
    Chris


    Thursday, August 29, 2013 4:38 PM