WPF - Le colonne non si nascondono correttamente quando viene spostato GridSplitter

Question

Sto tentando di nascondere una colonna in un Grid con un GridSplitter quando si fa clic su un pulsante (il pulsante imposta la visibilità di tutti gli elementi nella terza colonna da comprimere) . Se non muovo il GridSplitter funziona correttamente e la terza colonna scompare, ma se sposto il GridSplitter il contenuto scompare ma le altre colonne non vengono ridimensionate per riempire lo spazio vuoto.

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

Ecco un esempio del mio problema (GIF):

come posso risolvere questo problema? Forse rispettando il pattern MVVM.

Answer 1

Il problema è semplice, si imposta GridSplitter ResizeBehavior="PreviousAndCurrent", ma la larghezza della colonna della griglia precedente è * e non appena si sposta il divisore le sue unità di larghezza verranno modificate in assoluto (quindi non sarà possibile ridimensionare quando viene modificata la larghezza della colonna 3d).

Basta impostare GridSplitter ResizeBehavior="PreviousAndNext" per risolvere il problema. Se lo fai lo splitter modificherà la larghezza della colonna 3d, ma non dovrebbe più toccarne la prima.

Btw, invece di usare il tasto e fare clic su evento è possibile utilizzare ToggleButton (che IsChecked è destinato a Visibility del contenitore con il contenuto che si desidera nascondere), vedi this answer. L'utilizzo di convertitori con visualizzazione xaml pura è migliore di MVVM rispetto a quello con un codice precedente e x:Name.

---

destro, si hanno pochi problemi di layout, ecco una soluzione completa:

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

Non c'è bisogno di code-behind, ottenere convertitore da here.

Point sono: 1) mettere splitter all'interno di colonne 2) griglia configurazione nascondere-grado contenitore avere * e fixed width (splitter doesn't work well con auto colonne).

Demo: