如何在 WPF TreeViewItem 中进行文本换行? [英] How to make text wrap in a WPF TreeViewItem?

问题描述

这一次，我的问题听起来很简单……你如何让文本包裹在 WPF TreeViewItem 中?

我有一个简单的 HierarchicalDataTemplate，其中只有一个 TextBlock.

文本不换行.

我尝试将 TextBlock 的 Width 绑定到 TreeView 的 ActualWidth，但尽管这使得文本换行，TreeViewItem 的 Width 不适合 TreeView，因为 TreeView 有 填充.绑定到 TreeViewItem 的 ActualWidth 具有(不出所料)相同的效果.另一个缺点是，即使文本很少的项目也会超出 TreeView 边界.

当然必须有更好的方法，比如以某种方式通知 TreeViewItem TreeView 的边界......我不敢相信它不会自动知道.但是我该怎么做呢?

更新 >>>

感谢 HB 的回答，我设法将 Bd Border 他在 Grid.ColumnSpan 上的 Grid.ColumnSpan 更改为 2code>ControlTemplate 并设置宽度，以便文本现在可以很好地换行.问题是我将此 ControlTemplate 用于其他 TreeView 中的其他 TreeViewItem，我不想要全宽项目.>

我想出的解决方案很简单.我已将 TreeViewItem.Tag 值绑定到 ControlTemplate 中的 Grid.ColumnSpan 属性，如下所示:

这允许我通过设置 TreeViewItem.Tag 来更改 Grid.ColumnSpan 以及 TreeViewItem 的全宽或普通宽度行为> 值分别为 2 或 1.

解决方案

如果你看看 TreeViewItems 的默认模板 你会看到这样的网格:

<Grid.ColumnDefinitions><ColumnDefinition MinWidth="19"宽度=自动"/><ColumnDefinition Width="自动"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><!-- ... -->

如您所见，第三列占用了所有可用空间，而其他列在 Auto 上，标题位于边框内的第二列中:

这意味着该列将变得与标题一样大，对此没有限制.因此，标题只会变得比 TreeView 本身更大.

如果你把 Grid.ColumnSpan="2" 添加到这个边框，它也会占据第三列，这受剩余空间的限制，因此文本将换行；然而，这会将标题扩展到整个宽度，这在选择它时可能看起来有点奇怪.

当然，您还需要禁用水平滚动:

This time, my question is as simple as it sounds... how do you get text to wrap in a WPF TreeViewItem?

I have a simple HierarchicalDataTemplate with just one TextBlock in it.

<TextBlock Text="{Binding Value}" TextWrapping="Wrap" />

The text does not wrap.

I tried binding the Width of the TextBlock to the ActualWidth of the TreeView, but although that makes the text wrap, the Width of the TreeViewItem does not fit in the TreeView because the TreeView has Padding. Binding to the ActualWidth of the TreeViewItem has (unsurprisingly) the same effect. Another downside to this is that even the items with little text stretch outside the TreeView bounds.

<TextBlock Text="{Binding Value}" TextWrapping="Wrap" Width="{Binding ActualWidth, 
ElementName=TreeView}" />

Surely there must be a better way, like somehow informing the TreeViewItem of the TreeView's bounds... I can't believe it doesn't know automatically. But how can I do this?

UPDATE >>>

Thanks to H.B.'s answer, I managed to change the Grid.ColumnSpan to 2 on the Bd Border he mentioned in the ControlTemplate and it set the width so that the text now wraps nicely. The problem is that I am using this ControlTemplate for other TreeViewItems in other TreeViews where I don't want full width items.

The solution I came up with is simple. I have bound the TreeViewItem.Tag value to the Grid.ColumnSpan property in the ControlTemplate like so:

<Border Grid.ColumnSpan="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" 
Name="Bd" Grid.Column="1" ... />

This allows me to change the Grid.ColumnSpan and therefore the full width or ordinary width behaviour of the TreeViewItem by setting the TreeViewItem.Tag value to either 2 or 1 respectively.

解决方案

If you look at the default template of TreeViewItems you will see a Grid like this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="19"
                          Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- ... -->

As you can see the third column takes all available space while the others are on Auto, the header is placed in the second column inside a border:

<Border Name="Bd"
        Grid.Column="1"
        ...

This means that the column will become as large as the header, there is no restriction on it. Thus the header just gets bigger than the TreeView itself.

If you add Grid.ColumnSpan="2" to this Border it will occupy the third column as well, which is restricted by how much space is left, hence the text will wrap; this will however extend the header across the whole width which might look a bit odd when selecting it.

Of course you will also need to disable horizontal scrolling:

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...

这篇关于如何在 WPF TreeViewItem 中进行文本换行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！