当与滚动视图和最小宽度一起使用时,网格分隔符的行为不如预期

3
  • 我有一个网格作为背景容器
  • 此网格包含一个可滚动视图器,因此当我向上调整窗口大小时,内容随之扩展,但当我向下调整窗口大小时,在 sv 的内容达到 minWidth 时,滚动条会出现在滚动视图器上
  • 该可滚动视图器包含两列的网格
  • 此网格在每列中都包含一个可滚动视图器,每个可滚动视图器又包含一个网格。
  • 我在第一列上放置了一个网格分隔器,以便可以调整列的大小

免责声明:我知道这不是组织此布局的最佳方式,但事实上,这是我找到的最简单的表示形式,以再现我在更复杂布局中遇到的问题,因此请不要提供重新组织图层的解决方案

以下是 xaml 代码:

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Text Project">

    <!--background grid-->
    <Grid>

        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">

            <!--two columns layout-->
            <Grid MinWidth="600">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                    <Grid MinWidth="200" Background="Red"/>
                </ScrollViewer>

                <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="6"/>

                <ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                    <Grid MinWidth="200" Background="Blue"/>
                </ScrollViewer>
            </Grid>

        </ScrollViewer>

    </Grid>

</Window>

目标如下: - 如果我调整窗口大小,所有内容都会按比例缩放 - 如果我缩小窗口,当达到最小宽度时,顶部滚动条会出现在最上层的滚动视图中,其内容停止缩小(这部分工作正常) - 无论最上层滚动视图的大小如何,我都可以使用网格分隔器调整两个列的大小 - 当我达到一个列的最小宽度时,该列的滚动视图上出现滚动条,并且其内容停止缩小
问题:第二部分从未发生。我得到的是,我可以调整大小,直到达到两个子网格的最小宽度之一,然后网格分隔器停止移动,我无法进一步缩小,滚动条也从未出现。
我注意到,如果我删除最上面的网格及其关联的滚动视图,则可以按预期工作:
<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Text Project">

            <!--two columns layout-->
            <Grid MinWidth="600">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                    <Grid MinWidth="200" Background="Red"/>
                </ScrollViewer>

                <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="6"/>

                <ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                    <Grid MinWidth="200" Background="Blue"/>
                </ScrollViewer>
            </Grid>

</Window>

我不明白把内部网格放入滚动视图为什么会改变网格分隔条和内部滚动视图的行为,所以如果有人知道解决方法,我将不胜感激。


外层的 ScrollViewer 给出了内部不受限制的宽度和高度,因此它使内部的 ScrollViewers 失效。 去掉分隔器,在一个 ScrollViewer 中放置一个单独的 ScrollViewer - 想想看 - 这毫无意义。 - paparazzo
内部 ScrollViewer 的重点实际上是 GridSplitter。如果没有它,我同意它没有意义,但是我所描述的(GridSplitter + 2 个 ScrollViewer,都作为一个更大的 ScrollViewer 的子级)在我看来似乎完全有效。 - David
分割器不会改变任何东西。如果它们都在ScrollViewer内部,则分割器左侧为无限宽度,右侧也是无限宽度。如果ScrollView的宽度是无限的,那么它需要水平滚动什么? - paparazzo
1个回答

8
试着将两列网格的Width绑定到外部ScrollViewerActualWidth,代码如下:
<!--two columns layout-->
<Grid MinWidth="600" Width="{Binding RelativeSource={RelativeSource AncestorType=ScrollViewer}, Path=ActualWidth}">

1
这并没有完全做到我想要的,但足够接近了,我只需要绑定网格的MaxWidth而不是Width。谢谢。 - David

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接