WPF GridSplitter dziwne zachowanie podczas Column width = „Auto”

Question

Mam dość prosty układ, wygląd:

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

Problem: gdy jestem przeciągając GridSplitter do lewa, prawa kolumna wychodzi z okna granicy, jak pokazano w animacji. Zauważyłem, że dzieje się tak, gdy szerokość trzeciej kolumny jest ustawiona na "Auto" (Width="Auto"). Jeśli ustawię Width="*"GridSplitter działa dobrze i trzeci Column nie wychodzi z obramowania okna. Dlaczego tak się dzieje, gdy Width="Auto"?

Answer 1

Twój problem jest spowodowany faktem, że jeden z twoich ColumnDefinition s jest ustawiony na Auto. Dzieje się tak, że gdy pierwsza kolumna osiągnie wartość MinWidth, nie może być mniejsza. Jeśli jednak będziesz nadal przenosić numer GridSlitter, prawa kolumna musi się rozwinąć. Widząc, jak pozwalasz mu rozwijać się do dowolnego rozmiaru, otrzymujesz aktualny problem.

Wszystko, co musisz zrobić, aby to naprawić, to ustawić właściwą właściwość ColumnDefinition.Width na wartość *. W ten sposób nie może już więcej wyrastać z Grid. Jeśli zajdzie taka potrzeba, możesz kontrolować końcowe rozmiary kolumn, korzystając z właściwości ColumnDefinition.MaxWidth. Wypróbuj to:

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