Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Mit dem Expander-Steuerelement können Sie weniger wichtige Inhalte anzeigen oder ausblenden, die sich auf einen Teil des primären Inhalts beziehen, der immer sichtbar ist. Elemente, die in der Kopfzeile enthalten sind, sind immer sichtbar. Der Benutzer kann den Inhaltsbereich erweitern und reduzieren, in dem sekundäre Inhalte angezeigt werden, indem er mit der Kopfzeile interagiert. Wenn der Inhaltsbereich erweitert wird, verschiebt er andere UI-Elemente weg. es überlagert keine andere Benutzeroberfläche. Die kann nach oben oder unten erweitert werden.
Sowohl der - als auch der -Bereich können beliebige Inhalte enthalten, von einfachem Text bis hin zu komplexen UI-Layouts. Sie können z. B. das Steuerelement verwenden, um zusätzliche Optionen für ein Element anzuzeigen.
Ein reduzierter Expander, der erweitert und dann reduziert wird. Die Kopfzeile enthält den Text "Dieser Text befindet sich in der Kopfzeile", und der Inhalt hat den Text "Dies ist im Inhalt".
Ist dies das richtige Steuerelement?
Verwenden Sie ein , wenn einige primäre Inhalte immer sichtbar sein sollten, während verwandte, sekundäre Inhalte verborgen werden können, bis sie benötigt werden. Diese Benutzeroberfläche wird häufig verwendet, wenn der Anzeigebereich begrenzt ist und Informationen oder Optionen gruppiert werden können. Das Ausblenden des sekundären Inhalts, bis er benötigt wird, kann auch dazu beitragen, den Benutzer auf die wichtigsten Teile Ihrer App zu konzentrieren.
Erstellen eines Expanders
- Wichtige APIs:Expander-Klasse, Header-Eigenschaft, Content-Eigenschaft
Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie die Erweiterung in Aktion.
WinUI 3-Galeriesymbol Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.
In diesem Beispiel wird gezeigt, wie Sie ein einfaches Expander-Element mit dem Standardstil erstellen. Die Header-Eigenschaft definiert das Element, das immer sichtbar ist. Die Content-Eigenschaft definiert das Element, das reduziert und erweitert werden kann. In diesem Beispiel wird ein Objekt erstellt, das wie die vorherige Abbildung aussieht.
<Expander Header="This text is in the header"
Content="This is in the content"/>
Erweitern von Inhalten
Die Content-Eigenschaft eines Objekts kann ein beliebiger Objekttyp sein, ist jedoch in der Regel eine Zeichenfolge oder ein UIElement. Weitere Informationen zum Festlegen der Eigenschaft finden Sie im Abschnitt "Hinweise" der ContentControl-Klasse .
Sie können komplexe, interaktive UI als Inhalt des -Elements verwenden, einschließlich geschachtelter -Steuerelemente im Inhalt eines übergeordneten -Elements, wie hier gezeigt.
Ein geöffneter Expander mit vier Expander-Steuerelementen, die in seinem Inhalt geschachtelt sind. Jedes der geschachtelten Expander-Steuerelemente verfügt über ein Optionsfeld und Text in der Kopfzeile.
Inhaltsausrichtung
Sie können Inhalte ausrichten, indem Sie die Eigenschaften "HorizontalContentAlignment " und "VerticalContentAlignment " für das Steuerelement festlegen. Wenn Sie diese Eigenschaften festlegen, gilt die Ausrichtung nur für den erweiterten Inhalt, nicht für die Kopfzeile.
Steuern der Größe eines Expanders
Standardmäßig werden die Kopfzeilenbereiche und Inhaltsbereiche automatisch so dimensioniert, dass sie ihren Inhalt aufnehmen. Es ist wichtig, die richtigen Techniken zu verwenden, um die Größe der zu steuern, um unerwünschte Darstellung oder Verhalten zu vermeiden.
Breite
Wenn der Inhalt breiter als die Kopfzeile ist, vergrößert sich die Kopfzeilenbreite, um sich dem Inhaltsbereich anzupassen, wenn er erweitert wird, und verkleinert sich, wenn er reduziert wird. Um zu verhindern, dass die Steuerelementbreite beim Erweitern oder Reduzieren geändert wird, können Sie eine explizite Breite festlegen oder, wenn das Steuerelement das untergeordnete Element eines Panels ist, HorizontalAlignment auf Stretch festlegen und dem Layout-Panel die Größenanpassung ermöglichen.
Hier werden eine Reihe verwandter Steuerelemente in einem StackPanel platziert. Die jedes im wird auf mithilfe einer Formatvorlage in den Ressourcen festgelegt, und die Breite der bestimmt die Breite der Steuerelemente.
<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>
Drei Erweiterungssteuerelemente sind vertikal gestapelt, alle die gleiche Breite
Höhe
Geben Sie keine Höhe für die . Wenn Sie dies tun, reserviert das Steuerelement diesen Platz, auch wenn der Inhaltsbereich eingeklappt wird, was dem Zweck des zuwiderläuft. Um die Größe des erweiterten Inhaltsbereichs anzugeben, legen Sie Größenabmessungen für den Inhalt des Inhalts fest. Bei Bedarf können Sie den Inhalt einschränken und den Inhalt scrollen lassen.
Scrollbare Inhalte
Wenn Ihr Inhalt zu groß für die Größe des Inhaltsbereichs ist, können Sie ihn in einen ScrollViewer einfügen, um den Inhaltsbereich bildlauffähig zu machen. Das Steuerelement bietet keine automatische Scrollfunktion.
Wenn Sie ein im -Inhalt platzieren, legen Sie die Höhe des -Steuerelements auf die erforderliche Höhe für den Inhalt fest. Wenn Sie stattdessen die Höhe der Inhalte innerhalb der -Inhalte festlegen, erkennt diese Einstellung nicht und stellt daher keinen scrollbaren Inhalt bereit.
Das folgende Beispiel zeigt, wie Sie ein Steuerelement erstellen, das bildlauffähigen Text als Inhalt enthält.
<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>
Ein Expander mit scrollbarem Text als Inhalt
Erweitern und Reduzieren des Inhaltsbereichs
Standardmäßig ist der Expander zusammengeklappt und öffnet sich nach unten.
- Legen Sie die IsExpanded-Eigenschaft auf fest, damit der Inhaltsbereich anfänglich erweitert ist.
- Legen Sie die ExpandDirection-Eigenschaft auf "Up " fest, damit der Inhalt nach oben erweitert wird.
<Expander IsExpanded="True" ExpandDirection="Up">
Ein Objekt wird entweder programmgesteuert erweitert oder reduziert, indem die Eigenschaft festgelegt wird, oder durch Interaktion mit dem ; es kann nicht leicht geschlossen werden.
Tipp
Vorübergehende UI, wie zum Beispiel eine oder das geöffnete Dropdown-Menü eines , schließt sich, wenn Sie außerhalb davon klicken oder tippen. Dies wird als light-dismiss bezeichnet. Der Inhaltsbereich eines Elements wird nicht als vorübergehend betrachtet und überlagert keine andere Benutzeroberfläche, sodass es kein einfaches Ausblenden unterstützt.
Sie können auch die Ereignisse "Erweitern" und " Collapsed " behandeln, um eine Aktion auszuführen, wenn der Inhalt angezeigt oder ausgeblendet wird. Hier sind einige Beispiele für diese Ereignisse.
Erweiterungsereignis
In diesem Beispiel haben Sie eine Gruppe von Expandern und möchten jeweils nur einen gleichzeitig offen halten. Wenn der Benutzer ein öffnet, behandeln Sie das Expanding-Ereignis und reduzieren alle Steuerelemente in der Gruppe, außer dem, auf das der Benutzer geklickt hat.
Vorsicht
Je nach Ihrer App und Benutzererfahrung kann es vorteilhaft sein, die Steuerelemente automatisch einzuklappen, wenn der Benutzer ein anderes erweitert. Dies nimmt jedoch auch die Kontrolle vom Benutzer ab. Wenn das Verhalten hilfreich sein könnte, sollten Sie es als Option festlegen, die der Benutzer leicht festlegen kann.
<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;
}
}
}
Eingeklapptes Ereignis
In diesem Beispiel behandeln Sie das Collapsed-Ereignis und füllen das mit einer Zusammenfassung der Optionen, die in ausgewählt sind.
Diese Abbildung zeigt das mit erweitertem Inhalt und ausgewählten Optionen.
Ein erweitertes Expander-Steuerelement mit ausgewählten Optionen, die im Inhaltsbereich angezeigt werden
Wenn sie eingeklappt sind, werden die ausgewählten Optionen in der Überschrift zusammengefasst, sodass der Benutzer sie weiterhin sehen kann, ohne zu öffnen.
Ein reduziertes Expander-Steuerelement mit ausgewählten Optionen, die in der Kopfzeile zusammengefasst sind
<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();
}
Leichtgewichtige Gestaltung
Sie können die Standardeinstellungen von und ändern, um dem Steuerelement eine einzigartige Darstellung zu verleihen. Eine Liste der verfügbaren Themenressourcen finden Sie im Abschnitt "Steuerelementstil und -vorlage" der Erweiterungs-API-Dokumente. Weitere Informationen finden Sie im Abschnitt "Leichtgewichtige Formatierung" des Artikels "Formatierungssteuerelemente".
Recommendations
- Verwenden Sie ein , wenn der Anzeigebereich begrenzt ist, und einige sekundäre Inhalte könnten ausgeblendet werden, bis der Benutzer sie anfordert.
Code-Beispiele
Dieser XAML-Code erstellt die Gruppe von Steuerelementen, die in anderen Teilen dieses Artikels gezeigt werden. Der Code für die und Ereignishandler wird auch in vorherigen Abschnitten angezeigt.
<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>
Verwandte Artikel
- Seitenlayout
- Expander-Klasse
Zusammenarbeit auf GitHub
Die Quelle für diesen Inhalt finden Sie auf GitHub, wo Sie auch Issues und Pull Requests erstellen und überprüfen können. Weitere Informationen finden Sie in unserem Leitfaden für Mitwirkende.
Windows developer