WPF TreeView share size of grid column in single level

Question

How to share size of Grid column within single level instead of multiple levels?

<TreeView ItemsSource="{Binding MyItems}" Grid.IsSharedSizeScope="True">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="{Binding Value}" Grid.Column="1"/>
            </Grid>

        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

This kind of works, but shares the size between the whole tree, which isn't what I wanted

score 1 · Answer 1 · answered Jan 25 '19 at 12:09

Here is the solution that I came up with and thought I would share:

First, we need a converter to identify the level of tree that we are in (slightly modified code from this answer):

 public class TreeLevelConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var level = -1;
            if (value is DependencyObject)
            {
                var parent = VisualTreeHelper.GetParent(value as DependencyObject);
                while (!(parent is TreeView) && (parent != null))
                {
                    if (parent is TreeViewItem)
                        level++;
                    parent = VisualTreeHelper.GetParent(parent);
                }
            }
            return (parameter?.ToString() ?? "") + ((char)('A' + level)); // the group name has to be a letter, numbers didn't work
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new System.NotImplementedException();
        }
    }

than we can use binding in XAML:

<TreeView ItemsSource="{Binding MyItems}" Grid.IsSharedSizeScope="True">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}}, Converter={StaticResource TreeLevelConverter}, ConverterParameter=A}"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}}, Converter={StaticResource TreeLevelConverter}, ConverterParameter=B}"/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="{Binding Value}" Grid.Column="1"/>
            </Grid>

        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Using the converter parameter you can achieve multiple groups within one level.

I hope this will help someone

WPF TreeView share size of grid column in single level

1 Answers1