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容器x:Name绑定您要隐藏的内容，而不是使用按钮和点击事件，请参阅{{3} }。使用具有纯xaml视图的转换器比具有一些代码和<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> 的MVVM更好。

是的，您的布局问题很少，这是一个完整的解决方案：

*

无需代码隐藏，从this answer获取转换器。

要点是：1）将拆分器放入可隐藏容器内2）设置网格列以使fixed width和auto（拆分器here具有angular.module('HelloApp', []).controller("MyCtrl", function($scope) { this.callBarFoo = function() { this.callback = true; } }); angular.module('HelloApp') .directive('barFoo', function() { return { restrict: 'E', scope: { activateMe: '=' }, controller: function($scope) { }, template: '<p ng-if="activateMe">Activated</p>' } })列。）< / p>

演示：

doesn't work well