Will the TreeViewItem header not stretch?
This problem occurs because the default template for TreeViewItem for WPF is set as 3-column to 2-row Grid . The first line is for the "header" (actually a Border ), and the second line is for ItemsPresenter . These two rows become visible or hidden as needed to expand the tree when you click on the small triangle that occupies the zero column of the Grid .
Both rows really only need one extra column. For example, in the second line, we should not have anything in col-0, row-1, because this pure part should be indented if IsExpanded is true. But the mystery begins when we note that the ItemsPresenter based on col-1, row-1, indicates Grid.ColumnSpan=2 .
Unfortunately, on the top line, the Border that contains the header is set to Grid.Column=1 ... but not ColumnSpan. Since col-2 Grid has Width=* , this means that the header / border will not stretch horizontally.
In other words, it seems to me that a three-column grid design has no purpose other than specifically to prevent the header from stretching. As far as I can tell, a simple 2x2 layout would be more flexible [edit: see Footnote # 2] and would support either stretching or the header is “jagged” without stretching through regular WPF alignment mechanisms.
Ideally, we would change the Grid to have only 2 columns instead of 3. Since this is not so simple, instead we will make the header columns of header 2, as ItemsPresenter does.
Well, here is a small, complete, stand-alone (XAML only) working program that demonstrates and fixes the problem:
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/netfx/2007/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:r="clr-namespace:System.Reflection;assembly=mscorlib" xmlns:sys="clr-namespace:System;assembly=mscorlib" Width="800" SizeToContent="Manual"> <TreeView ItemsSource="{Binding Source={StaticResource data}}" VirtualizingStackPanel.VirtualizationMode="Recycling" VirtualizingStackPanel.IsVirtualizing="True" VirtualizingPanel.ScrollUnit="Item"> <TreeView.Resources> <ObjectDataProvider x:Key="data" ObjectInstance="{x:Static sys:AppDomain.CurrentDomain}" MethodName="GetAssemblies" /> <HierarchicalDataTemplate DataType="{x:Type r:Assembly}" ItemsSource="{Binding Path=DefinedTypes}" > <TextBlock Text="{Binding Path=Location}" /> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type sys:Type}" ItemsSource="{Binding Path=CustomAttributes}"> <TextBlock Text="{Binding Path=Name}" /> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type r:CustomAttributeData}" ItemsSource="{Binding Path=ConstructorArguments}"> <TextBlock Text="{Binding Path=AttributeType.Name}" /> </HierarchicalDataTemplate> </TreeView.Resources> <TreeView.ItemContainerStyle> <Style TargetType="{x:Type TreeViewItem}"> <Style.Resources> <Style TargetType="{x:Type Border}"> <Setter Property="Grid.ColumnSpan" Value="2" /> </Style> </Style.Resources> <Setter Property="Background" Value="LightBlue" /> </Style> </TreeView.ItemContainerStyle> </TreeView> </Window>
If you run this program as shown, you will see something like this. This is a fixed behavior that allows you to fully control the behavior of the stretching of the TreeViewItem header:
Note the BEGIN / END part with dashed lines in the XAML source. Basically, I just set Grid.ColumnSpan=2 to offend Border so that it fills the stretched width of the Grid . This element is emitted by the TreeViewItem template, so I found that the effective way to change its properties is to target the Style in the resource dictionary of the Style element template. Yes, it is embarrassing. That Style , in turn, is set via TreeViewItem.ItemContainerStyle .
To see a (existing) behavior violation, you can comment on the part between the dashed lines:
You can also set these styles in some resource dictionary, instead of using the ItemContainerStyle property, as I here. I did it this way because it minimizes the amount of fix so that Border controls not related to it will not be affected. If you need a more discriminatory way of targeting this control only, you can take advantage of the fact that it has Name='Bd' .
[edit:] This solution does not use reflection! Do not be afraid of meaningless demo data - this has nothing to do with this problem; it was the easiest way to capture some hierarchical data for demonstration purposes, and the whole program was tiny.
[edit # 2:] I just realized that what the designers were trying to avoid with the 3x2 grid was the next unsightly effect (exaggerated here with a small screenshot). Therefore, if you make one of the decisions on this page, warn you about this, you may not want this:
