网格内的树视图和比例大小答案

【问题标题】：Treeview inside grid and proportional size网格内的树视图和比例大小
【发布时间】：2013-02-13 16:13:43
【问题描述】：

我正在使用一个 Grid 的 WPF 应用程序，在网格内部有几个 TreeViews：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Text="Header"/>
    <TreeView x:Name="Tree1"" Grid.Row="2"/>
    <TextBlock Text="SecondHeader" Grid.Row="2"/>
    <TreeView x:Name="Tree2" Grid.Row="3"/>
</Grid>

使用此设置，标题的大小将与 Grid 的大小成比例。

当我有一棵较小的树时会出现问题，并且两棵树之间有一个空白区域，如果第一棵树是空的，它也会占据网格的一半。

如果我把代码改成这样：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Text="Header"/>
    <TreeView x:Name="Tree1"" Grid.Row="2"/>
    <TextBlock Text="SecondHeader" Grid.Row="2"/>
    <TreeView x:Name="Tree2" Grid.Row="3"/>
</Grid>

我得到了与我想要的非常相似的结果，但在这种情况下，树的滚动条不会显示，因为树会占据它们需要的所有区域，并且会溢出我的网格。

如果我将第二个解决方案包含在滚动查看器中，我将获得整个网格的通用滚动：

<ScrollViewer><Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Text="Header"/>
    <TreeView x:Name="Tree1"" Grid.Row="2"/>
    <TextBlock Text="SecondHeader" Grid.Row="2"/>
    <TreeView x:Name="Tree2" Grid.Row="3"/>
</Grid></ScrollViewer>

此解决方案的问题是：如果第一棵树足够长，除非向下滚动，否则用户将看不到第二棵树，并且要求两棵树始终可见。

恢复我需要具有以下功能的设置：

在网格内显示两个树视图
这些树形视图必须有自己的滚动条
如果其中一个树视图没有元素，则不应存在间隙。

有什么想法吗？

【问题讨论】：

标签： c# wpf

【解决方案1】：

也许这是您需要的 1 和 2 功能的解决方案：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" MinHeight="131"/>
        <RowDefinition Height="auto" MinHeight="171"/>
    </Grid.RowDefinitions>
    <TreeView x:Name="Tree1" Grid.Row="0"  HorizontalAlignment="Left" Height="100">
        <TreeViewItem Header="Header">
            <TreeViewItem Header="item 1"></TreeViewItem>
            <TreeViewItem Header="item 2"></TreeViewItem>
            <TreeViewItem Header="item 3"></TreeViewItem>
            <TreeViewItem Header="item 4"></TreeViewItem>
            <TreeViewItem Header="item 5"></TreeViewItem>
            <TreeViewItem Header="item 6"></TreeViewItem>
            <TreeViewItem Header="item 7"></TreeViewItem>
            <TreeViewItem Header="item 8"></TreeViewItem>
            <TreeViewItem Header="item 9"></TreeViewItem>
            <TreeViewItem Header="item 10"></TreeViewItem>
            <TreeViewItem Header="item 11"></TreeViewItem>
            <TreeViewItem Header="item 12"></TreeViewItem>
        </TreeViewItem>
    </TreeView>
        <TreeView x:Name="Tree2"  Grid.Row="1" Margin="0,20,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="100">
        <TreeViewItem Header="SecondHeader">
            <TreeViewItem Header="item 1"></TreeViewItem>
            <TreeViewItem Header="item 2"></TreeViewItem>
            <TreeViewItem Header="item 3"></TreeViewItem>
            <TreeViewItem Header="item 4"></TreeViewItem>
            <TreeViewItem Header="item 5"></TreeViewItem>
            <TreeViewItem Header="item 6"></TreeViewItem>
            <TreeViewItem Header="item 7"></TreeViewItem>
            <TreeViewItem Header="item 8"></TreeViewItem>
            <TreeViewItem Header="item 9"></TreeViewItem>
            <TreeViewItem Header="item 10"></TreeViewItem>
            <TreeViewItem Header="item 11"></TreeViewItem>
            <TreeViewItem Header="item 12"></TreeViewItem>
        </TreeViewItem>
    </TreeView>
</Grid>

TreeView 控制器有一个 Scrollable 属性，但是要启用这个属性，TreeView 或其容器需要有一个高度。

这样，您可以在同一个 Grid 中看到两个 TreeView，并且每个控制器都有自己的 ScrollBar。

【讨论】：