在樹狀視圖中包裝TreeviewItem的TextBlock內容

Question

我試圖在沒有水平滾動條的情況下將項目內容包裝到Treeview上仍未找到最佳解決方案。

這裏是我與

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 
     <TreeViewItem IsExpanded="True"> 
      <TreeViewItem.Header> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/>        
        </Grid.ColumnDefinitions> 
        <TextBlock TextWrapping="Wrap" Text="Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here " /> 
       </Grid> 
      </TreeViewItem.Header> 
      <TreeViewItem> 
       <TreeViewItem.Header> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/>         
         </Grid.ColumnDefinitions> 
         <TextBlock TextWrapping="Wrap" Text="Level 2.1 Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here " Foreground="Blue" /> 
        </Grid> 
       </TreeViewItem.Header> 
      </TreeViewItem>    
     </TreeViewItem> 
    </TreeView> 

工作的示例代碼段和輸出

您可以看到的內容超過視圖。我知道這是因爲我們設置的寬度爲Treeview，而TreeviewItem有一些縮進，但我怎樣才能得到width的最佳TreeviewItem？

已經嘗試了以下鏈接，沒有任何運氣。

• How to wrap TextBlock content in TreeView?
• How to make text wrap for a TreeView in wpf
• How to wrap TextBlock content in TreeView?

Answer 1

你可以嘗試設置樹型視圖的寬度得到的是自己的樹視圖或樹形視圖本身

控制的實際寬度xaml：

Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TreeView //or x:Type ControlThatOwnTreeView}}, Path=ActualWidth 

Answer 2

每個TreeViewItem有大約19 DIP的最小壓痕 - 這是在默認ControlTemplate硬編碼的值 - 這樣你就可以通過這個值增加右緣+每個級別的一些偏差：

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 
    <TreeViewItem IsExpanded="True"> 
     <TreeViewItem.Header> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/> 
       </Grid.ColumnDefinitions> 
       <TextBlock TextWrapping="Wrap" Text="Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here " 
            Margin="0 0 25 0"/> 
      </Grid> 
     </TreeViewItem.Header> 
     <TreeViewItem> 
      <TreeViewItem.Header> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/> 
        </Grid.ColumnDefinitions> 
        <TextBlock TextWrapping="Wrap" Text="Level 2.1 Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here Level 1 (Blue) Some long text over here " Foreground="Blue" 
             Margin="0 0 50 0"/> 
       </Grid> 
      </TreeViewItem.Header> 
     </TreeViewItem> 
    </TreeViewItem> 
</TreeView> 

如果您希望能夠動態執行此操作，您可以根據TreeViewItem容器的級別處理HierarchicalDataTemplate中的TextBlock的Loaded事件並計算Margin。事情是這樣的：

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 
    <TreeView.Resources> 
     <HierarchicalDataTemplate DataType="{x:Type local:YourType}" ItemsSource="{Binding Children}"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}"/> 
       </Grid.ColumnDefinitions> 
       <TextBlock TextWrapping="Wrap" Text="{Binding Header}" Foreground="Blue" 
          Loaded="TextBlock_Loaded" /> 
      </Grid> 
     </HierarchicalDataTemplate> 
    </TreeView.Resources> 
</TreeView> 

---

private void TextBlock_Loaded(object sender, RoutedEventArgs e) 
{ 
    TextBlock textBlock = sender as TextBlock; 
    TreeViewItem tvi = FindParent<TreeViewItem>(textBlock); 
    ItemsControl parent = ItemsControl.ItemsControlFromItemContainer(tvi); 
    int index = 1; 
    while (parent != null && parent.GetType() == typeof(TreeViewItem)) 
    { 
     index++; 
     parent = ItemsControl.ItemsControlFromItemContainer(parent); 
    } 

    textBlock.Margin = new Thickness(0, 0, 25 * index, 0); 
}