WPF GridSplitter strano comportamento quando Column width = "Auto"

Question

ho il layout piuttosto semplice, guarda:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" MinWidth="200"></ColumnDefinition> 
     <ColumnDefinition Width="5"></ColumnDefinition> 
     <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition> 
    </Grid.ColumnDefinitions> 
    <Border Grid.Column="0" 
      BorderBrush="Red" 
      BorderThickness="2"> 
     <!-- Any picture--> 
     <Image Source="/Resources/PreviewTest.png"></Image> 
    </Border> 
    <GridSplitter Grid.Column="1" 
        Width="5" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Stretch" 
        ResizeBehavior="PreviousAndNext"></GridSplitter> 
    <Expander Grid.Column="2" 
       ExpandDirection="Left" 
       BorderBrush="RoyalBlue" 
       BorderThickness="2"> 
     <!-- Any picture--> 
     <Image Source="/Resources/PreviewTest.png"></Image>  
    </Expander> 
</Grid> 

Il problema: quando sto trascinando GridSplitter a sinistra, colonna di destra esce dal bordo della finestra come mostrato sull'animazione. Ho scoperto che succede quando la larghezza della terza colonna è impostata come "Auto" (Width="Auto"). Se imposto Width="*"GridSplitter funziona correttamente e il terzo Column non esce dal bordo della finestra. Allora perché quando Width="Auto" succede?

Answer 1

Il tuo problema è causato dal fatto che uno dei tuoi ColumnDefinition s è impostato su Auto. Quello che sta accadendo è che quando la prima colonna raggiunge il suo valore MinWidth, non può ridurla. Tuttavia, se continui a spostare il GridSlitter, la colonna di destra deve crescere. Vedendo come lo fai crescere a qualsiasi dimensione, ottieni il tuo problema attuale.

Tutto ciò che è necessario fare per risolvere il problema è impostare la proprietà ColumnDefinition.Width corretta al valore *. In questo modo, non può più crescere dallo Grid. Se necessario, è possibile controllare le dimensioni finali delle colonne utilizzando la proprietà ColumnDefinition.MaxWidth. Prova questo:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" MinWidth="200" /> 
     <ColumnDefinition Width="5" /> 
     <ColumnDefinition Width="*" MinWidth="50" /> 
    </Grid.ColumnDefinitions> 
    <Border Grid.Column="0" BorderBrush="Red" BorderThickness="2"> 
     <Image Source="/Resources/PreviewTest.png" /> 
    </Border> 
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" VerticalAlignment="Stretch" ResizeBehavior="BasedOnAlignment" /> 
    <Expander Grid.Column="2" ExpandDirection="Left" BorderBrush="RoyalBlue" BorderThickness="2"> 
     <Image Source="/Resources/PreviewTest.png" /> 
    </Expander> 
</Grid>