Alignement, marge, remplissage

  • Article

Dans les applications XAML, la plupart des éléments d’interface utilisateur héritent de la classe FrameworkElement. Chaque classe FrameworkElement possède des propriétés de dimensions, d’alignement, de marge et de remplissage qui influencent le comportement de disposition. Le guide suivant fournit une vue d’ensemble sur la façon d’utiliser ces propriétés de disposition pour vous assurer que l’interface utilisateur de votre application est lisible et facile à utiliser dans n’importe quel contexte.

Dimensions (hauteur, largeur)

Un dimensionnement correct garantit que tout le contenu est clair et lisible. Les utilisateurs ne devraient pas avoir à faire défiler ou à zoomer pour déchiffrer le contenu principal.

diagramme illustrant les dimensions

  • Height et Width spécifient la taille d’un élément. Les valeurs par défaut sont mathématiquement NaN (Not A Number). Vous pouvez définir des valeurs fixes mesurées en pixels effectifs, ou vous pouvez utiliser Auto ou le dimensionnement proportionnel pour un comportement fluide.

  • ActualHeight et ActualWidth sont des propriétés en lecture seule qui fournissent la taille d’un élément au moment de l’exécution. Si les dispositions fluides grandissent ou rétrécissent, alors les valeurs changent dans un événement SizeChanged. Notez qu’un RenderTransform ne changera pas les valeurs ActualHeight et ActualWidth.

  • MinWidth/MaxWidth et MinHeight/MaxHeight spécifient les valeurs qui restreignent la taille d’un élément tout en autorisant un redimensionnement fluide.

  • FontSize et d’autres propriétés de texte contrôlent la taille de disposition des éléments de texte. Alors que les éléments de texte n’ont pas de dimensions déclarées explicitement, ils ont des valeurs ActualWidth et ActualHeight calculées.

Alignment

L’alignement rend votre interface utilisateur claire, organisée et équilibrée, et peut être également utilisé pour établir des relations et une hiérarchie visuelle.

Diagramme illustrant l’alignement

  • HorizontalAlignment et VerticalAlignment spécifient la manière dont un élément doit être positionné dans son conteneur parent.

    • Les valeurs de HorizontalAlignment sont Left, Center, Right et Stretch.
    • Les valeurs de VerticalAlignment sont Top, Center, Bottom et Stretch.

  • Avec Stretch, valeur par défaut pour les deux propriétés, les éléments remplissent tout l’espace qui leur est alloué dans le conteneur parent. Une valeur Height et Width à nombre réel annule une valeur Stretch, qui agira à la place en tant que valeur de type Center. Certains contrôles, tels que Button, remplacent la valeur Stretch par défaut dans leur style par défaut.

  • HorizontalContentAlignment et VerticalContentAlignment spécifient la manière dont les éléments enfants sont positionnés dans un conteneur.

  • L’alignement peut affecter la troncature dans un panneau de disposition. Par exemple, avec HorizontalAlignment="Left", le côté droit de l’élément est tronqué si le contenu est plus grand que ActualWidth.

  • Les éléments de texte utilisent la propriété TextAlignment. En règle générale, nous recommandons d’utiliser un alignement à gauche, la valeur par défaut. Pour plus d’informations sur le texte des styles, voir Typographie.

Marge et remplissage

Les propriétés Margin et Padding évitent que l’interface utilisateur n’apparaisse trop désordonnée ou fragmentée, et facilitent l’utilisation de certaines entrées, comme le stylet et la fonction tactile. Voici une illustration affichant les marges et le remplissage pour un conteneur et son contenu.

Diagramme de marges et de remplissage XAML

Margin

La propriété Margin contrôle la quantité d’espace vide autour d’un élément. Margin n’ajoute pas de pixels aux propriétés ActualHeight et ActualWidth, et n’est pas considéré comme faisant partie de l’élément pour les tests de positionnement et la détection des événements d’entrée.

  • Les valeurs de marge peuvent être uniformes ou distinctes. Avec Margin="20", une marge uniforme de 20 pixels est appliquée à l’élément à gauche, en haut, à droite et en bas. Avec Margin="0,10,5,25", les valeurs sont appliquées à gauche, en haut, à droite et en bas (dans cet ordre).

  • Les marges sont additifs. Si deux éléments spécifient tous les deux une marge uniforme de 10 pixels et qu’il s’agit d’homologues adjacents dans une orientation quelconque, la distance entre eux est de 20 pixels.

  • Les marges négatives sont autorisées. Toutefois, l’utilisation d’une marge négative peut souvent provoquer un découpage, ou des surdraws d’homologues, de sorte qu’il n’est pas une technique courante d’utiliser des marges négatives.

  • Les valeurs de marge sont contraintes en dernier, faites donc attention aux marges, car les conteneurs peuvent tronquer ou contraindre des éléments. Une valeur de marge peut entraîner le non-affichage d’un élément ; avec une marge appliquée, la dimension d’un élément peut être contrainte à 0.

Remplissage

La propriété Padding contrôle la quantité d’espace entre la bordure interne d’un élément et son contenu enfant ou ses éléments. Une valeur de remplissage positive diminue la zone de contenu de l’élément.

Contrairement à Margin, Padding n’est pas une propriété de FrameworkElement. Il existe plusieurs classes qui définissent chacune leur propre propriété Padding :

  • Control.Padding : hérite de toutes les classes dérivées Control. Comme les contrôles ne possèdent pas tous du contenu, cette propriété n’a aucun effet pour ces contrôles. Si le contrôle a une bordure, le remplissage s’applique à l’intérieur de celle-ci.
  • Border.Padding : définit l’espace entre la ligne de rectangle créée par BorderThickness/BorderBrush et l’élément Child.
  • ItemsPresenter.Padding : contribue à l’apparence des éléments dans les contrôles d’éléments, en plaçant le remplissage spécifié autour de chaque élément.
  • TextBlock.Padding et RichTextBlock.Padding : étendent le cadre englobant autour du texte de l’élément de texte. Ces éléments de texte n’ayant pas d’arrière-plan, il peut être difficile de voir. Pour cette raison, utilisez les paramètres Margin sur les conteneurs Block à la place.

Dans chacun de ces cas, les éléments ont aussi une propriété Margin. Si les propriétés Margin et Padding sont toutes les deux appliquées, elles s’ajoutent : la distance apparente entre un conteneur extérieur et tout contenu intérieur est égale à la marge plus au remplissage.

Exemple

Examinons les effets de Margin et de Padding sur les contrôles réels. Voici une zone de texte à l’intérieur d’une grille avec les valeurs de marge et de remplissage par défaut de 0.

Zone de texte avec marge et remplissage de 0

Voici les mêmes valeurs TextBox et Grid avec marge et remplissage sur la zone de texte, comme indiqué dans ce code XAML.

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

Zone de texte avec marge positive et valeurs de remplissage

Ressources de style

Vous n’avez pas besoin de définir chaque valeur de propriété individuellement sur un contrôle. Il est généralement plus efficace de regrouper les valeurs de propriété dans une ressource Style et d’appliquer le style à un contrôle. Cela est particulièrement vrai lorsque vous devez appliquer les mêmes valeurs de propriété à de nombreux contrôles. Pour plus d’informations sur les styles, voir Styles XAML.

Recommandations générales

  • N’appliquez des valeurs de mesure qu’à certains éléments clés et utilisez le comportement de disposition fluide pour les autres éléments. Cela garantit une interface utilisateur réactive quand la largeur de la fenêtre change.

  • Si vous utilisez des valeurs de mesure, toutes les dimensions, marges et remplissages doivent se faire par incréments de 4 epx. Lorsque XAML utilise des pixels effectifs et une mise à l’échelle pour rendre votre application lisible sur tous les appareils et tailles d’écran, elle met à l’échelle les éléments de l’interface utilisateur en multiples de 4. L’utilisation de valeurs par incréments de 4 offre un rendu optimal en alignant les pixels entiers.

  • Pour les fenêtres étroites (inférieures à 640 pixels en largeur), nous recommandons des reliures de 12 epx, tandis que pour les fenêtres plus larges, nous recommandons des reliures de 24 epx.

Reliures recommandées