WPF TreeViewItem控制模板高度不塌陷

Question

我有一个问题，我一直试图解决一个星期，不仅广泛发挥，试图找出这一点，并做了许多研究StackOverFlow和其他网站如何解决这个问题。要明确的是，我已经学习了大约3个月左右的WPF，来自WinForms，目前还处于学习阶段。

这是我的问题。

我有一个TreeViewItems，我要添加到TreeView控件中。这些TreeView项使用的样式创建了一个自定义外观，我正试图实现这一点，这几乎就是整个应用程序的外观。样式对模板属性使用显式Setter.Value来创建TreeView项的自定义外观。它有自己的自定义扩展箭头，TextBlock头绑定到TreeViewItem头，当然还有ContentPresenter和ItemsPresenter。还有一个触发器连接到TreeViewItem的IsExpanded值，这样在展开或折叠ItemsPresenter时就可以显示或隐藏TreeViewItem。一切正常运转，除了坍塌和膨胀部分。当然，ItemsPresenter隐藏并显示它应该做的事情，但是当TreeViewItem本身是假的时候，IsExpanded本身并不会折叠它的高度。为了说明我的意思，这里有两张图片来说明正在发生的事情。我在样式模板中在网格周围添加了绿色边框，以表明单个TreeViewItem本身在崩溃时没有缩小其“高度”。

扩容

扩展树视图项的Pic

塌陷

折叠树视图项的Pic

如您所见，绿色边框或treeview项目本身在折叠时与展开时的高度相同。下面是用于创建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触发器中添加一个setter来设置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才能产生更好的效果，但是没有成功。我发现StoryBoards是可冻结的，并且在样式或ControlTemplate内部被冻结。这意味着，如果您希望它是动画，那么项目崩溃的动画必须用后面的代码来实现，或者在每个TreeViewItem上单独实现？我相信还有更好的办法。如果我找到了如何做到这一点，我将更新这篇文章供大家参考。请随意添加到这篇文章上一个更好的解决方案！！