Silverlight：ScrollViewer 中的 GridSplitter 行为异常

Question

我正在尝试构建一个两列布局，其中列的宽度可以通过使用拆分器来更改。调整浏览器窗口大小时，右列的宽度不应改变（它不应与网格宽度成比例）。两列都应具有最小宽度。当浏览器窗口太窄而无法显示两列时，应该会出现滚动条。

这是我的 XAML：

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <Grid Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="300" Width="300*" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="100" Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
            <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
            <Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
        </Grid>
    </ScrollViewer>
</Grid>

我遇到的问题是当拆分器被拖到左边并且达到左列的最小宽度时 - 右列开始非常迅速地增长并且出现滚动条。从右列中删除宽度设置消除了奇怪的行为，但现在右列在调整窗口大小时开始按比例增长......

我希望拆分器的行为与向右拖动时相同 - 我希望它在达到最小宽度后停止。

Answer 1

您应该禁用“Horizo​​ntalScrollBarVisibility”。 这段代码对我有用：

 <Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled">
        <Grid Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="300" Width="300*" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="100" Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
            <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
            <Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
        </Grid>
    </ScrollViewer>
</Grid>

ScrollViewer 为网格提供了无限的增长空间。因此 minWidth 永远不会停止它。 显然不需要垂直和水平禁用的 ScrollViewer。最好在每列内容周围的网格内移动滚动条。

Answer 2

我想我终于能够想出一个解决方法。当布局发生变化时，我在代码隐藏中强制宽度。

XAML：

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer x:Name="Scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <Grid x:Name="Workspace" Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top" LayoutUpdated="Workspace_LayoutUpdated">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="300" Width="300*" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="100" Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
            <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
            <Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
        </Grid>
    </ScrollViewer>
</Grid>

后面的代码：

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void Workspace_LayoutUpdated(object sender, EventArgs e)
    {
        Workspace.Width = Scroller.ViewportWidth - 1;
    }

}

Answer 3

这样做的原因是您已用星号指定了第一列Width="300*"， 第三列Width="100"没有星号。

只需在第一列和第三列加上星号，或者分别删除，它就会按照您的意愿工作。