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

我有一個問題，我一直試圖解決一個星期，不僅玩弄周圍廣泛試圖弄清楚，但已經做了大量的關於如何在StackOverFlow和其他網站上的研究解決這個問題。爲了清楚起見，我一直在學習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>

感謝任何輸入或幫助，任何人都可以提供。我希望我很清楚。

來源

2015-11-04 Calvin Wilkinson

@Emmanuel DURIN感謝您的編輯。我是新來張貼在stackoverflow。 –

歡迎您。你的文章質量相當好 - 即使它很長 - 閱讀起來仍然很舒服（圖片，代碼片段，段落，英文良好）。 –

我想通了。我所做的只是在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單獨實現？我相信有更好的方法。如果我發現如何做到這一點，我會更新這篇文章，供大家參考。請隨時添加到這個職位上更好的解決方案！

來源

2015-11-05 01:00:01

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

回答

相關問題