0

スプリッターを使用して列の幅を変更できる 2 列のレイアウトを構築しようとしています。ブラウザー ウィンドウのサイズが変更されても、右の列の幅は変更されません (グリッド幅に比例してはなりません)。両方の列の幅は最小にする必要があります。ブラウザ ウィンドウが狭すぎて両方の列を表示できない場合、スクロールバーが表示されます。

これは私の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>

私が抱えている問題は、スプリッターが左にドラッグされ、左の列の最小幅に達すると、右の列が非常に急速に拡大し始め、スクロールバーが表示されることです。右側の列から幅の設定を削除すると、奇妙な動作が解消されますが、ウィンドウのサイズが変更されると、右側の列が比例して拡大し始めます...

スプリッターを右にドラッグしたときと同じように動作させたい - 最小幅に達したら停止させたい.

4

3 に答える 3

0

このように動作する理由は、最初の列Width="300*"にアスタリスクを指定し、3番目の列Width="100" にアスタリスクを指定していないためです。

1列目と3列目にアスタリスクを付けるか、それぞれ削除するだけで、希望どおりに機能します。

于 2012-03-02T11:02:06.393 に答える
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 に答える