Que signifie exactement l'étoile en termes de taille dans WPF?
Que signifie exactement l'étoile en termes de taille dans WPF?
Réponses:
Dans une grille WPF, Width="*"
ou Height="*"
signifie dimensionnement proportionnel.
Par exemple: pour donner 30% à la colonne 1 et 70% à la colonne 2 -
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
Et de même pour les lignes -
<RowDefinition Height="3*" />
<RowDefinition Height="7*" />
Les nombres ne doivent pas nécessairement être des entiers.
Si la largeur pour RowDefinition (hauteur pour ColumnDefinition) est omise, 1 * est implicite.
Dans cet exemple, la colonne 1 est 1,5 fois plus large que la colonne 2 -
<ColumnDefinition Width="1.5*" />
<ColumnDefinition />
Vous pouvez mélanger des largeurs auto-ajustées et fixes avec des largeurs * (proportionnelles); dans ce cas, les colonnes * sont réparties sur le reste une fois que l'ajustement automatique et les largeurs fixes ont été calculés -
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!-- Auto-fit to content, 'Hi' -->
<ColumnDefinition Width="50.5" /> <!-- Fixed width: 50.5 device units) -->
<ColumnDefinition Width="69*" /> <!-- Take 69% of remainder -->
<ColumnDefinition Width="31*"/> <!-- Take 31% of remainder -->
</Grid.ColumnDefinitions>
<TextBlock Text="Hi" Grid.Column="0" />
Si vous avez 2 colonnes comme celle-ci:
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="*"/>
cela signifie que la première colonne est 10 fois plus large que la seconde. C'est comme dire "10 parties de la colonne 1 et 1 partie de la colonne 2."
La chose intéressante à ce sujet est que vos colonnes seront redimensionnées proportionnellement. D'autres options sont:
//Take up as much space as the contents of the column need
<ColumnDefinition Width="Auto"/>
//Fixed width: 100 pixels
<ColumnDefinition Width="100"/>
J'espère que cela pourra aider!
nous prenons l'exemple suivant .....
une grille et a 3 colonnes et chacune contient un bouton de taille 100.
Le code XAML est ...
<Grid x:Name="LayoutRoot" Width="600">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="100" />
<Button Content="Button1" Height="23" HorizontalAlignment="Left" Margin="0,10,0,0" Name="button2" VerticalAlignment="Top" Width="100" Grid.Column="1" />
<Button Content="Button2" Height="23" HorizontalAlignment="Left" Margin="0,10,0,0" Name="button3" VerticalAlignment="Top" Width="100" Grid.Column="2" />
</Grid>
Mais en fait, sa taille est ...
<Grid.ColumnDefinitions>
<ColumnDefinition Width="375" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="125" />
</Grid.ColumnDefinitions>
Conclusion:
La taille totale de la grille est de 600
"Auto": la colonne est redimensionnée avec son contenu. (La 2ème colonne a un bouton de largeur 100)
"*": La largeur de la 1ère colonne correspond à 3x de la 3ème colonne.