Expander
Le contrôle Expander vous permet d’afficher ou de masquer du contenu moins important lié à un élément de contenu principal qui est toujours visible. Les éléments contenus dans l’en-tête sont toujours visibles. L’utilisateur peut développer et réduire la zone Contenu , où le contenu secondaire est affiché, en interagissant avec l’en-tête. Lorsque la zone de contenu est développée, elle pousse d’autres éléments d’interface utilisateur hors de la voie ; elle ne superpose pas les autres interfaces utilisateur. Peut Expander se développer vers le haut ou vers le bas.
Header Les zones et Content peuvent contenir n’importe quel contenu, du texte simple aux dispositions d’interface utilisateur complexes. Par exemple, vous pouvez utiliser le contrôle pour afficher des options supplémentaires pour un élément.
Est-ce le contrôle approprié ?
Utilisez un Expander quand un contenu principal doit toujours être visible, mais que le contenu secondaire associé peut être masqué jusqu’à ce que cela soit nécessaire. Cette interface utilisateur est couramment utilisée lorsque l’espace d’affichage est limité et lorsque des informations ou des options peuvent être regroupées. Masquer le contenu secondaire jusqu’à ce qu’il soit nécessaire peut également aider à concentrer l’utilisateur sur les parties les plus importantes de votre application.
UWP et WinUI 2
Important
Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d'application Windows et WinUI 3, mais qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.
Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.
L’expandeur pour les applications UWP nécessite la bibliothèque d’interface utilisateur Windows 2. Pour plus d’informations, notamment des instructions d’installation, consultez la bibliothèque d’interface utilisateur Windows. Les API de ce contrôle existent dans l’espace de noms Microsoft.UI.Xaml.Controls .
- Classe Apis:Expander WinUI 2, propriété Header, propriété Content
- Ouvrez l’application Galerie WinUI 2 et voyez le expandeur en action. L’application WinUI 2 Gallery comprend des exemples interactifs de la plupart des contrôles et fonctionnalités WinUI 2. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.
Pour utiliser le code de cet article avec WinUI 2, utilisez un alias en XAML (nous utilisons muxc) pour représenter les API de bibliothèque d’interface utilisateur Windows incluses dans votre projet. Consultez Bien démarrer avec WinUI 2 pour plus d’informations.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:Expander />
Créer un expandeur
- API importantes :classe Expander, propriété Header, propriété Content
L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.
Cet exemple montre comment créer un expandeur simple avec le style par défaut. La propriété Header définit l’élément qui est toujours visible. La propriété Content définit l’élément qui peut être réduit et développé. Cet exemple crée un Expander qui ressemble à l’illustration précédente.
<Expander Header="This text is in the header"
Content="This is in the content"/>
Contenu de l’expandeur
La propriété Content d’un Expander peut être n’importe quel type d’objet, mais il s’agit généralement d’une chaîne ou d’un élément UIElement. Pour plus d’informations sur la définition de la Content propriété, consultez la section Remarques de la classe ContentControl .
Vous pouvez utiliser une interface utilisateur complexe et interactive comme contenu du Expander, y compris des contrôles imbriqués Expander dans le contenu d’un parent Expander , comme illustré ici.
Alignement du contenu
Vous pouvez aligner le contenu en définissant les propriétés HorizontalContentAlignment et VerticalContentAlignment sur le Expander contrôle. Lorsque vous définissez ces propriétés, l’alignement s’applique uniquement au contenu développé, et non à l’en-tête.
Contrôler la taille d’un expandeur
Par défaut, les zones En-tête et Contenu sont automatiquement dimensionées pour s’adapter à leur contenu. Il est important d’utiliser les techniques appropriées pour contrôler la taille du afin d’éviter une Expander apparence ou un comportement indésirables.
Largeur
Si le contenu est plus large que l’en-tête, la largeur de l’en-tête augmente pour correspondre à la zone de contenu lorsqu’elle est développée et diminue lorsque la zone de contenu est réduite. Pour empêcher la modification de la largeur du contrôle en cas de développement ou de réduction, vous pouvez définir une largeur explicite ou, si le contrôle est l’enfant d’un panneau, définir HorizontalAlignment sur Stretch et laisser le panneau de disposition contrôler le dimensionnement.
Ici, une série de contrôles associés Expander sont placés dans un StackPanel. Le HorizontalAlignment de chaque Expander dans est StackPanel défini sur à Stretch l’aide d’un style dans les StackPanelressources, et la largeur de détermine StackPanel la largeur des Expander contrôles.
<StackPanel x:Name="ExpanderStack" MaxWidth="600">
<StackPanel.Resources>
<Style TargetType="Expander">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</StackPanel.Resources>
<Expander Header="Choose your crust"> ... </Expander>
<Expander Header="Choose your sauce"> ... </Expander>
<Expander Header="Choose your toppings"> ... </Expander>
</StackPanel>
Hauteur
Ne spécifiez pas de hauteur sur .Expander Dans ce cas, le contrôle réserve cet espace même lorsque la zone de contenu est réduite, ce qui va à l’encontre de l’objectif Expanderde . Pour spécifier la taille de la zone de contenu développée, définissez des dimensions de taille sur le contenu du Expander. Si nécessaire, vous pouvez limiter le Height du contenu et le faire défiler.
Contenu avec défilement
Si votre contenu est trop volumineux pour la taille de la zone de contenu, vous pouvez encapsuler le contenu dans ScrollViewer pour qu’il soit accessible en mode défilement. Le Expander contrôle ne fournit pas automatiquement de fonctionnalité de défilement.
Lorsque vous placez un ScrollViewer dans le Expander contenu, définissez la hauteur sur le ScrollViewer contrôle sur la hauteur requise pour la zone de contenu. Si vous définissez plutôt la dimension de hauteur sur le contenu à l’intérieur du ScrollViewer, ScrollViewer ne reconnaît pas ce paramètre et ne fournit donc pas de contenu avec défilement.
L’exemple suivant montre comment créer un contrôle qui contient du Expander texte défilant en tant que contenu.
<Expander Header="Expander with scrollable content">
<ScrollViewer MaxHeight="200">
<Grid>
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</TextBlock>
</Grid>
</ScrollViewer>
</Expander>
Développement et réduction de la zone de contenu
Par défaut, le expandeur est réduit et se développe vers le bas.
- Définissez la propriété IsExpanded sur
truepour que la zone de contenu soit initialement développée. - Définissez la propriété ExpandDirection sur Up pour développer le contenu vers le haut.
<Expander IsExpanded="True" ExpandDirection="Up">
Un Expander est développé ou réduit par programmation en définissant la IsExpanded propriété ou en interagissant avec le Header; il ne peut pas être ignoré par la lumière.
Conseil
L’interface utilisateur temporaire, telle qu’une Flyout ou la liste déroulante ouverte d’un ComboBox, se ferme lorsque vous cliquez ou appuyez à l’extérieur de celle-ci. C’est ce qu’on appelle light-dismiss. La zone de contenu d’un Expander n’est pas considérée comme temporaire et ne superpose pas d’autres interfaces utilisateur. Elle ne prend donc pas en charge le light-dismiss.
Vous pouvez également gérer les événements Développer et Réduire pour effectuer une action lorsque le contenu est affiché ou masqué. Voici quelques exemples de ces événements.
Événement de développement
Dans cet exemple, vous disposez d’un groupe d’expandeurs et souhaitez n’avoir qu’un seul ouvert à la fois. Lorsque l’utilisateur ouvre un Expander, vous gérez l’événement Expansion et vous réduisez tous les Expander contrôles du groupe autre que celui sur lequel l’utilisateur a cliqué.
Attention
Selon votre application et l’expérience utilisateur, il peut être pratique de réduire Expander automatiquement les contrôles lorsque l’utilisateur en développe un autre. Toutefois, cela enlève également le contrôle à l’utilisateur. Si le comportement peut être utile, envisagez d’en faire une option que l’utilisateur peut facilement définir.
<StackPanel x:Name="ExpanderStack">
<Expander Header="Choose your crust"
Expanding="Expander_Expanding"> ... </Expander>
<Expander Header="Choose your sauce"
Expanding="Expander_Expanding"> ... </Expander>
<Expander Header="Choose your toppings"
Expanding="Expander_Expanding"> ... </Expander>
</StackPanel>
// Let the user opt out of custom behavior.
private bool _autoCollapse = true;
private void Expander_Expanding(muxc.Expander sender,
muxc.ExpanderExpandingEventArgs args)
{
if (_autoCollapse == true)
{
foreach (muxc.Expander ex in ExpanderStack.Children)
{
if (ex != sender && ex.IsExpanded)
ex.IsExpanded = false;
}
}
}
Événement réduit
Dans cet exemple, vous gérez l’événement Collapsed et remplissez le Header avec un résumé des options sélectionnées dans .Content
Cette image montre le Expander avec le contenu développé et les options sélectionnées.
Lorsqu’elles sont réduites, les options sélectionnées sont résumées dans l’en-tête afin que l’utilisateur puisse toujours les voir sans ouvrir le Expander.
<Expander IsExpanded="True"
Expanding="Expander_Expanding"
Collapsed="Expander_Collapsed">
<Expander.Header>
<Grid>
<TextBlock Text="Choose your crust"/>
<TextBlock x:Name="tbCrustSelections"
HorizontalAlignment="Right"
Style="{StaticResource CaptionTextBlockStyle}"/>
</Grid>
</Expander.Header>
<StackPanel Orientation="Horizontal">
<RadioButtons x:Name="rbCrustType" SelectedIndex="0">
<x:String>Classic</x:String>
<x:String>Whole wheat</x:String>
<x:String>Gluten free</x:String>
</RadioButtons>
<RadioButtons x:Name="rbCrustStyle" SelectedIndex="0"
Margin="48,0,0,0">
<x:String>Regular</x:String>
<x:String>Thin</x:String>
<x:String>Pan</x:String>
<x:String>Stuffed</x:String>
</RadioButtons>
</StackPanel>
</Expander>
private void Expander_Collapsed(muxc.Expander sender,
muxc.ExpanderCollapsedEventArgs args)
{
// Update the header with options selected in the content.
tbCrustSelections.Text = rbCrustType.SelectedItem.ToString() +
", " + rbCrustStyle.SelectedItem.ToString();
}
Création d’un style léger
Vous pouvez modifier la valeur par défaut Style et ControlTemplate donner au contrôle une apparence unique. Consultez la section Style de contrôle et modèle de la documentation de l’API Expander pour obtenir la liste des ressources de thème disponibles. Pour plus d’informations, consultez la section Style léger de l’article Application de styles aux contrôles.
Recommandations
- Utilisez un lorsque l’espace d’affichage
Expanderest limité et qu’un contenu secondaire peut être masqué jusqu’à ce que l’utilisateur le demande.
Exemples de code
Ce code XAML crée le groupe de Expander contrôles indiqué dans d’autres parties de cet article. Le code des gestionnaires d’événements Expanding et Collapsed est également indiqué dans les sections précédentes.
<StackPanel x:Name="ExpanderStack" MaxWidth="600">
<StackPanel.Resources>
<Style TargetType="Expander">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</StackPanel.Resources>
<Expander IsExpanded="True"
Expanding="Expander_Expanding"
Collapsed="Expander_Collapsed">
<Expander.Header>
<Grid>
<TextBlock Text="Choose your crust"/>
<TextBlock x:Name="tbCrustSelections"
HorizontalAlignment="Right"
Style="{StaticResource CaptionTextBlockStyle}"/>
</Grid>
</Expander.Header>
<StackPanel Orientation="Horizontal">
<RadioButtons x:Name="rbCrustType" SelectedIndex="0">
<x:String>Classic</x:String>
<x:String>Whole wheat</x:String>
<x:String>Gluten free</x:String>
</RadioButtons>
<RadioButtons x:Name="rbCrustStyle" SelectedIndex="0"
Margin="48,0,0,0">
<x:String>Regular</x:String>
<x:String>Thin</x:String>
<x:String>Pan</x:String>
<x:String>Stuffed</x:String>
</RadioButtons>
</StackPanel>
</Expander>
<Expander Header="Choose your sauce" Margin="24"
Expanding="Expander_Expanding">
<RadioButtons SelectedIndex="0" MaxColumns="2">
<x:String>Classic red</x:String>
<x:String>Garlic</x:String>
<x:String>Pesto</x:String>
<x:String>Barbecue</x:String>
</RadioButtons>
</Expander>
<Expander Header="Choose your toppings"
Expanding="Expander_Expanding">
<StackPanel>
<Expander>
<Expander.Header>
<RadioButton GroupName="Toppings" Content="House special"/>
</Expander.Header>
<TextBlock Text="Cheese, pepperoni, sausage, black olives, mushrooms"
TextWrapping="WrapWholeWords"/>
</Expander>
<Expander>
<Expander.Header>
<RadioButton GroupName="Toppings" Content="Vegetarian"/>
</Expander.Header>
<TextBlock Text="Cheese, mushrooms, black olives, green peppers, artichoke hearts"
TextWrapping="WrapWholeWords"/>
</Expander>
<Expander>
<Expander.Header>
<RadioButton GroupName="Toppings" Content="All meat"/>
</Expander.Header>
<TextBlock Text="Cheese, pepperoni, sausage, ground beef, salami"
TextWrapping="WrapWholeWords"/>
</Expander>
<Expander>
<Expander.Header>
<RadioButton GroupName="Toppings" Content="Choose your own"/>
</Expander.Header>
<StackPanel Orientation="Horizontal">
<StackPanel>
<CheckBox Content="Cheese"/>
<CheckBox Content="Pepperoni"/>
<CheckBox Content="Sausage"/>
</StackPanel>
<StackPanel>
<CheckBox Content="Ground beef"/>
<CheckBox Content="Salami"/>
<CheckBox Content="Mushroom"/>
</StackPanel>
<StackPanel>
<CheckBox Content="Black olives"/>
<CheckBox Content="Green peppers"/>
<CheckBox Content="Artichoke hearts"/>
</StackPanel>
</StackPanel>
</Expander>
</StackPanel>
</Expander>
</StackPanel>
Articles connexes
Windows developer
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour