在 Treeview 中包装 TreeviewItem 的 TextBlock 内容

Question

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

这是我正在使用的示例代码 sn-p

   <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>

如果您希望能够动态执行此操作，您可以在HierarchicalDataTemplate 中处理TextBlock 的Loaded 事件，并根据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 的宽度，以获取拥有树视图或树视图本身的控件的实际宽度

在xml中：

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