Expander
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. Im Header enthaltene Elemente sind immer sichtbar. Der Benutzer kann den Inhaltsbereich , in dem sekundärer Inhalt angezeigt wird, erweitern und reduzieren, indem er mit dem Header interagiert. Wenn der Inhaltsbereich erweitert wird, verschiebt er andere UI-Elemente aus dem Weg. Es überlagert keine andere Benutzeroberfläche. Die Expander kann sich nach oben oder unten ausdehnen.
Sowohl der Header Bereich als Content auch der Bereich können beliebige Inhalte enthalten, von einfachem Text bis hin zu komplexen UI-Layouts. Beispielsweise können Sie das -Steuerelement verwenden, um zusätzliche Optionen für ein Element anzuzeigen.
Ist dies das richtige Steuerelement?
Verwenden Sie eine Expander , wenn einige primäre Inhalte immer sichtbar sein sollen, aber verwandte sekundäre Inhalte möglicherweise ausgeblendet werden, bis sie benötigt werden. Diese Benutzeroberfläche wird häufig verwendet, wenn der Anzeigebereich begrenzt ist und Wenn 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.
UWP und WinUI 2
Wichtig
Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.
Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.
Der Expander für UWP-Apps erfordert die Windows-UI-Bibliothek 2. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek). APIs für dieses Steuerelement sind im Microsoft.UI.Xaml.Controls-Namespace vorhanden.
- WinUI 2 Apis:Expander-Klasse, Header-Eigenschaft, Content-Eigenschaft
- Öffnen Sie die WinUI 2-Katalog-App, und sehen Sie den Expander in Aktion. Die App WinUI 2-Katalog umfasst interaktive Beispiele für die meisten WinUI 2-Steuerelemente, -Features und -Funktionen. Rufen Sie die App aus dem Microsoft Store oder den Quellcode auf GitHub ab.
Zur Verwendung des Codes in diesem Artikel mit WinUI 2 stellen Sie die in Ihrem Projekt enthaltenen Windows-UI-Bibliothek-APIs mithilfe eines Alias in XAML dar (wir verwenden muxc). Weitere Informationen finden Sie unter Erste Schritte mit WinUI 2.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:Expander />
Erstellen eines Expanders
- Wichtige APIs:Expander-Klasse, Header-Eigenschaft, Content-Eigenschaft
Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.
In diesem Beispiel wird gezeigt, wie Sie einen einfachen Expander mit der Standardformatierung 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 eine Expander-Instanz erstellt, die wie in der vorherigen Abbildung aussieht.
<Expander Header="This text is in the header"
Content="This is in the content"/>
Expanderinhalt
Die Content-Eigenschaft eines kann ein Expander beliebiger Objekttyp sein, ist aber in der Regel eine Zeichenfolge oder ein UIElement. Weitere Informationen zum Festlegen der Content Eigenschaft finden Sie im Abschnitt Hinweise der ContentControl-Klasse .
Sie können komplexe, interaktive Ui als Inhalt von Expanderverwenden, einschließlich geschachtelter Expander Steuerelemente im Inhalt eines übergeordneten Elements Expander , wie hier gezeigt.
Inhaltsausrichtung
Sie können Inhalte ausrichten, indem Sie die Eigenschaften HorizontalContentAlignment und VerticalContentAlignment für das Expander Steuerelement festlegen. Wenn Sie diese Eigenschaften festlegen, gilt die Ausrichtung nur für den erweiterten Inhalt, nicht für den Header.
Steuern der Größe eines Expanders
Standardmäßig werden die Bereiche Kopfzeile und Inhalt automatisch so groß, dass sie ihrem Inhalt entsprechen. Es ist wichtig, die richtigen Techniken zu verwenden, um die Größe von zu steuern, Expander um unerwünschtes Aussehen oder Verhalten zu vermeiden.
Breite
Wenn der Inhalt breiter als die Kopfzeile ist, wird die Kopfzeilenbreite vergrößert, um dem Inhaltsbereich zu entsprechen, wenn er erweitert wird, und verkleinern, wenn der Inhaltsbereich reduziert wird. Um zu verhindern, dass sich die Breite des Steuerelements ändert, wenn sie erweitert oder reduziert wird, können Sie eine explizite Breite festlegen, oder, wenn das Steuerelement das untergeordnete Element eines Bereichs ist, HorizontalAlignment auf Stretch festlegen und die Größenanpassung vom Layoutbereich steuern lassen.
Hier werden eine Reihe verwandter Expander Steuerelemente in einem StackPanel platziert. Die HorizontalAlignment von jedem Expander in der StackPanel wird mithilfe eines Stils in den StackPanelRessourcen auf festgelegtStretch, und die Breite der StackPanel bestimmt die Breite der Expander 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>
Höhe
Geben Sie keine Höhe für an Expander. Wenn Sie dies tun, reserviert das Steuerelement diesen Platz auch dann, wenn der Inhaltsbereich reduziert wird, was den Zweck von Expanderverfehlt. Um die Größe des erweiterten Inhaltsbereichs anzugeben, legen Sie Größendimensionen für den Inhalt des Expanderfest. Bei Bedarf können Sie die Height des Inhalts einschränken und den Inhalt scrollbar machen.
Scrollbarer Inhalt
Wenn Ihr Inhalt für die Größe des Inhaltsbereichs zu groß ist, können Sie den Inhalt in scrollViewer umschließen, damit der Inhaltsbereich scrollbar ist. Das Expander-Steuerelement bietet keine automatische Scrollfunktion.
Wenn Sie einen ScrollViewer im Expander Inhalt platzieren, legen Sie die Höhe des Steuerelements ScrollViewer auf die erforderliche Höhe für den Inhaltsbereich fest. Wenn Sie stattdessen die Höhedimension für den Inhalt innerhalb von ScrollViewerfestlegen, ScrollViewer erkennt diese Einstellung nicht und stellt daher keinen bildlauffähigen Inhalt bereit.
Das folgende Beispiel zeigt, wie Sie ein Expander 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>
Erweitern und Reduzieren des Inhaltsbereichs
Standardmäßig ist der Expander reduziert und wird nach unten erweitert.
- Legen Sie die IsExpanded-Eigenschaft auf fest
true, damit der Inhaltsbereich anfänglich erweitert wird. - Legen Sie die ExpandDirection-Eigenschaft auf Up fest, damit der Inhalt nach oben erweitert wird.
<Expander IsExpanded="True" ExpandDirection="Up">
Ein Expander wird entweder programmgesteuert durch Festlegen der IsExpanded -Eigenschaft oder durch Interaktion mit dem Headererweitert oder reduziert. Es kann nicht mit Licht verworfen werden.
Tipp
Vorübergehende Benutzeroberfläche, z. B. eine Flyout oder die geöffnete Dropdownliste eines ComboBox, wird geschlossen, wenn Sie außerhalb der Benutzeroberfläche klicken oder tippen. Dies wird als light-dismiss bezeichnet. Der Inhaltsbereich eines Expander -Elements wird nicht als vorübergehend betrachtet und überlagert keine andere Benutzeroberfläche, sodass er das Lichtverwerfen nicht unterstützt.
Sie können auch die Ereignisse Erweitern und Reduzieren behandeln, um eine Aktion auszuführen, wenn der Inhalt angezeigt oder ausgeblendet wird. Im Folgenden finden Sie einige Beispiele für diese Ereignisse.
Erweiterndes Ereignis
In diesem Beispiel verfügen Sie über eine Gruppe von Expandern und möchten jeweils nur einen geöffnet haben. Wenn der Benutzer ein Expanderöffnet, behandeln Sie das Expanding-Ereignis und reduzieren alle Expander Steuerelemente in der Gruppe, auf die der Benutzer nicht geklickt hat.
Achtung
Abhängig von Ihrer App und Ihrer Benutzeroberfläche kann es ein Vorteil sein, Steuerelemente automatisch zu reduzieren Expander , wenn der Benutzer ein anderes erweitert. Dies nimmt dem Benutzer jedoch auch die Kontrolle. Wenn das Verhalten nützlich sein kann, sollten Sie es zu einer Option machen, 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;
}
}
}
Reduziertes Ereignis
In diesem Beispiel behandeln Sie das Collapsed-Ereignis und füllen das Header mit einer Zusammenfassung der Optionen auf, die Contentim ausgewählt sind.
Diese Abbildung zeigt den Expander mit dem erweiterten Inhalt und ausgewählten Optionen.
Wenn sie reduziert sind, werden die ausgewählten Optionen in der Kopfzeile zusammengefasst, sodass der Benutzer sie weiterhin sehen kann, ohne die Expanderzu öffnen.
<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();
}
Einfache Formatierung
Sie können die Standardeinstellung Style und ControlTemplate ändern, um dem Steuerelement ein eindeutiges Erscheinungsbild zu verleihen. Eine Liste der verfügbaren Designressourcen finden Sie im Abschnitt Steuerelementstil und Vorlage der Dokumentation zur Erweiterungs-API. Weitere Informationen finden Sie im Abschnitt Einfache Formatierung im Artikel über die Formatierung von Steuerelementen.
Empfehlungen
- Verwenden Sie einen
Expander, wenn der Anzeigebereich begrenzt ist und einige sekundäre Inhalte ausgeblendet werden können, bis der Benutzer dies anfordert.
Codebeispiele
Mit diesem XAML-Code wird die Gruppe von Expander Steuerelementen erstellt, die in anderen Teilen dieses Artikels gezeigt werden. Der Code für die Expanding Ereignishandler und Collapsed wird auch in den vorherigen Abschnitten gezeigt.
<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
Windows developer
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für