0

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

这是我的 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>

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

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

4

3 回答 3

0

您应该禁用“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。最好在每列内容周围的网格内移动滚动条。

于 2011-08-02T20:35:23.880 回答
0

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

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

}
于 2011-08-22T16:56:14.173 回答
0

它以这种方式运行的原因是您指定了带星号的第一列，而没有Width="300*"星号的第三列。Width="100"

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

于 2012-03-02T11:02:06.393 回答