xaml
Contrôles de disposition
Recherche…
Toile
Canvas est le plus simple des panneaux. Il place les éléments aux coordonnées Top/Left spécifiées.
<Canvas>
<TextBlock
Canvas.Top="50"
Canvas.Left="50"
Text="This is located at 50, 50"/>
<TextBlock
Canvas.Top="100"
Canvas.Left="50"
Width="150"
Height="23"
Text="This is located at 50, 100 with height 23 and width 150"/>
</Canvas>
DockPanel
DockPanel aligne le contrôle en fonction de la propriété dock, dans l'ordre dans DockPanel il est placé dans le contrôle.
REMARQUE: DockPanel fait partie du framework WPF, mais n'est pas DockPanel avec Silverlight / WinRT / UWP. Les implémentations open-source sont faciles à trouver.
<DockPanel LastChildFill="False">
<!-- This will strech along the top of the panel -->
<Button DockPanel.Dock="Top" Content="Top"/>
<!-- This will strech along the bottom of the panel -->
<Button DockPanel.Dock="Bottom" Content="Bottom"/>
<!-- This will strech along the remaining space in the left of the panel -->
<Button DockPanel.Dock="Left" Content="Left"/>
<!-- This will strech along the remaining space in the right of the panel -->
<Button DockPanel.Dock="Right" Content="Right"/>
<!-- Since LastChildFill is false, this will be placed at the panel's right, to the left of the last button-->
<Button DockPanel.Dock="Right" Content="Right"/>
</DockPanel>
<!-- When lastChildFill is true, the last control in the panel will fill the remaining space, no matter what Dock was set to it -->
<DockPanel LastChildFill="True">
<!-- This will strech along the top of the panel -->
<Button DockPanel.Dock="Top" Content="Top"/>
<!-- This will strech along the bottom of the panel -->
<Button DockPanel.Dock="Bottom" Content="Bottom"/>
<!-- This will strech along the remaining space in the left of the panel -->
<Button DockPanel.Dock="Left" Content="Left"/>
<!-- This will strech along the remaining space in the right of the panel -->
<Button DockPanel.Dock="Right" Content="Right"/>
<!-- Since LastChildFill is true, this will fill the remaining space-->
<Button DockPanel.Dock="Right" Content="Fill"/>
</DockPanel>
StackPanel
StackPanel place ses commandes les unes après les autres. Il agit comme un panneau de quai avec toutes les stations de contrôle réglées sur la même valeur.
<!-- The default StackPanel is oriented vertically, so the controls will be presented in order from top to bottom -->
<StackPanel>
<Button Content="First"/>
<Button Content="Second"/>
<Button Content="Third"/>
<Button Content="Fourth"/>
</StackPanel>
<!-- Setting the Orientation property to Horizontal will display the control in order from left to right (or right to left, according to the FlowDirection property) -->
<StackPanel Orientation="Horizontal">
<Button Content="First"/>
<Button Content="Second"/>
<Button Content="Third"/>
<Button Content="Fourth"/>
</StackPanel>
Pour empiler des éléments de bas en haut, utilisez un panneau d'ancrage.
la grille
Grid est utilisée pour créer des dispositions de table.
Définitions de base des lignes et des colonnes
<Grid>
<!-- Define 3 columns with width of 100 -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Define 3 rows with height of 50 -->
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<!-- This is placed at the top left (first row, first column) -->
<Button
Grid.Column="0"
Grid.Row="0"
Content="Top Left"/>
<!-- This is placed at the top left (first row, second column) -->
<Button
Grid.Column="1"
Grid.Row="0"
Content="Top Center"/>
<!-- This is placed at the center (second row, second column) -->
<Button
Grid.Column="1"
Grid.Row="1"
Content="Center"/>
<!-- This is placed at the bottom right (third row, third column) -->
<Button
Grid.Column="2"
Grid.Row="2"
Content="Bottom Right"/>
</Grid>
REMARQUE: Tous les exemples suivants utilisent uniquement des colonnes, mais s'appliquent également aux lignes .
Définitions de taille automatique
Les colonnes et les lignes peuvent être définies avec "Auto" comme largeur / hauteur. La taille automatique prendra autant d'espace que nécessaire pour afficher son contenu, et pas plus.
Les définitions de taille automatique peuvent être utilisées avec des définitions de taille fixe.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<!-- This column won't take much space -->
<Button Grid.Column="0" Content="Small"/>
<!-- This column will take much more space -->
<Button Grid.Column="1" Content="This text will be very long."/>
<!-- This column will take exactly 50 px -->
<Button Grid.Column="2" Content="This text will be cut"/>
</Grid>
Définitions simples en taille d'étoile
Les colonnes et les lignes peuvent être définies avec * comme largeur / hauteur. Les lignes / colonnes de la taille d'une étoile prendront autant d'espace que possible , quel que soit son contenu.
Les définitions de taille d'étoile peuvent être utilisées avec des définitions de taille fixe et automatique. La taille de l'étoile est la valeur par défaut et la largeur de la colonne ou la hauteur de la ligne peuvent être omises.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<!-- This column will be as wide as it can -->
<Button Grid.Column="0" Content="Small"/>
<!-- This column will take exactly 50 px -->
<Button Grid.Column="2" Content="This text will be cut"/>
</Grid>
Définitions proportionnelles en étoile
Outre le fait que l'étoile occupe autant d'espace que possible, les définitions des étoiles sont également proportionnelles. Si rien d'autre n'est mentionné, chaque définition d'étoile prendra autant d'espace que les autres dans la grille actuelle.
Cependant, il est possible de définir un ratio entre les tailles des différentes définitions en y ajoutant simplement un multiplicateur. Ainsi, une colonne définie comme 2* sera deux fois plus large qu'une colonne définie comme * . La largeur d'une seule unité est calculée en divisant l'espace disponible par la somme des multiplicateurs (s'il n'y en a pas, il est compté comme 1).
Ainsi, une grille avec 3 colonnes définies comme * , 2* , * sera présentée comme 1/4, 1/2, 1/4.
Et une avec 2 colonnes définies comme 2* , 3* sera présentée 2/5, 3/5.
S'il y a des définitions automatiques ou fixes dans le jeu, celles-ci seront calculées en premier et les définitions d'étoiles prendront l'espace restant après cela.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- This column will be as wide as the third column -->
<Button Grid.Column="0" Content="Small"/>
<!-- This column will be twice as wide as the rest -->
<Button Grid.Column="1" Content="This text will be very long."/>
<!-- This column will be as wide as the first column -->
<Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>
Colonne / Rangée
Il est possible d'étendre un contrôle au-delà de sa cellule en définissant Row / ColumnSpan. La valeur définie est le nombre de lignes / colonnes
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- This control will streach across most of the grid -->
<Button Grid.Column="0" Grid.ColumnSpan="2" Content="Small"/>
<Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>
WrapPanel
Le panneau de recouvrement agit de la même manière que le panneau de pile. Sauf quand il reconnaît que les articles dépasseront sa taille, il les enroulerait dans une nouvelle ligne / colonne, en fonction de son orientation.
Orientation horizontale
<WrapPanel Width="100">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</WrapPanel>
Panneau vertical
<WrapPanel Height="70" Orientation="Vertical">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</WrapPanel>
UniformGrid
Une grille uniforme placera tous ses enfants dans une grille, chaque enfant dans sa propre cellule. Toutes les cellules auront la même taille. On peut penser qu'il s'agit d'un raccourci vers une grille où toutes les définitions de lignes et de colonnes sont définies sur *
Lignes et colonnes par défaut
Par défaut, UniformGrid essaiera de créer un nombre égal de lignes et de colonnes. Quand une ligne deviendra longue, une nouvelle colonne sera ajoutée.
Ce code produira une grille de 3x3 avec les 2 premières lignes remplies et la dernière avec un bouton:
<UniformGrid>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</UniformGrid>
Lignes / colonnes spécifiées
Vous pouvez indiquer à UniformGrid exactement le nombre de lignes et / ou de colonnes que vous souhaitez avoir.
<UniformGrid Columns="2" >
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</UniformGrid>
REMARQUE: dans le cas où les lignes et les colonnes sont définies et qu'il y a plus d'enfants que de cellules, les derniers enfants de la grille ne seront pas affichés.
Propriété FirstColumn
Une fois la propriété Columns définie, vous pouvez définir la propriété FirstColumn. Cette propriété entrera x cellules vides dans la première ligne avant que le premier enfant ne soit affiché. FirstColumn doit être défini sur un nombre inférieur à la propriété Columns.
Dans cet exemple, le premier bouton sera affiché dans la deuxième colonne de la première ligne:
<UniformGrid Columns="2" FirstColumn="1">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</UniformGrid>
RelativePanel
RelativePanel a été introduit dans Windows 10 et sert principalement à prendre en charge les dispositions adaptatives, où les éléments enfants du panneau sont disposés différemment en fonction de l'espace disponible. RelativePanel est généralement utilisé avec les états visuels , qui permettent de changer la configuration de la disposition, de s'adapter à la taille de l'écran ou à la fenêtre, à l'orientation ou au cas d'utilisation. Les éléments enfants utilisent des propriétés attachées qui définissent où ils se trouvent par rapport au panneau et entre eux.
<RelativePanel
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Rectangle
x:Name="rectangle1"
RelativePanel.AlignLeftWithPanel="True"
Width="360"
Height="50"
Fill="Red"/>
<Rectangle
x:Name="rectangle2"
RelativePanel.Below="rectangle1"
Width="360"
Height="50"
Fill="Green" />
</RelativePanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!--VisualState to be triggered when window width is >=720 effective pixels.-->
<AdaptiveTrigger
MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter
Target="rectangle2.(RelativePanel.Below)"
Value="{x:Null}" />
<Setter
Target="rectangle2.(RelativePanel.RightOf)"
Value="rectangle1" />
<Setter
Target="rectangle1.(RelativePanel.AlignLeftWithPanel)"
Value="False" />
<Setter
Target="rectangle1.(RelativePanel.AlignVerticalCenterWithPanel)"
Value="True" />
<Setter
Target="rectangle2.(RelativePanel.AlignVerticalCenterWithPanel)"
Value="True" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>