WPF - GridSplitterを移動すると列が正しく非表示になる

Question

ボタンをクリックしたときにGridの列を非表示にしようとしています（3番目の列のすべての項目の表示が閉じられるようにボタンが設定されています） 。私がGridSplitterを移動しないと正しく動作し、3番目の列は消えますが、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カラムの幅を変更しますが、もはや最初のカラムに触れてはいけません。

ところで、ボタンを使用して、イベントをクリックする代わりに、あなたが（IsCheckedを非表示にしたいコンテンツとコンテナのVisibilityにバインドされている）ToggleButtonを利用することができ、this answerを参照してください。純粋な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> 

がhereからコンバータを取得し、コードビハインドの必要はありません。

ポイントは、1））auto列と*とfixed width（スプリッタdoesn't work wellを有するように非表示可能な容器2）セットアップグリッド列内のスプリッタを置きます。

デモ：