Pourquoi la grille WPF ne partage pas l'espace de manière égale lorsque la colonne du milieu a une largeur minimale?

Question

Dans cet exemple, la première colonne obtient 100 et les deux colonnes suivantes 50 chacune, ce qui correspond au comportement attendu.

<Grid Width="200" Height="200"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition MinWidth="100" /> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Border Background="Red" Grid.Column="0" /> 
    <Border Background="Yellow" Grid.Column="1" /> 
    <Border Background="Blue" Grid.Column="2" /> 
</Grid> 

Si je déplace la MinWidth à la colonne du milieu ...

<Grid Width="200" Height="200"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition MinWidth="100" /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Border Background="Red" Grid.Column="0" /> 
    <Border Background="Yellow" Grid.Column="1" /> 
    <Border Background="Blue" Grid.Column="2" /> 
</Grid> 

... puis la première colonne obtient 33.3 et la dernière colonne 66,6 qui semble bizarre. Je ne sais pas pourquoi cela devrait changer le comportement de la grille. Je m'attendrais à ce que les colonnes 0 et 2 en obtiennent 50 chacune.

Mise à jour: Je comprends pourquoi cela arrive, mais me demandais si quelqu'un pense qu'il est un bug (d'autant plus que le comportement dans Silverlight est différent)

Answer 1

Juste une mise à jour .. J'ai essayé la XAML snippet avec une combinaison de 3.5/4.0 .NET Silverlight 3/4 et peut toujours pas obtenir une largeur égale pour le deuxième exemple ...

Ce XAML était la seule façon de contourner cette question:

<Grid Width="200" Height="200"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width=".5*" /> 
      <ColumnDefinition MinWidth="100" /> 
      <ColumnDefinition Width=".5*" /> 
     </Grid.ColumnDefinitions> 
     <Border Background="Red" Grid.Column="0" /> 
     <Border Background="Yellow" Grid.Column="1" /> 
     <Border Background="Blue" Grid.Column="2" /> 
    </Grid> 

Une mise à jour de votre côté les gars?

Answer 2

Vous ne savez pas exactement quel est le problème, mais ces deux grilles se comportent comme vous le souhaitez. J'aime la seconde plus que la première, car elle spécifie explicitement que la première et la troisième colonne doivent occuper l'espace des restes de façon égale.

<Grid Width="200" Height="200"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition MinWidth="100" Width="Auto" /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Border Background="Red" Grid.Column="0" /> 
    <Border Background="Yellow" Grid.Column="1" /> 
    <Border Background="Blue" Grid.Column="2" /> 
</Grid> 



<Grid Width="200" Height="200"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="1*" /> 
     <ColumnDefinition MinWidth="100" Width="Auto" /> 
     <ColumnDefinition Width="1*" /> 
    </Grid.ColumnDefinitions> 
    <Border Background="Red" Grid.Column="0" /> 
    <Border Background="Yellow" Grid.Column="1" /> 
    <Border Background="Blue" Grid.Column="2" /> 
</Grid> 

Answer 3

Si vous voulez une largeur égale, vous ne pouvez pas utiliser Auto. Vous devez définir explicitement la largeur de chaque colonne dans la proportion désirée, pour 3 colonnes que vous voulez ".3 *" pour chacune. MinWidth est prioritaire si la largeur calculée devient inférieure à MinWidth.

Answer 4

Ce problème se produit uniquement lorsque vous avez une colonne centrale, ce qui implique que vous avez un nombre impair de colonnes définies pour votre grille. Je ne suis pas sûr de savoir pourquoi cela se produit et je ne pense pas que ce soit un comportement intentionnel. Mais, une autre solution consiste à toujours s'assurer que vous avez un nombre pair de colonnes définies même si vous n'utilisez qu'un nombre impair d'entre eux (masquer la colonne supplémentaire en utilisant MaxWidth = 0).

<Grid Width="200" Height="200"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="*" MinWidth="100"/> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="*" MaxWidth="0"/> <!--Workaround--> 
     </Grid.ColumnDefinitions> 

     <Border Grid.Column="0" Background="Red"/> 
     <Border Grid.Column="1" Background="Yellow"/> 
     <Border Grid.Column="2" Background="Blue"/> 
    </Grid> 

Inconvénient: vous avez une colonne vide dans votre grille. L'avantage est que vous obtenez le comportement de distribution d'espace attendu.