Alignement, marge, remplissage

Dans les applications XAML, la plupart des éléments d’interface utilisateur héritent de la classe FrameworkElement . Chaque FrameworkElement a des dimensions, un alignement, une marge et des propriétés de remplissage qui influencent le comportement de disposition. Les instructions suivantes fournissent une vue d’ensemble de l’utilisation de 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)

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

• Hauteur et largeur spécifient la taille d’un élément. Les valeurs par défaut sont mathématiquement NaN (pas un nombre). Vous pouvez définir des valeurs fixes mesurées en pixels effectifs, ou utiliser le dimensionnement automatique ou proportionnel pour le 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 augmentent ou diminuent, les valeurs changent lors d'un événement SizeChanged. Notez qu’un RenderTransform ne modifie pas les valeurs ActualHeight et ActualWidth.

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

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

Alignement

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

• HorizontalAlignment et VerticalAlignment spécifient comment 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.

• Stretch est la valeur par défaut pour les deux propriétés et les éléments remplissent tous les espaces qu’ils sont fournis dans le conteneur parent. La hauteur et la largeur en nombre réel annulent une valeur Stretch, qui agit plutôt comme une valeur centre. Certains contrôles, comme Button, remplacent la valeur Stretch par défaut dans leur style par défaut.

• HorizontalContentAlignment et VerticalContentAlignment spécifient la position des éléments enfants dans un conteneur.

• L’alignement peut affecter le découpage dans un panneau de disposition. Par exemple, avec HorizontalAlignment="Left", le côté droit de l’élément est clippé si le contenu est supérieur à ActualWidth.

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

Marge et remplissage

Les propriétés de marge et de remplissage empêchent l’interface utilisateur de regarder trop encombrée ou trop éparse, et elles peuvent également faciliter l’utilisation de certaines entrées telles que le stylet et la touche. Voici une illustration affichant les marges et l'espacement d’un conteneur et son contenu.

Margin

La marge contrôle la quantité d’espace vide autour d’un élément. Margin n’ajoute pas de pixels à ActualHeight et ActualWidth et n’est pas considéré comme faisant partie de l’élément pour les tests de collision et la gestion des événements d’entrée.

• Les valeurs de marge peuvent être uniformes ou distinctes. Avec Margin="20", une marge uniforme de 20 pixels serait appliquée à l’élément sur les côtés gauche, supérieur, droit et inférieur. Avec Margin="0,10,5,25", les valeurs sont appliquées à gauche, en haut, à droite et en bas (dans cet ordre).
• Les marges sont additives. Si deux éléments spécifient une marge uniforme de 10 pixels et sont des homologues adjacents dans n’importe quelle orientation, la distance entre eux est de 20 pixels.
• Les marges négatives sont autorisées. Toutefois, l’utilisation de marges négatives peut souvent provoquer un rognage ou des chevauchements entre les éléments, ce qui rend peu courante l'utilisation de telles marges.
• Les valeurs de marge sont limitées en dernier, donc soyez prudent avec les marges, car les conteneurs peuvent découper ou limiter les éléments. Une valeur Margin peut être la cause d’un élément qui n’apparaît pas à afficher ; avec une marge appliquée, la dimension d’un élément peut être limitée à 0.

Bourrage

Le remplissage 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 de Control . Tous les contrôles n’ont pas de contenu, donc pour ces contrôles, la définition de la propriété ne fait rien. Si le contrôle a une bordure, le rembourrage est appliqué à l'intérieur de cette bordure.
• Border.Padding : définit l’espace entre la ligne 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ément, en plaçant les marges spécifiées autour de chaque élément.
• TextBlock.Padding et RichTextBlock.Padding : développez la zone englobante autour du texte de l’élément de texte. Ces éléments de texte n’ont pas d’arrière-plan, ce qui peut être visuellement difficile à voir. Pour cette raison, utilisez à la place les paramètres Margin sur les conteneurs Block.

Dans chacun de ces cas, les éléments ont également une propriété Margin. Si marge et remplissage sont appliqués, ils sont additifs : la distance apparente entre un conteneur externe et tout contenu interne sera marge plus remplissage.

Example

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.

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>

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 l’utilisation de styles, consultez les styles XAML.

Recommandations générales

• Appliquez uniquement des valeurs de mesure à certains éléments clés et utilisez le comportement de disposition fluide pour les autres éléments. Cela fournit une interface utilisateur réactive lorsque la largeur de la fenêtre change.
• Si vous utilisez des valeurs de mesure, toutes les dimensions, marges et remplissage doivent être incrémentées 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 entraîne le meilleur rendu en s’alignant sur des pixels entiers.
• Pour les petites largeurs de fenêtre (moins de 640 pixels), nous recommandons des gouttières de 12 epx, et pour les largeurs de fenêtre plus grandes, nous recommandons des gouttières de 24 epx.

Rubriques connexes

• FrameworkElement.Height
• FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Margin
• Control.Padding