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？

已经尝试过以下链接而没有任何运气。

Answer 1

您可以尝试设置TreeviewItem的宽度，以获取拥有树视图或treeView本身的控件的实际宽度

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>

如果您希望能够动态执行此操作，则可以处理Loaded中TextBlock的{{1}}事件，并根据级别计算HierarchicalDataTemplate Margin容器。像这样：

TreeViewItem

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

在Treeview中包装TreeviewItem的TextBlock内容

2 个答案: