在树状视图中包装TreeviewItem的TextBlock内容

我试图在没有水平滚动条的情况下将项目内容包装到Treeview上仍未找到最佳解决方案。在树状视图中包装TreeviewItem的TextBlock内容

这里是我与

<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？

已经尝试了以下链接，没有任何运气。

来源

2017-06-20 Gopichandar

见CodeProject上的例子。这个例子使用组合框，但你可以把一个文本框，而不是：https://www.codeproject.com/Articles/14544/A-TreeView-Control-with-ComboBox-Dropdown-Nodes – jdweng

你可以尝试设置树型视图的宽度得到的是自己的树视图或树形视图本身

控制的实际宽度xaml：

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

来源

2017-06-20 08:24:06

我已经这样做在我的解决方案'TreeviewItem'有一些缩进，导致视图中的内容丢失。请参考图像 – Gopichandar

问题是偏移量。我唯一能想到的其他方法就是将控件更改为列表视图，即重新设置树视图的模板并由您自己设置偏移量。这样做可以知道哪些是完全可用的空间，并且您可以在视图模型（或代码背后）中评估它。然后，您只需将宽度绑定到该值即可。 –

这几乎就像重新发明轮子。让我试着做一个Listview控件。非常感谢您的努力。 – Gopichandar

每个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); 
}

来源

2017-06-20 09:30:59 mm8

右边距是一个很好的解决方法。我没有想过。非常感谢。 – Gopichandar

不客气，但请记住加快答案，并接受它，如果你的问题已经解决。 – mm8

在树状视图中包装TreeviewItem的TextBlock内容

回答

相关问题