WPF TreeViewItem 控件模板的高度未折叠

Question

我有一个问题，我已经尝试解决了一个星期，不仅广泛尝试解决这个问题，而且在 StackOverFlow 和其他网站上就如何解决这个问题进行了大量研究。需要明确的是，我已经学习 WPF 大约 3 个月左右，并且来自 WinForms，并且仍处于学习阶段。

这是我的问题。

我有一个要添加到 TreeView 控件的 TreeViewItems。这些 TreeView 项目使用创建自定义外观的样式，我试图完成这几乎是整个应用程序的外观和感觉。 Style 使用针对 Template 属性的显式 Setter.Value 来创建 TreeView 项的自定义外观。它有自己的自定义扩展箭头、绑定到 TreeViewItem 标头的 TextBlock 标头，当然还有一个 ContentPresenter 和一个 ItemsPresenter。还有一个连接到 TreeViewItem 的 IsExpanded 值的触发器，以便在展开或折叠 TreeViewItem 时可以显示或隐藏 ItemsPresenter。除了折叠和展开部分外，一切正常。当然，ItemsPresenter 隐藏和显示应该是这样，但是当 IsExpanded 为 false 时，TreeViewItem 本身实际上并没有折叠它的高度。为了说明我的意思，这里有两张图片来说明发生了什么。我在样式模板中的网格周围添加了一个绿色边框，以表明单个 TreeViewItem 本身在折叠时不会缩小其“高度”。

展开

Pic of expanded tree view item

折叠

Pic of collapsed tree view item

如您所见，绿色边框或树视图项目本身在折叠时与展开时的高度相同。这是用于创建 TreeViewItem 自身的自定义样式的 XAML。

TreeViewItem 样式 XAML 代码：

<Style x:Key="TreeViewItemStyle" TargetType="TreeViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TreeViewItem">
                <Border x:Name="MyBorder" BorderThickness="1" BorderBrush="LawnGreen">
                    <Grid HorizontalAlignment="Left" ShowGridLines="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="25"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20"></ColumnDefinition>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <ui:TreeViewItemExpander x:Name="TreeViewItemExpander" Grid.Row="0" Grid.Column="0" IsPointingDown="{TemplateBinding IsExpanded}"/>

                        <!--This represents the text for the tree view item itself-->
                        <TextBlock Text="{TemplateBinding Header}" Grid.Row ="0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White"/>

                        <ContentPresenter x:Name="ContentPresenter" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top"/>

                        <ItemsPresenter x:Name="ItemsPresenter" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Visibility="Hidden"/>
                    </Grid>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="True">
                        <Setter TargetName="ItemsPresenter" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

下面这段代码是我使用样式的方式

        <TreeView Style="{StaticResource TreeViewStyle}" Width="200" Margin="419,337,19,328">
        <controls:CustomTreeViewItem Header="Folder 1" Style="{StaticResource TreeViewItemStyle}">
            <Button Content="Item 1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="20"/>
            <Button Content="Item 2" HorizontalAlignment="Left" VerticalAlignment="Top" Height="20"/>
        </controls:CustomTreeViewItem>
    </TreeView>

感谢任何人提供的任何意见或帮助。我希望我已经足够清楚了。

Answer 1

我想通了。我所做的只是在 IsExpanded 触发器中添加一个设置器来设置 ItemsPresenter 所在的网格行的属性。我所做的只是将行的高度设置为 0，这实际上隐藏了项目。这是应用了更改的上述代码中的触发器本身的代码。

                            <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="True">
                                <Setter TargetName="Items" Property="Visibility" Value="Visible"/>
                                <Setter TargetName="ItemsRow" Property="Height" Value="0"/>
                            </Trigger>
                        </ControlTemplate.Triggers>

如果其他人有更好的解决方案，我很感兴趣。在我弄清楚这一点之后，我想到了对行的高度进行动画处理，直到它为 0 以提供更好的效果，但没有成功。我发现 StoryBoard 是可冻结的，并且在 Style 或 ControlTemplate 中时会被冻结。这意味着如果您希望它具有动画效果，那么项目折叠的动画将必须在后面的代码中实现，或者在每个 TreeViewItem 上单独实现？我确信有更好的方法。如果我知道如何做到这一点，我会更新这篇文章供大家参考。请随时在此帖子中添加更好的解决方案！