WPF TreeViewItem控件模板的高度不塌陷

问题描述：

我有一个问题，我一直试图解决一个星期，不仅玩弄周围广泛试图弄清楚，但已经做了大量的关于如何在*和其他网站上的研究解决这个问题。为了清楚起见，我一直在学习WPF约3个月，来自WinForms，我仍然处于学习阶段。WPF TreeViewItem控件模板的高度不塌陷

这是我的问题。

我有一个TreeViewItems，我将添加到TreeView控件。这些TreeView项目使用一种Style创建自定义外观，我试图完成这几乎是整个应用程序的外观和感觉。样式使用一个明确的Setter.Value来对照Template属性来创建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

正如你可以看到，绿色边界，或TreeView项本身仍然是相同的高度时，倒塌，因为它是在展开时。以下是用于创建TreeViewItem自身的自定义样式的XAML。

树型视图风格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>

感谢任何输入或帮助，任何人都可以提供。我希望我很清楚。

@Emmanuel DURIN感谢您的编辑。我是新来张贴在*。 –

欢迎您。你的文章质量相当好 - 即使它很长 - 阅读起来仍然很舒服（图片，代码片段，段落，英文良好）。 –

答

我想通了。我所做的只是在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是可冻结的，并且在Style或ControlTemplate内冻结。这意味着如果你想让它变成动画，那么项目崩溃的动画必须用后面的代码或每个TreeViewItem单独实现？我相信有更好的方法。如果我发现如何做到这一点，我会更新这篇文章，供大家参考。请随时添加到这个职位上更好的解决方案！

WPF TreeViewItem控件模板的高度不塌陷

相关推荐