在Treeview中包装TreeviewItem的TreeviewItem内容

Question

我试图在没有水平滚动条的情况下将项目内容包装在Treeview上，但仍未找到最佳解决方案。

下面是我正在使用的示例代码片段

   <TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <TreeViewItem IsExpanded="True">
            <TreeViewItem.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/>                            
                    </Grid.ColumnDefinitions>
                    <TextBlock TextWrapping="Wrap" Text="Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here " />
                </Grid>
            </TreeViewItem.Header>
            <TreeViewItem>
                <TreeViewItem.Header>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/>                                
                        </Grid.ColumnDefinitions>
                        <TextBlock TextWrapping="Wrap" Text="Level 2.1 Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here " Foreground="Blue" />
                    </Grid>
                </TreeViewItem.Header>
            </TreeViewItem>               
        </TreeViewItem>
    </TreeView>

输出是

​

​

您可以看到内容超过视图。我知道这是因为我们正在设置Treeview宽度，而TreeviewItem有一些缩进，但是如何才能得到TreeviewItem的最佳width

已经尝试了以下链接，没有任何运气。

• How to wrap TextBlock content in TreeView?
• How to make text wrap for a TreeView in wpf
• How to wrap TextBlock content in TreeView?

Answer 1

每个TreeViewItem的最小缩进约为19个DIP --这是默认ControlTemplate中的一个硬编码值--因此您可以为每个级别增加这个值+一些偏移量：

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <TreeViewItem IsExpanded="True">
        <TreeViewItem.Header>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/>
                </Grid.ColumnDefinitions>
                <TextBlock TextWrapping="Wrap" Text="Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here "
                                   Margin="0 0 25 0"/>
            </Grid>
        </TreeViewItem.Header>
        <TreeViewItem>
            <TreeViewItem.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock TextWrapping="Wrap" Text="Level 2.1 Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here " Foreground="Blue"
                                       Margin="0 0 50 0"/>
                </Grid>
            </TreeViewItem.Header>
        </TreeViewItem>
    </TreeViewItem>
</TreeView>

如果您希望能够动态地这样做，可以在Loaded中处理TextBlock的HierarchicalDataTemplate事件，并根据TreeViewItem容器的级别计算Margin。就像这样：

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:YourType}" ItemsSource="{Binding Children}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/>
                </Grid.ColumnDefinitions>
                <TextBlock TextWrapping="Wrap" Text="{Binding Header}" Foreground="Blue" 
                           Loaded="TextBlock_Loaded" />
            </Grid>
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

private void TextBlock_Loaded(object sender, RoutedEventArgs e)
{
    TextBlock textBlock = sender as TextBlock;
    TreeViewItem tvi = FindParent<TreeViewItem>(textBlock);
    ItemsControl parent = ItemsControl.ItemsControlFromItemContainer(tvi);
    int index = 1;
    while (parent != null && parent.GetType() == typeof(TreeViewItem))
    {
        index++;
        parent = ItemsControl.ItemsControlFromItemContainer(parent);
    }

    textBlock.Margin = new Thickness(0, 0, 25 * index, 0);
}

Answer 2

可以尝试设置TreeviewItem的宽度，获取拥有treeview或treeView本身的控件的实际宽度

在xaml中：

 Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TreeView //or x:Type ControlThatOwnTreeView}}, Path=ActualWidth