Sdílet prostřednictvím

Expander

Ovládací prvek Expander umožňuje zobrazit nebo skrýt méně důležitý obsah, který souvisí s částí primárního obsahu, která je vždy viditelná. Položky obsažené v záhlaví jsou vždy viditelné. Uživatel může rozbalit a sbalit oblast obsahu , kde se zobrazí sekundární obsah, a to interakcí se záhlavím. Když se oblast obsahu rozbalí, posune ostatní prvky uživatelského rozhraní stranou; nepřekrývá jiné prvky uživatelského rozhraní. Expander se může rozšířit nahoru nebo dolů.

Oblasti Header i Content můžou obsahovat jakýkoli obsah, od jednoduchého textu po složitá rozložení uživatelského rozhraní. Pomocí ovládacího prvku můžete například zobrazit další možnosti položky.

Sbalený Expander, který se rozbalí a pak znovu sbalí. Záhlaví má text

Je to správná kontrola?

Použijte Expander, pokud by měl být nějaký primární obsah vždy viditelný, ale související sekundární obsah může být skrytý, dokud nebude potřeba. Toto uživatelské rozhraní se běžně používá, když je místo pro zobrazení omezené a kdy je možné informace nebo možnosti seskupit dohromady. Skrytí sekundárního obsahu, dokud nebude potřeba, může také pomoct zaměřit uživatele na nejdůležitější části aplikace.

Vytvořte rozbalovací prvek

Otevřete aplikaci WinUI 3 Gallery a podívejte se na Expander v akci.

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Tento příklad ukazuje, jak vytvořit jednoduchý rozbalovač s výchozími styly. Vlastnost Header definuje prvek, který je vždy viditelný. Vlastnost Content definuje prvek, který lze sbalit a rozbalit. Tento příklad vytváří Expander, který vypadá jako na předchozím obrázku.

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

Obsah expanderu

Vlastnost Content objektu Expander může být libovolný typ objektu, ale obvykle se jedná o řetězec nebo UIElement. Další podrobnosti o nastavení Content vlastnosti naleznete v části Poznámky Třídy ContentControl .

Jako obsah Expandermůžete použít složité interaktivní uživatelské rozhraní, včetně vnořených ovládacích prvků Expander v obsahu nadřazeného Expander, jak je znázorněno zde.

Otevřený expander se čtyřmi ovládacími prvky Expander vnořenými do jeho obsahu. Každý z těchto vnořených ovládacích prvků Expander má ve svém záhlaví přepínač a text.

Zarovnání obsahu

Obsah můžete zarovnat nastavením vlastností HorizontalContentAlignment a Expander ovládacího prvku. Když nastavíte tyto vlastnosti, zarovnání se vztahuje pouze na rozbalený obsah, nikoli na záhlaví.

Ovládání velikosti Expandéru

Ve výchozím nastavení se oblasti záhlaví a obsahu automaticky přizpůsobí jejich obsahu. Je důležité použít správné techniky k řízení velikosti Expander, aby se zabránilo nežádoucímu vzhledu nebo chování.

Šířka

Pokud je obsah širší než záhlaví, zvýší se šířka záhlaví tak, aby odpovídala oblasti obsahu při rozbalení, a zmenší se, když se oblast obsahu sbalí. Chcete-li zabránit změně šířky ovládacího prvku při rozbalení nebo sbalení, můžete nastavit explicitní šířku, nebo pokud je ovládací prvek podřízen Panelu, nastavte HorizontalAlignment na Stretch a nechte panel rozložení řídit velikost.

Zde je řada souvisejících Expander ovládacích prvků umístěna v StackPanel. HorizontalAlignment každého Expander v StackPanel je nastaven na Stretch pomocí stylu v prostředcích StackPanela šířka StackPanel určuje šířku ovládacích prvků Expander.

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

Tři rozšiřující ovládací prvky skládané svisle, všechny stejné šířky

Výška

Nezadávejte výšku na Expander. Pokud to uděláte, ovládací prvek si toto místo vyhradí i v případě, že je oblast obsahu sbalená, což narušuje účel Expander. Chcete-li určit velikost rozbalené oblasti obsahu, nastavte rozměry obsahu Expander. Pokud potřebujete, můžete omezit Height obsahu, aby byl obsah posouvatelný.

Posouvání obsahu

Pokud je obsah příliš velký pro velikost oblasti obsahu, můžete obsah zabalit posuvníkem , aby se oblast obsahu posoula. Ovládací prvek Expander automaticky neposkytuje možnosti posouvání.

Když umístíte ScrollViewer do Expander obsahu, nastavte výšku ovládacího prvku ScrollViewer na požadovanou výšku oblasti obsahu. Pokud místo toho nastavíte rozměr výšky obsahu uvnitř ScrollViewer, ScrollViewer toto nastavení nerozpozná, a proto neposkytuje posouvání obsahu.

Následující příklad ukazuje, jak vytvořit Expander ovládací prvek, který obsahuje posouvání textu jako jeho obsah.

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

Rozbalovač s rolovacím textem jako obsahem

Rozšiřování a sbalování oblasti obsahu

Ve výchozí poloze je expander sbalený a rozbalí se směrem dolů.

  • Nastavte vlastnost IsExpanded tak, aby byla oblast obsahu původně rozbalená.
  • Nastavte ExpandDirection vlastnost Nahoru , aby se obsah rozbalil nahoru.
<Expander IsExpanded="True" ExpandDirection="Up">

Expander se rozbalí nebo sbalí programově nastavením vlastnosti IsExpanded nebo interakcí s Header; nelze jej zavřít kliknutím mimo.

Návod

Přechodné uživatelské rozhraní, jako je Flyout nebo otevřený rozevírací seznam ComboBox, se zavře, když kliknete nebo klepnete mimo něj. Říká se tomu light-dismiss. Oblast obsahu Expander se nepovažuje za dočasnou a nepřekrývá jiné uživatelské rozhraní, takže nepodporuje automatické zavření.

Můžete také zpracovat expandovaná a kolapsovaná události a provést akci, když se obsah zobrazí nebo skryje. Tady je několik příkladů těchto událostí.

Rozšiřování události

V tomto příkladu máte skupinu rozbalovačů a chcete mít vždy otevřenou jenom jednu. Když uživatel otevře Expander, zpracujete událost rozbalení a sbalíte všechny ovládací prvky ve skupině kromě toho, na který uživatel klikl.

Upozornění

V závislosti na vaší aplikaci a uživatelské zkušenosti může být vhodné automaticky sbalit ovládací prvky Expander, když uživatel rozbalí jiné ovládací prvky. To ale také uživateli zabere kontrolu. Pokud může být chování užitečné, zvažte možnost, kterou může uživatel snadno nastavit.

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

Zkolabovaná událost

V tomto příkladu zpracujete sbalenou událost a naplníte Header souhrnem možností, které jsou vybrány v souboru Content.

Tento obrázek ukazuje Expander s rozbaleným obsahem a vybranými možnostmi.

Rozbalený ovládací prvek Expander s vybranými možnostmi zobrazenými v oblasti obsahu

Když jsou sbalené, vybrané možnosti jsou shrnuty v záhlaví, aby je uživatel stále viděl bez otevření Expander.

Sbalený ovládací prvek Expander s vybranými možnostmi shrnutými v záhlaví 

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

Lehký styl

Výchozí Style a ControlTemplate můžete upravit tak, aby ovládací prvek získal jedinečný vzhled. Seznam dostupných prostředků motivu najdete v části Styl a šablona ovládacího prvku v dokumentaci k rozhraní API expanderu. Další informace naleznete v části Lehký styl článku Stylingové ovládací prvky.

Recommendations

  • Použijte Expander, pokud je místo pro zobrazení omezené a část sekundárního obsahu může být skrytá, dokud ho uživatel nebude požadovat.

Příklady kódu

Tento XAML vytvoří skupinu ovládacích prvků Expander zobrazených v jiných částech tohoto článku. Kód obslužných rutin událostí Expanding a Collapsed se také zobrazuje v předchozích částech.

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

Univerzální platforma Windows a WinUI 2

Důležité

Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.

Tato část obsahuje informace potřebné pro použití ovládacího prvku v aplikacích UWP nebo WinUI 2.

Expander pro aplikace pro UPW vyžaduje WinUI 2. Další informace, včetně pokynů k instalaci, najdete v tématu WinUI 2. Rozhraní API pro tento ovládací prvek se nacházejí v oboru názvů Microsoft.UI.Xaml.Controls.

Pokud chcete použít kód v tomto článku s WinUI 2, použijte alias v JAZYCE XAML (používáme muxc) k reprezentaci rozhraní API knihovny uživatelského rozhraní Systému Windows, která jsou součástí vašeho projektu. Další informace najdete v tématu Začínáme s WinUI 2 .

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

<muxc:Expander />
  • Last updated on