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 propriétés de dimensions, d’alignement, de marge et de remplissage, qui influencent le comportement de la disposition. Les conseils suivants 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 (Height, Width)

Un 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.

• 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 utiliser le dimensionnementautomatique ou 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 augmentent ou diminuent, les valeurs changent dans 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 permettant un 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 de dimensions déclarées explicitement, ils ont calculé ActualWidth et ActualHeight.

Alignment

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 tout l’espace qu’ils sont fournis dans le conteneur parent. Les nombres réels Height et Width annulent une valeur Stretch, qui agit plutôt comme une valeur center. Certains contrôles, comme Button, remplacent la valeur Stretch par défaut dans leur style par défaut.

• HorizontalContentAlignment et VerticalContentAlignment spécifient la façon dont les éléments enfants sont positionnés 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 rogné 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 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 paraître trop encombrée ou trop éparse, et elles peuvent également faciliter l’utilisation de certaines entrées comme le stylet et le toucher. Voici une illustration affichant les marges et le remplissage d’un conteneur et de son contenu.

Margin

Margin 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ée comme faisant partie de l’élément pour les événements d’entrée de test d’accès et d’approvisionnement.

• Les valeurs de marge peuvent être uniformes ou distinctes. Avec Margin="20", une marge uniforme de 20 pixels est 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 s’ajoutent. 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, leur utilisation n’est pas très courante car elles peuvent souvent provoquer une troncature ou un chevauchement d’homologues.

• Les valeurs de marge étant limitées en dernier, soyez prudent avec les marges, car les conteneurs peuvent couper ou limiter les éléments. Une valeur Margin peut être la cause d’un élément qui ne semble pas s’afficher ; avec une marge appliquée, la dimension d’un élément peut être limitée à 0.

Remplissage

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

Contrairement à Margin, le remplissage 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. Tous les contrôles n’ont pas de contenu. Par conséquent, pour ces contrôles, la définition de la propriété ne fait rien. Si le contrôle a une bordure, le remplissage s’applique à 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 le remplissage spécifié autour de chaque élément.
• TextBlock.Padding et RichTextBlock.Padding : développez 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 visuellement difficile à voir. Pour cette raison, utilisez plutôt les paramètres De marge sur bloquer les conteneurs.

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

Exemple

Examinons les effets des éléments Margin et Padding sur des contrôles réels. Voici un élément TextBox à l’intérieur d’un élément Grid avec des valeurs par défaut définies sur 0 pour Margin et Padding.

Voici les mêmes éléments TextBox et Grid avec des valeurs positives pour Margin et Padding sur l’élément TextBox comme illustré 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’êtes pas obligé 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é au sein d’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é à plusieurs contrôles. Pour plus d’informations sur l’utilisation des styles, consultez Styles XAML.

Recommandations générales

• Appliquez uniquement des valeurs de mesure à certains éléments clés et utilisez un comportement de disposition fluide pour les autres éléments. Cela permet 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 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, il met à l’échelle les éléments d’interface utilisateur par plusieurs de 4. L’utilisation de valeurs par incréments de 4 permet d’obtenir le meilleur rendu en s’alignant sur des pixels entiers.

• Pour les petites largeurs de fenêtre (moins de 640 pixels), nous recommandons 12 gouttières epx, et pour les plus grandes largeurs de fenêtre, nous recommandons 24 gouttières epx.

Rubriques connexes

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