Question

我有5列布局。目标是有3个主要栏目（左，中，右）然后我可以扩展和收缩。为此，我添加了两个包含分离器的额外列。左侧和中间列之间，中间和右侧之间。

启动应用程序并将第一个分离器向左移动后，最后一列（右）突然一直向左移动，折叠所有三列。有什么建议？感谢

这是XAML：

<Window x:Class="ThreeColumns.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="725">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Left side" FontSize="24"></TextBlock>
        </Border>
        <GridSplitter Background="blue" Width="5" 
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Middle" FontSize="24"></TextBlock>
        </Border>
        <GridSplitter Background="blue" Width="5" 
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch" Grid.Column="3"></GridSplitter>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Right side" FontSize="24"></TextBlock>
        </Border>
    </Grid>
</Window>

我设法通过将第一列和最后一列的宽度设置为“auto”并将中间内容列设置为“*”来解决此问题：

<Window x:Class="ThreeColumns.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="725">
    <DockPanel>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="50"  Width="auto" Name="Col1"></ColumnDefinition>
                <ColumnDefinition Width="7" Name="Col2"></ColumnDefinition>
                <ColumnDefinition Name="Col3" Width="*"></ColumnDefinition>
                <ColumnDefinition Width="7" Name="Col4"></ColumnDefinition>
                <ColumnDefinition MinWidth="50" Width="auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2">
                <TextBlock Text="Left side" Width="250" FontSize="24"></TextBlock>
            </Border>

            <Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2">
                <TextBlock Text="Middle" FontSize="24"></TextBlock>
            </Border>
            <Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2">
                <TextBlock Text="Right side" Width="250" FontSize="24"></TextBlock>
            </Border>
            <GridSplitter Background="blue" Width="5" 
                      HorizontalAlignment="Center" ResizeDirection="Columns"
                      VerticalAlignment="Stretch" Grid.Column="1" Grid.ZIndex="1"/>
            <GridSplitter Background="blue" Width="5" 
                      HorizontalAlignment="Center" ResizeDirection="Columns"
                      VerticalAlignment="Stretch" Grid.Column="3" Grid.ZIndex="1"/>
        </Grid>
    </DockPanel>
</Window>

Answer 1

您的代码适合我。
但是我觉得使用固定宽度的分离器并使其居中是更清洁的分裂器对着下一列有时它似乎有点罢了。

除了一个以外，经常需要使用Auto 如果你尝试2 * 3 *之类的东西来进行相对大小调整，那么事情往往会变坏如果你想开始调整大小，有时多个单*会起作用。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto></ColumnDefinition>
            <ColumnDefinition Width="7"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="7"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Left side" FontSize="24"></TextBlock>
        </Border>
        <GridSplitter Background="blue" Width="3" 
                      HorizontalAlignment="Center"
                      VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Middle" FontSize="24"></TextBlock>
        </Border>
        <GridSplitter Background="blue" Width="3" 
                      HorizontalAlignment="Center"
                      VerticalAlignment="Stretch" Grid.Column="3"></GridSplitter>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Right side" FontSize="24"></TextBlock>
        </Border>
    </Grid>

5具有2个网格分裂器的列布局 - 意外行为

1 个答案: