带有拉伸的 TreeViewItem [英] TreeViewItem With Stretch

问题描述

我想创建一个 WPF TreeView，其中包含拉伸以填充可用空间的 TreeViewItem.我使用它作为指南修改了 TreeViewItem 模板:https://social.msdn.microsoft.com/Forums/vstudio/en-US/cabcb3ba-80c0-4367-85b7-9b55adc81e65/stretch-treeview-items?forum=wpf 并且这很有效，因为我希望右侧的一个字符网格组件右对齐并且长 TextBlock 占用可用空间 - 请参阅下面的代码，其中一个 TreeViewItems 的标题是一个网格.

I want to create a WPF TreeView that contains TreeViewItems that stretch to fill the available space. I modified the TreeViewItem template using this as a guide: https://social.msdn.microsoft.com/Forums/vstudio/en-US/cabcb3ba-80c0-4367-85b7-9b55adc81e65/stretch-treeview-items?forum=wpf and this works well as I want the one character grid components on the right hand side to be right aligned and for the long TextBlock to take up the available space - see code below where the header for one of my TreeViewItems is a grid.

但是，当我通过将右侧拖向左侧来调整窗口大小时，当所有网格组件没有足够的空间时，我期待的是带有内容A long, long,..."开始缩小宽度，但右侧的 TextBlock 被右侧窗口边缘切断.

However, when I resize the window by dragging on the right hand side towards the left hand side, when there isn't enough space for all the grid components, I was expecting the long TextBlock with content "A long, long, ..." to start to shrink in width, but instead the TextBlocks on the right hand side get cut off by the right hand side window edge.

如果我创建一个全新的带有网格的示例并将上面提到的网格放在其中一个网格单元格中(本质上是模拟 TreeView 模板中使用的网格)，那么它会按我的预期调整大小:TextBlock 的宽度会缩小当我调整大小时.

If I create a completely new example featuring a grid and put the grid mentioned above inside one of the grid cells (essentially emulating the grid that is used in the TreeView template) then it resizes as I expect: the TextBlock shrinks in width as I resize.

任何想法我可以对 TreeViewItem 模板或我指定的标题进行哪些更改以获得我想要的调整大小行为?

Any ideas what changes I can make to either the TreeViewItem template or the Header I have specified to get the resizing behavior I want?

<Window x:Class="TreeViewSimple3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TreeViewSimple3"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

<Window.Resources>
    <ControlTemplate x:Key="TreeViewItemStretchControlTemplate" TargetType="{x:Type TreeViewItem}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="19" Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}">
                <ToggleButton.Style>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Setter Property="Focusable" Value="False"/>
                        <Setter Property="Width" Value="16"/>
                        <Setter Property="Height" Value="16"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <Border Background="Transparent" Height="16" Padding="5" Width="16">
                                        <Path x:Name="ExpandPath" Data="M0,0 L0,6 L6,0 z" Fill="Transparent" Stroke="#FF989898">
                                            <Path.RenderTransform>
                                                <RotateTransform Angle="135" CenterY="3" CenterX="3"/>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="RenderTransform" TargetName="ExpandPath">
                                                <Setter.Value>
                                                    <RotateTransform Angle="180" CenterY="3" CenterX="3"/>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
                                            <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
                                        </Trigger>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/>
                                            <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/>
                                        </Trigger>
                                        <MultiTrigger>
                                            <MultiTrigger.Conditions>
                                                <Condition Property="IsMouseOver" Value="True"/>
                                                <Condition Property="IsChecked" Value="True"/>
                                            </MultiTrigger.Conditions>
                                            <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
                                            <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
                                        </MultiTrigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>
            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Grid.ColumnSpan="2" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                <ContentPresenter x:Name="PART_Header" ContentSource="Header"
                HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>

            </Border>
            <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="TreeViewItem.IsExpanded" Value="false">
                <Setter TargetName="ItemsHost" Property="UIElement.Visibility" Value="Collapsed"/>
            </Trigger>
            <Trigger Property="ItemsControl.HasItems" Value="false">
                <Setter TargetName="Expander" Property="UIElement.Visibility" Value="Hidden"/>
            </Trigger>
            <Trigger Property="TreeViewItem.IsSelected" Value="true">
                <Setter TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
                    Property="Border.Background"/>
                <Setter Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"
                    Property="Control.Foreground"/>
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="TreeViewItem.IsSelected" Value="true"/>
                    <Condition Property="TreeViewItem.IsSelectionActive" Value="false"/>
                </MultiTrigger.Conditions>
                <Setter TargetName="Bd"
                    Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"
                    Property="Border.Background"/>
                <Setter Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"
                    Property="Control.Foreground"/>
            </MultiTrigger>
            <Trigger Property="UIElement.IsEnabled" Value="false">
                <Setter Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" Property="Control.Foreground"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

<TreeView>
    <TreeViewItem Header="Parent" Template="{StaticResource TreeViewItemStretchControlTemplate}" HorizontalContentAlignment="Stretch">
        <TreeViewItem Template="{StaticResource TreeViewItemStretchControlTemplate}" HorizontalContentAlignment="Stretch">
            <TreeViewItem.Header>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="A long, long, long, long, long, long, long label."/>
                    <StackPanel Grid.Column="1" Orientation="Horizontal">
                        <TextBlock Text="A"/>
                        <TextBlock Text="B"/>
                        <TextBlock Text="C"/>
                        <TextBlock Text="D"/>
                    </StackPanel>
                </Grid>
            </TreeViewItem.Header>
        </TreeViewItem>
    </TreeViewItem>
</TreeView>

推荐答案

当我尝试代码示例并减小窗口大小时，TreeView 显示水平滚动条(因为它的模板中不仅有 Grid，还有 ScrollViewer)

When I try code sample and reduce window size, TreeView shows horizontal scrollbar (because it has not only Grid but also ScrollViewer in its template)

尝试以下设置:

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 

禁用滚动

<TextBlock TextWrapping="Wrap" Grid.Column="0" ...> 

启用自动换行.

这篇关于带有拉伸的 TreeViewItem的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！