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

您应该禁用“HorizontalScrollBarVisibility”。这段代码适合我：

 <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" 没有星号。

只需将星号放在第一列和第三列，或分别删除，它就会按您希望的方式工作。

Silverlight：ScrollViewer中的GridSplitter意外运行

3 个答案: