Autosizing templated column in a ListView based Multicolumn treeview

Question

Hi,

I'm using the multicolumn treeview control which I found here http://www.codeproject.com/KB/WPF/wpf_treelistview_control.aspx

The first column in this control which consists of a simulated tree view control needs to be autosized when a node is expanded/collapsed.

Any help?

Sample XAML

<UserControl x:Class="ListViewAsTreeView.XmlTree"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ListViewAsTreeView"    
xmlns:tree="clr-namespace:Aga.Controls.Tree;assembly=Aga.Controls">

<UserControl.Resources>        
    <local:RegImageConverter x:Key="RegImageConverter"/>
    <local:ComboList x:Key="MyComboSource"/>        
</UserControl.Resources>

<StackPanel>
    <tree:TreeList Name="_tree" local:DragAndDrop.DropEnabled="true"
                   MinHeight="40"
                   IsSynchronizedWithCurrentItem="True">
        <tree:TreeList.View>
            <GridView>
                <GridView.Columns>
                    <GridViewColumn Header="Name">                     
                        <GridViewColumn.CellTemplate>                  
                            <DataTemplate>
                                <StackPanel 
                                    Orientation="Horizontal">
                                    <tree:RowExpander/>
                                    <Image
                                        Source="{Binding 
                                        Converter={StaticResource RegImageConverter}}"  Margin="0, 0, 5, 0"/>
                                    <TextBlock
                                        Text="{Binding Name}">                                    
                                    </TextBlock>
                                </StackPanel>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <GridViewColumn Header="Type" Width="Auto" 
                                    DisplayMemberBinding="{Binding Kind, UpdateSourceTrigger=PropertyChanged}"/>
                    <GridViewColumn Header="Data" Width="Auto" 
                                    DisplayMemberBinding="{Binding Data, UpdateSourceTrigger=PropertyChanged}"/>
                    <GridViewColumn Header="ComboSample" Width="Auto">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <ComboBox Name="MyComboBox" ItemsSource="{StaticResource MyComboSource}" 
                                          IsEditable="True" IsEnabled="True" 
                                          Text="{Binding Name}">
                                </ComboBox>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView.Columns>
            </GridView>
        </tree:TreeList.View>
    </tree:TreeList>

    <ListBox local:DragAndDrop.DragEnabled="true">
        <ListBoxItem>Item 1</ListBoxItem>
        <ListBoxItem>Item 2</ListBoxItem>
        <ListBoxItem>Item 3</ListBoxItem>
    </ListBox>
</StackPanel>

Thanks, Jithu

Answer 1

Hi,

Try defining a separate DataGrid and and populate with an item that contains longest column values. Then DataBind the Aga.Controls Treeview's column width to the corresponding column width of your DataGrid. That way TreeView control's column width is set to the longest column item. You can always hide the DataGrid by setting the opacity to zero.

e.g: Assume the DataGrid name is "TestDataGrid" and it has a column called "dgNameColumn"

<GridViewColumn Header="Name" **Width="{Binding ElementName=dgNameColumn, Path=ActualWidth}"**>                     
                    <GridViewColumn.CellTemplate>                  
                        <DataTemplate>
                            <StackPanel 
                                Orientation="Horizontal">
                                <tree:RowExpander/>
                                <Image
                                    Source="{Binding 
                                    Converter={StaticResource RegImageConverter}}"  Margin="0, 0, 5, 0"/>
                                <TextBlock
                                    Text="{Binding Name}">                                    
                                </TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>

Hope this helps.