WPF

Question

我试图在单击按钮时用 GridSplitter 隐藏 Grid 中的一列（该按钮将第三列中所有项目的可见性设置为折叠）。如果我不移动 GridSplitter 它会正常工作并且第三列消失，但是如果我移动 GridSplitter 内容会消失但其他列不会调整大小以填充空 space.

<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"，但是之前的grid列宽是*，你一移动splitter，它的宽度单位就会变成absolute（所以不会能够在更改 3d 列宽时调整大小。

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

顺便说一句，您可以使用 ToggleButton（IsChecked 绑定到包含您要隐藏内容的容器的 Visibility，而不是使用按钮和单击事件，请参阅 this answer。使用具有纯 xaml 视图的转换器比带有一些代码和 x:Name.

的转换器更好 MVVM

好的，你的布局问题很少，这里有一个完整的解决方案：

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

不需要代码隐藏，从here获取转换器。

要点是：1) 将拆分器放入可隐藏的容器中 2) 将网格列设置为具有 * 和 fixed width（拆分器和 auto 列） .

演示：

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

WPF - Columns don't hide properly when GridSplitter is moved

c#

grid

mvvm

gridsplitter