Question

我有一个TreeViewItem，里面有多个部分 - 图标，标题和一段数据。我试图把最后一部分包裹起来，而不是把所有东西都包起来，而我没有运气。以下是问题的说明：

我尝试了一些我在Stack Overflow上发现的东西，没有运气。我找到了三条建议：

将项目放在一个网格中，其中一列绑定到TreeView的实际宽度。这在下面的XAML中实现，但似乎没有帮助。
使用TreeView禁用ScrollViewer.HorizontalScrollBarVisibility = "Disabled"上的水平滚动，我也在下面的XAML中实现。
在WrapPanel中包含我需要的内容。我尝试了这个，但结果不佳。当我将整个TreeViewItem包裹在一起时，我得到了难以控制的包装（整个项目包裹，所以所有部分都包裹起来，看起来很糟糕）。当我将所需的TextBlock包裹在一起时，我根本没有得到任何结果。所以我把它拿出来了。

以下是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>

以下是布局的图示，因此您可以看到TreeViewItem的组成方式：

基本上，灰色部分是图标，绿色部分只是项目之间的间隔，蓝色部分是标题和冒号（基本上与此问题无关），红色部分是实际内容。 / p>

这是我要包装的红色部分。

以下是TreeView定义：

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

我觉得我做的事情很简单，但我不确定是什么。有没有办法实现这一点，而不只是将TextBlock宽度锁定为任意的，如200？

Answer 1

我的调查显示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"> <!--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"是重要的元素，应该设置。

Answer 2

尝试使用DockPanel更改DataTemplate中的网格：

<DataTemplate>
    <DockPanel>
        <Border Width="12"
                Height="12"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Background="{Binding Converter={StaticResource TypeToColorConverter}, ConverterParameter='Interior'}"
                BorderBrush="{Binding Converter={StaticResource TypeToColorConverter}}"
                BorderThickness="1" />
        <TextBlock Text="{Binding Name, Mode=OneWay}" />
        <TextBlock Text=": " />
        <TextBlock Text="{Binding Value, Converter={StaticResource StringFormatConverter}, Mode=OneWay}"
                TextWrapping="Wrap" />
    </DockPanel>
</DataTemplate>

制作TreeViewItem包的一部分

2 个答案: