auto resize width of treeview with a gridsplitter

Question

Hi,

I have a silverlight3.0 aplication with a Grid. The XAML is below. I'd like to have the TreeView control resize and content wrapped when the user changes the width of the left column. Currently the treeview displays a scrollbar instead of wrapping. On the right column this works fine as there isno treeview but stackpanel.

The same happens when I use a HierarchicalDataTemplate instead of static treeviewitems.

Any ideas on how to make this work?

Thanks, -cc

  <Grid x:Name="LayoutRoot" Background="Aqua">


            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition  />
            </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical" Grid.Column="0"  Background="Yellow">
            <controls:TreeView  >

                <controls:TreeViewItem Header="test1 some text some text some text some text some text">
                    <controls:TreeViewItem Header="test1.1 some text some text some text some text some text">
                    </controls:TreeViewItem>
                </controls:TreeViewItem>
                <controls:TreeViewItem    Header="test2 some text some text some text some text some text some text some text some text some text some text some text">
                    <controls:TreeViewItem Header="test2 some text some text some text some text some text some text some text some text some text some text some text">
                    </controls:TreeViewItem>

                </controls:TreeViewItem>
            </controls:TreeView>
        </StackPanel>
        <controls:GridSplitter Grid.Row="0" Grid.Column="1" Width="5" VerticalAlignment="Stretch" 
                                       HorizontalAlignment="Center" Background="AliceBlue"/>
        <StackPanel Grid.Column="2" Orientation="Vertical">
            <TextBlock TextWrapping="Wrap"> dwd kwdh wkd wkd wkd wkjd hwkdjhw kdw dkw k</TextBlock>
            <TextBlock TextWrapping="Wrap"> dwd kwdh wkd wkd wkd wkjd hwkdjdwd kwdh wkd wkd wkd wkjd hwkdjhw kdw dkw k</TextBlock>
        </StackPanel>
    </Grid>

Answer 1

Damn; I landed here looking for an answer for just that question.

Best I can do is bind the MaxWidth of the TextBlock to the size of the TreeView, and provide an offset. Try this XAML for a (WPF) TreeView, and get rid of that enclosing StackPanel:

    <TreeView>
        <TreeViewItem>

            <TreeViewItem.Header>
                <TextBlock
                    Text="Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat "
                    Background="Azure"
                    TextWrapping="Wrap"
                    MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeView}}, Path=ActualWidth, Converter={StaticResource ValueSubtractor}, ConverterParameter=30}"
                />
            </TreeViewItem.Header>

            <TextBlock
                Text="Faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu suscipit torquent ultrices"
                Background="#FFBDBDE6"
                TextWrapping="Wrap"
                MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeView}}, Path=ActualWidth, Converter={StaticResource ValueSubtractor}, ConverterParameter=50}"
            />

            <TextBlock
                Text="Placerat pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum dictumst"
                Background="#FF9090E0"
                TextWrapping="Wrap"
                MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeView}}, Path=ActualWidth, Converter={StaticResource ValueSubtractor}, ConverterParameter=50}"
            />

        </TreeViewItem>
    </TreeView>

You'll need to write a value converter that performs the offset, and make sure the offsets for each level of the tree are suffieciently large so that the horizontal scrollbar doesn't appear when your sliding the splitter around.

One issue I have with this technique is when I try this same binding for the MaxWidth on a HiearchicalDataTemplate, Blend 3 complains that the XAML is invalid and I get red squigglies. It still runs of course, but I look forward to a XAML parser update for Blend!