Delen via

Expander

Met het besturingselement Uitvouwen kunt u minder belangrijke inhoud weergeven of verbergen die is gerelateerd aan een deel van de primaire inhoud dat altijd zichtbaar is. Items in de koptekst zijn altijd zichtbaar. De gebruiker kan het gebied Inhoud uitvouwen en samenvouwen, waar secundaire inhoud wordt weergegeven door interactie met de koptekst. Wanneer het inhoudsgebied wordt uitgevouwen, worden andere UI-elementen opzij geschoven; het overlapt geen andere gebruikersinterface-elementen. De Expander kan omhoog of omlaag worden uitgevouwen.

Zowel de Header- als Content-gebieden kunnen alle soorten inhoud bevatten, van eenvoudige tekst tot complexe UI-indelingen. U kunt bijvoorbeeld het besturingselement gebruiken om extra opties voor een item weer te geven.

Een samengevouwen expander die is uitgevouwen en vervolgens weer is samengevouwen. De kop heeft de tekst

Is dit de juiste controle?

Gebruik een Expander optie wanneer bepaalde primaire inhoud altijd zichtbaar moet zijn, maar gerelateerde secundaire inhoud kan worden verborgen totdat dat nodig is. Deze gebruikersinterface wordt vaak gebruikt wanneer de weergaveruimte beperkt is en wanneer informatie of opties kunnen worden gegroepeerd. Als u de secundaire inhoud verbergt totdat deze nodig is, kunt u de gebruiker ook richten op de belangrijkste onderdelen van uw app.

Een expander maken

Open de WinUI 3 Gallery-app en zie de uitvouwfunctie in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

In dit voorbeeld ziet u hoe u een eenvoudige Expander maakt met de standaardstijl. De eigenschap Header definieert het element dat altijd zichtbaar is. De eigenschap Inhoud definieert het element dat kan worden samengevouwen en uitgevouwen. In dit voorbeeld wordt een Expander gemaakt die lijkt op de vorige afbeelding.

<Expander Header="This text is in the header"
               Content="This is in the content"/>

Inhoud uitvouwen

De eigenschap Inhoud van een Expander object kan elk type object zijn, maar is meestal een tekenreeks of UIElement. Zie de sectie Opmerkingen van de klasse Content voor meer informatie over het instellen van de eigenschap.

U kunt complexe, interactieve gebruikersinterfaces gebruiken als de inhoud van de Expander, inclusief geneste Expander-besturingselementen in de inhoud van een bovenliggende Expander, zoals hier getoond.

Een open Expander met vier Expander-besturingselementen die zijn genest in de inhoud. Elk van de geneste Expander-besturingselementen heeft een keuzerondje en tekst in de koptekst

Inhoudsuitlijning

U kunt inhoud uitlijnen door de eigenschappen HorizontalContentAlignment en VerticalContentAlignment in te stellen op het Expander besturingselement. Wanneer u deze eigenschappen instelt, is de uitlijning alleen van toepassing op de uitgebreide inhoud, niet op de koptekst.

De grootte van een expander bepalen

Standaard wordt de grootte van de koptekst - en inhoudsgebieden automatisch aangepast aan de inhoud. Het is belangrijk om de juiste technieken te gebruiken om de grootte van de Expander onder controle te houden om ongewenst uiterlijk of gedrag te voorkomen.

Breedte

Als de inhoud breder is dan de koptekst, neemt de koptekstbreedte toe zodat deze overeenkomt met het inhoudsgebied wanneer deze wordt uitgevouwen en wordt verkleind wanneer het inhoudsgebied wordt samengevouwen. Als u wilt voorkomen dat de breedte van het besturingselement wordt gewijzigd wanneer deze wordt uitgevouwen of samengevouwen, kunt u een expliciete breedte instellen of, als het besturingselement het onderliggende element van een paneel is, horizontaal uitlijnen op Stretch instellen en het indelingsvenster de grootte laten bepalen.

Hier worden een serie gerelateerde Expander bedieningspanelen in een StackPanel geplaatst. De HorizontalAlignment van elk Expander in de StackPanel is ingesteld op Stretch met behulp van een stijl in de StackPanelresources en de breedte van de StackPanel bepaalt de breedte van de Expander elementen.

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

Drie uitbreidingsbesturingselementen die verticaal zijn gestapeld, allemaal dezelfde breedte

Hoogte

Geef geen hoogte op op de Expander. Als u dat doet, behoudt het besturingselement die ruimte, zelfs wanneer het inhoudsgebied is samengevouwen, waardoor het doel van de Expanderwordt verslagen. Als u de grootte van het uitgebreide inhoudsgebied wilt opgeven, stelt u de groottedimensies in voor de inhoud van het Expandergebied. Als dat nodig is, kunt u de Height van de inhoud beperken en de inhoud scrollbaar maken.

Schuifbare inhoud

Als uw inhoud te groot is voor de grootte van het inhoudsgebied, kunt u de inhoud verpakken als ScrollViewer om het inhoudsgebied te laten schuiven. Het besturingselement Expander biedt niet automatisch schuifmogelijkheden.

Wanneer u een ScrollViewer in de inhoud van het Expander plaatst, stelt u de hoogte van het besturingselement ScrollViewer in op de vereiste hoogte voor het inhoudsgebied. Als u in plaats daarvan de hoogtedimensie instelt op de inhoud in de ScrollViewer, herkent ScrollViewer deze instelling niet en biedt het daarom geen schuifbare inhoud.

In het volgende voorbeeld ziet u hoe u een Expander controlelement maakt dat scrollbare tekst als inhoud heeft.

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

Een uitvouwfunctie met schuifbare tekst als inhoud

Het inhoudsgebied uitvouwen en samenvouwen

De expander staat standaard samengevouwen en vouwt naar beneden uit.

  • Stel de eigenschap IsExpanded in om true het inhoudsgebied in eerste instantie uit te breiden.
  • Stel de eigenschap ExpandDirection in op Up om de inhoud omhoog uit te vouwen.
<Expander IsExpanded="True" ExpandDirection="Up">

Een Expander wordt programmatisch uitgevouwen of samengevouwen door de IsExpanded eigenschap in te stellen of door interactie met de Header; het kan niet licht worden afgewezen.

Aanbeveling

Tijdelijke gebruikersinterface, zoals een Flyout of de open vervolgkeuzelijst van een ComboBox, wordt gesloten wanneer u erbuiten klikt of tapt. Dit wordt licht-verbergen genoemd. Het inhoudsgebied van een Expander wordt niet als tijdelijk beschouwd en overlapt andere gebruikersinterfaces niet, waardoor het geen ondersteuning biedt voor light-dismiss.

U kunt ook de gebeurtenissen Uitvouwen en Samengevouwen afhandelen om een actie uit te voeren wanneer de inhoud wordt weergegeven of verborgen. Hier volgen enkele voorbeelden van deze gebeurtenissen.

Uitbreiden van gebeurtenis

In dit voorbeeld hebt u een groep uitvouwpanelen en wilt u gelijktijdig slechts één ervan openen. Wanneer de gebruiker een Expander opent, handelt u de Expanding gebeurtenis af en vouwt u alle Expander besturingselementen in de groep in, behalve degene waarop de gebruiker heeft geklikt.

Waarschuwing

Afhankelijk van uw app en gebruikerservaring kan het handig zijn om automatisch Expander-elementen samen te vouwen wanneer de gebruiker een ander element uitvouwt. Dit neemt echter ook de controle van de gebruiker weg. Als het gedrag nuttig kan zijn, kunt u overwegen deze optie te maken die de gebruiker eenvoudig kan instellen.

<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;
        }
    }
}

Ingeklapte gebeurtenis

In dit voorbeeld behandelt u de Collapsed gebeurtenis en vult u de Header met een samenvatting van de opties die zijn geselecteerd in de Content.

In deze afbeelding ziet u de Expander met de inhoud uitgevouwen en de opties geselecteerd.

Een uitklapbaar besturingselement met geselecteerde opties weergegeven in het inhoudelijke gebied

Wanneer deze zijn samengevouwen, worden de geselecteerde opties samengevat in de koptekst, zodat de gebruiker deze nog steeds kan zien zonder de Expanderoptie te openen.

Een samengevouwen Expander-besturingselement met geselecteerde opties in de kop samengevat 

<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();
}

Lichtgewicht vormgeving

U kunt de standaardinstellingen Style en ControlTemplate wijzigen om het besturingselement een uniek uiterlijk te geven. Zie de sectie Control Style and Template van de Expander-API-documenten voor een lijst met de beschikbare themaresources. Zie de sectie Lichtgewicht styling van het artikel Styling controls voor meer informatie.

Aanbevelingen

  • Gebruik een Expander wanneer de weergaveruimte beperkt is en sommige secundaire inhoud kan worden verborgen totdat de gebruiker deze aanvraagt.

Codevoorbeelden

Deze XAML maakt de groep Expander controle-elementen die te zien zijn in andere delen van dit artikel. De code voor de Expanding en Collapsed gebeurtenis-handlers wordt ook weergegeven in de vorige secties.

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

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

Voor de Expander voor UWP-apps is WinUI 2 vereist. Zie WinUI 2 voor meer informatie, inclusief installatie-instructies. API's voor deze control bevinden zich in de Microsoft.UI.Xaml.Controls naamruimte.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:Expander />
  • Last updated on