制作TreeViewItem包装的一部分 [英] Making a portion of a TreeViewItem wrap

问题描述

我有一个 TreeViewItem ，其中包含多个部分-图标，标题和一段数据.我试图在不包装所有东西的情况下包装最后一部分，但我没有运气.这是问题的说明:

我尝试了一些在Stack Overflow上发现的事情，但是没有运气.我发现了三个建议:

1. 将项目放置在带有一列的网格中，该列绑定到 TreeView 的实际宽度.这是在下面的XAML中实现的，但似乎无济于事.

2. 使用 ScrollViewer.Horizo​​ntalScrollBarVisibility ="Disabled" 禁用 TreeView 上的水平滚动，我也在下面的XAML中实现了此功能.

3. 将我需要的东西包装在 WrapPanel 中.我试过了，但是结果很差.当我将整个 TreeViewItem 打包成一个包时，我得到了难以控制的打包(整个项目都被打包了，所以所有部分都被打包了，看起来很糟糕).当我只将所需的 TextBlock 包裹在一个包裹中时，我什么都没有.所以我把它拿出来了.

这里是 TreeViewItem 的模板:

 < DataTemplate x:Key ="BasicPropertyTemplate" DataType ="{x:Type json:JProperty}"><网格>< Grid.ColumnDefinitions>< ColumnDefinition Width ="{Binding RelativeSource = {RelativeSource AncestorType = TreeView}，Path = ActualWidth}"/></Grid.ColumnDefinitions><网格>< Grid.ColumnDefinitions>< ColumnDefinition Width ="16"/>< ColumnDefinition Width ="3"/>< ColumnDefinition Width ="Auto"/>< ColumnDefinition Width ="3"/>< ColumnDefinition Width ="Auto"/>< ColumnDefinition Width ="3"/>< ColumnDefinition Width ="Auto"/></Grid.ColumnDefinitions><边框宽度="12"身高="12"Horizo​​ntalAlignment ="Center"VerticalAlignment ="Center"Background ="{Binding Converter = {StaticResource TypeToColorConverter}，ConverterParameter ='Interior'}"BorderBrush ="{绑定转换器= {StaticResource TypeToColorConverter}}"BorderThickness ="1"/>< TextBlock Grid.Column ="2" Text ="{Binding Name，Mode = OneWay}"/>< TextBlock Grid.Column ="4" Text =:"/>< TextBlockGrid.Column ="6"文字="{绑定值，转换器= {StaticResource StringFormatConverter}，模式= OneWay}"TextWrapping ="Wrap"/></Grid></Grid></DataTemplate> 

下面是布局的说明，因此您可以看到 TreeViewItem 的组成方式:

本质上，灰色部分是图标，绿色部分只是项目之间的分隔符，蓝色部分是标题和冒号(本质上与这个问题无关)，红色部分是实际的内容./p>

这是我要包裹的红色部分.

这是 TreeView 的定义:

 < TreeViewx:Name ="JsonRoot"Grid.Column ="0"ItemTemplateSelector ="{StaticResource TreeViewTemplateSelector}"Loaded ="JsonRoot_Loaded"ScrollViewer.Horizo​​ntalScrollBarVisibility ="Disabled"VirtualizingStackPanel.IsVirtualizing ="True"/> 

我感觉自己在做一些简单的错误，但是我不确定该怎么做.有没有一种方法可以不将 TextBlock 宽度锁定为任意值，例如200?

解决方案

我的调查显示，TextBlock Wrap无法与< ColumnDefinition Width ="Auto"/> 一起使用.因此，我将DataTemplate中的最后一个< ColumnDefinition Width ="Auto"/> 更改为< ColumnDefinition Width ="*"/> .

不幸的是，TreeViewItem(这是TreeView项的默认容器)在其模板中具有< ColumnDefinition Width ="Auto"/> 并将我们的项放置在那里.我尝试使用< ColumnDefinition Width ="*"/> 创建一个自定义模板，它可以正常工作，但是代码确实很长.因此，我决定通过绑定网格宽度来补偿效果:

 < DataTemplate x:Key ="BasicPropertyTemplate" DataType ="{x:Type json:JProperty}">< Grid Width ="{Binding RelativeSource = {RelativeSource AncestorType = TreeViewItem}，Path = ActualWidth}">< Grid Margin ="0,0,20,0"><！-右边距以补偿过多的宽度->< Grid.ColumnDefinitions>< ColumnDefinition Width ="16"/>< ColumnDefinition Width ="3"/>< ColumnDefinition Width ="Auto"/>< ColumnDefinition Width ="3"/>< ColumnDefinition Width ="Auto"/>< ColumnDefinition Width ="3"/>< ColumnDefinition Width ="*"/><！-是Auto-></Grid.ColumnDefinitions><边框宽度="12"身高="12"Horizo​​ntalAlignment ="Center"VerticalAlignment ="Center"Background ="{Binding Converter = {StaticResource TypeToColorConverter}，ConverterParameter ='Interior'}"BorderBrush ="{绑定转换器= {StaticResource TypeToColorConverter}}"BorderThickness ="1"/>< TextBlock Grid.Column ="2" Text ="{Binding Name，Mode = OneWay}"/>< TextBlock Grid.Column ="4" Text =:"/>< TextBlockGrid.Column ="6"文字="{绑定值，转换器= {StaticResource StringFormatConverter}，模式= OneWay}"TextWrapping ="Wrap"/></Grid></Grid></DataTemplate> 

ScrollViewer.Horizo​​ntalScrollBarVisibility ="Disabled" 是重要元素，应进行设置.

I have a TreeViewItem that has multiple parts in it -- an icon, a header, and a piece of data. I'm trying to get the last part to wrap without making everything wrap, and I'm having no luck. Here's an illustration of the problem:

I've tried a few things that I've found on Stack Overflow, with no luck. There were three suggestions I found:

1. Put the item in a grid with a column with bound to the TreeView's actual width. This is implemented in the XAML below, but doesn't seem to help.

2. Disable horizontal scrolling on the TreeView with ScrollViewer.HorizontalScrollBarVisibility = "Disabled", which I also implemented in the XAML below.

3. Wrap what I need in a WrapPanel. I tried this, but got poor results. When I wrapped the whole TreeViewItem in one, I got wrapping that was hard to control (the whole item wraps, so all parts wrapped and it looked awful). When I wrapped just the desired TextBlock in one, I got no results at all. So I took it out.

Here's the template I have for the TreeViewItem:

<DataTemplate x:Key="BasicPropertyTemplate" DataType="{x:Type json:JProperty}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}" />
        </Grid.ColumnDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="16" />
                <ColumnDefinition Width="3" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="3" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="3" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Border
                Width="12"
                Height="12"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Background="{Binding Converter={StaticResource TypeToColorConverter}, ConverterParameter='Interior'}"
                BorderBrush="{Binding Converter={StaticResource TypeToColorConverter}}"
                BorderThickness="1" />
            <TextBlock Grid.Column="2" Text="{Binding Name, Mode=OneWay}" />
            <TextBlock Grid.Column="4" Text=": " />
            <TextBlock
                Grid.Column="6"
                Text="{Binding Value, Converter={StaticResource StringFormatConverter}, Mode=OneWay}"
                TextWrapping="Wrap" />
        </Grid>
    </Grid>
</DataTemplate>

Here's an illustration of the layout, so you can see how the TreeViewItem is composed:

Essentially, the gray part is the icon, the green parts are just spacers between items, the blue parts are header and a colon (essentially irrelevant to what this question is about), and the red part is the actual content.

It's the red part I want to wrap.

Here's the TreeView definition:

<TreeView
    x:Name="JsonRoot"
    Grid.Column="0"
    ItemTemplateSelector="{StaticResource TreeViewTemplateSelector}"
    Loaded="JsonRoot_Loaded"
    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    VirtualizingStackPanel.IsVirtualizing="True" />

I feel like I'm doing something simple wrong, but I'm not sure what. Is there a way to accomplish this without just locking the TextBlock width to something arbitrary, like 200?

解决方案

My investigation showed that TextBlock Wrap doesn't work with <ColumnDefinition Width="Auto"/>. So I changed last <ColumnDefinition Width="Auto"/> in DataTemplate to <ColumnDefinition Width="*"/>.

Unfortunately TreeViewItem (which is a default container for TreeView items) has <ColumnDefinition Width="Auto"/> in its Template and places our items there. I have tried to make a custom template with <ColumnDefinition Width="*"/> and it worked but code is really long. So I decided to compensate the effect by binding Grid width:

<DataTemplate x:Key="BasicPropertyTemplate" DataType="{x:Type json:JProperty}">
    <Grid Width="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=ActualWidth}" >
        <Grid Margin="0,0,20,0"> <!--right margin to compensate excessive width-->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="16" />
                <ColumnDefinition Width="3" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="3" />
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="3" />
                <ColumnDefinition Width="*"/> <!--was Auto-->
            </Grid.ColumnDefinitions>
        <Border
            Width="12"
            Height="12"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Background="{Binding Converter={StaticResource TypeToColorConverter}, ConverterParameter='Interior'}"
            BorderBrush="{Binding Converter={StaticResource TypeToColorConverter}}"
            BorderThickness="1" />
        <TextBlock Grid.Column="2" Text="{Binding Name, Mode=OneWay}" />
        <TextBlock Grid.Column="4" Text=": " />
        <TextBlock
            Grid.Column="6"
            Text="{Binding Value, Converter={StaticResource StringFormatConverter}, Mode=OneWay}"
            TextWrapping="Wrap" />
        </Grid>
    </Grid>
</DataTemplate>

ScrollViewer.HorizontalScrollBarVisibility="Disabled" is important element and should be set.

这篇关于制作TreeViewItem包装的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！