制作TreeViewItem包装的一部分

2024-02-18 16:59:16

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

我已经尝试了一些在Stack Overflow上发现的东西,但是没有运气.我发现了三个建议：

>将项目放在带有绑定到TreeView实际宽度的列的网格中.这在下面的XAML中实现,但似乎无济于事.
>使用ScrollViewer.HorizontalScrollBarVisibility =“ Disabled”禁用TreeView上的水平滚动,我也在下面的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的组成方式：

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

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

这是TreeView的定义：

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

我感觉自己在做一些简单的错误,但是我不确定该怎么做.有没有一种方法可以不将TextBlock宽度锁定为任意值(例如200)而完成此操作？

解决方法:

我的调查显示,TextBlock Wrap无法与< ColumnDefinition Width =“ Auto” />一起使用.所以我改变了最后的< ColumnDefinition Width =“ Auto” />在DataTemplate中更改为< 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”是重要元素,应进行设置.

码农公寓

相关文章