WPF - 移动GridSplitter时,列无法正确隐藏

Question

我正在尝试Grid使用GridSplitter单击按钮时隐藏列中的列(该按钮将第三列中所有项目的可见性设置为折叠).如果我不移动GridSplitter它正常工作,第三列消失,但如果我移动GridSplitter内容消失但其他列不调整大小以填充空白空间.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="25"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="a" Width="*"/>
        <ColumnDefinition x:Name="b" Width="3"/>
        <ColumnDefinition x:Name="c" Width="Auto" MaxWidth="600"/>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Background="Green">
        <Image Source="te/Dante.png" Height="Auto" Margin="0,128,2,71"/>
    </Border>
    <Button Grid.Column="0" Grid.Row="0" Width="30" Height="30" Margin="0,10,10,0" HorizontalAlignment="Right" VerticalAlignment="Top" Click="Button_Click"></Button>
    <GridSplitter Width="5" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" ResizeDirection="Columns" HorizontalAlignment="Left" Background="White" BorderBrush="Black" BorderThickness="1,0" ResizeBehavior="PreviousAndCurrent"/>
    <WrapPanel x:Name="wpC" Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" MinWidth="300" HorizontalAlignment="Stretch" Background="Aqua" Panel.ZIndex="-1"></WrapPanel>
</Grid>

这是我的问题的一个例子(gif):

我怎么解决这个问题？可能尊重MVVM模式.

Answer 1

问题很简单,你设置了GridSplitter ResizeBehavior="PreviousAndCurrent",但是之前的网格列宽度是*,并且一旦移动拆分器,其宽度单位将更改为绝对(因此当更改3d列宽时,它将无法调整大小).

只需设置GridSplitter ResizeBehavior="PreviousAndNext"解决问题.如果这样做,拆分器将修改3d列的宽度,但不应再触及第一列.

顺便说一下,您可以使用按钮和点击事件ToggleButton(它与包含您要隐藏的内容的容器IsChecked绑定Visibility),请参阅此答案.使用具有纯xaml视图的转换器比具有一些代码的转换器具有更好的MVVM x:Name.

对,你有几个布局问题,这是一个完整的解决方案:

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Border Background="Green" />
    <ToggleButton x:Name="toggleButton"
                  Width="30"
                  Height="30"
                  Margin="0,10,10,0"
                  HorizontalAlignment="Right"
                  VerticalAlignment="Top" />
    <Grid Grid.Column="1"
          Visibility="{Binding IsChecked, ElementName=toggleButton, Converter={StaticResource BooleanToVisibilityConverter}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="300"
                              MinWidth="300"
                              MaxWidth="600" />
        </Grid.ColumnDefinitions>
        <GridSplitter Width="5"
                      ResizeBehavior="CurrentAndNext" />
        <WrapPanel Grid.Column="1"
                   Background="Aqua" />
    </Grid>
</Grid>

不需要代码隐藏,从这里获得转换器.

要点是:1)将分离器放入可隐藏容器内2)设置网格列以使(*和fixed width分离器不能很好地与auto列配合使用).

演示: