Section & ColonneSectionColumn

Les Section composants et SectionColumn fournissent une mise en page réactive à plusieurs colonnes pour organiser les champs de formulaires et le contenu. Les colonnes sont disposées horizontalement et s’enroulent automatiquement vers la ligne suivante lorsque la largeur disponible est limitée.

Colonnes

Placez un ou plusieurs SectionColumn composants dans un Section. Les colonnes se répartissent uniformément sur la largeur disponible. Utiliser ColumnCount pour définir explicitement le nombre de colonnes (1 à 4) ; si elle est omise, elle est par défaut le nombre d’enfants SectionColumn .

Largeur minimale de colonne

Posez ColumnMinWidth sur le Section pour contrôler quand les colonnes passent à la ligne suivante. Lorsque la largeur disponible par colonne descend en dessous de ce seuil, les colonnes s’empilent verticalement. Par défaut, .340px

Largeurs de colonnes

Utilisez Width sur un SectionColumn pour lui donner une part plus grande ou plus petite de la rangée. Les largeurs sont des rapports, pas des pourcentages CSS : trois colonnes avec Width="3", Width="4", Width="3" disposées en 30 % / 40 % / 30 % (3 + 4 + 3 = 10 parties). Colonnes sans Width option de retour à la distribution par défaut égale.

En-têtes et pieds de page

À la fois Section et SectionColumn les paramètres support HeaderText/Header et FooterText/Footer . Utilisez HeaderText pour des titres textuels simples ou Header pour du contenu de fragments de rendu personnalisés.

Frontières

Réglez BorderVisible="true" sur un Section ou SectionColumn pour afficher une bordure autour. Les bordures peuvent être définies indépendamment sur la section et chaque colonne.

Orientation du contenu

Par défaut, les composants de l’éditeur à l’intérieur de un SectionColumn sont empilés verticalement. Réglez-les ColumnContentOrientation="ComponentOrientation.Horizontal" pour les poser horizontalement à la place. Utiliser HorizontalGap et VerticalGap contrôler l’espacement entre les objets.