I am using a telerik TreeView in WPF, and I’m using a HierarchicalDataTemplate to show the nodes. Nodes represent matched items – which can be left only, right only, equal or inequal (a tree based comparison).
I am currently using a DataTemplateSelector to select from one of four templates, which all look similar to the following:
<HierarchicalDataTemplate x:Key="EqualTreeItemTemplate" ItemsSource="{Binding}">
<Grid Name="rowGrid" HorizontalAlignment="Stretch" Height="Auto" d:DataContext="{d:DesignInstance Carbon:ICarbonComparisonPair }">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Path Data="F1M574.042,314.611L533.8,344.398 522.251,328.798 515.235,333.988 526.786,349.593 526.782,349.596 531.978,356.603 579.235,321.622 574.042,314.611z" Stretch="Uniform" Fill="#FF000000" Width="16" Height="16" VerticalAlignment="Center" Margin="0,0,0,0" />
<TextBlock Grid.Column="1" Text="{Binding ObjectName}" Style="{StaticResource ObjectNameStyle}" Margin="4,0,0,0" />
<TextBlock Grid.Column="2" Text="{Binding ObjectName}" Style="{StaticResource ObjectNameStyle}" Margin="4,0,0,0" />
</Grid>
</HierarchicalDataTemplate>
The problem that I have is that the item content area is a different width based on the level of the tree that the item appears in. This means that the columns that I have don’t line up – the text in the right hand column shifts to the right a bit for each level of the tree that you expand.
What I would like to do is specify the right hand grid column’s width to be 50% of the size of the tree control as a whole, rather than 50% of the grid’s natural area. I thought maybe I could do this with a binding with a RelativeSource, but I just can’t seem to make it work. Is there a way to achieve this in XAML, or do I need to resort to code-behind?
If I’m understanding it correctly you want column index 2 to align across all items?
Check out the TreeListView control and see if that gives you what you need.
Silverlight demo here (just so you can see what it looks like – the WPF version is pretty much the same)
[Edit – More info]
The SharedGroupName property on ColumnDefinition is tempting but, thanks to the indent, it won’t quite work – you’ll end up with all of the content in column 1 or 2 being sized the same, but the pesky indent still throws it off. Check out ListView’s View Property. I’m believe it’s at least in the same spirit as what Telerik TreeListView is, if not darned similar in implementation.
Here’s a decent writeup on how to use it. (Ironically I have that page bookmarked in a folder called “TreeGridList” so apparently at some point I had the idea to do that to accomplish something similar 🙂 )