Udostępnij przez

Expander

Kontrolka Expander umożliwia pokazywanie lub ukrywanie mniej ważnej zawartości powiązanej z zawsze widoczną zawartością podstawową. Elementy zawarte w nagłówku są zawsze widoczne. Użytkownik może rozwinąć i zwinąć obszar Zawartość, w którym jest wyświetlana zawartość pomocnicza, korzystając z nagłówka. Po rozwinięciu obszaru zawartości wypycha inne elementy interfejsu użytkownika; nie nakłada innego interfejsu użytkownika. Expander może rozwinąć się w górę lub w dół.

Obszary Header i Content mogą zawierać dowolną zawartość — od prostego tekstu do złożonych układów interfejsu użytkownika. Na przykład możesz użyć kontrolki , aby wyświetlić dodatkowe opcje dla elementu.

Zwinięty expander, który jest rozwinięty, a następnie zwinięty. Nagłówek zawiera tekst

Czy jest to właściwa kontrola?

Użyj Expander, gdy część zawartości podstawowej powinna być zawsze widoczna, ale powiązana zawartość pomocnicza może być ukryta do momentu, gdy będzie to konieczne. Ten interfejs użytkownika jest często używany, gdy obszar wyświetlania jest ograniczony i kiedy można grupować informacje lub opcje. Ukrywanie zawartości dodatkowej, dopóki nie będzie potrzebne, może również pomóc skoncentrować użytkownika na najważniejszych częściach aplikacji.

Tworzenie ekspandera

Otwórz aplikację Galerii WinUI 3 i zobacz rozszerzenie w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

W tym przykładzie pokazano, jak utworzyć prostą Expander z domyślnym stylem. Właściwość Header definiuje element, który jest zawsze widoczny. Właściwość Content definiuje element, który można zwinąć i rozwinąć. W tym przykładzie tworzony jest element Expander, który przypomina poprzednią ilustrację.

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

Zawartość ekspandera

Właściwość Content elementu Expander może być dowolnym typem obiektu, ale zazwyczaj jest to ciąg albo UIElement. Aby uzyskać więcej informacji na temat ustawiania właściwości Content, zobacz sekcję Uwagi w klasie ContentControl.

Możesz użyć złożonego, interaktywnego interfejsu użytkownika jako zawartości Expander, w tym zagnieżdżonych kontrolek Expander w zawartości nadrzędnej Expander, jak pokazano poniżej.

Otwarty Expander z czterema kontrolkami Expander zagnieżdżonymi w jego zawartości. Każda z zagnieżdżonych kontrolek Expander ma przycisk radiowy i tekst w nagłówku

Wyrównanie treści

Możesz wyrównać zawartość, ustawiając właściwości HorizontalContentAlignment i VerticalContentAlignment w kontrolce Expander. Po ustawieniu tych właściwości, wyrównanie będzie dotyczyć tylko rozszerzonej zawartości, a nie nagłówka.

Kontrolowanie rozmiaru ekspandera

Domyślnie obszary nagłówka oraz zawartości są automatycznie rozmiarowane, aby dopasować się do swojej zawartości. Ważne jest, aby użyć odpowiednich technik do kontrolowania rozmiaru Expander, aby uniknąć niepożądanego wyglądu lub zachowania.

Szerokość

Jeśli zawartość jest szersza niż nagłówek, szerokość nagłówka zwiększa się, aby dopasować się do obszaru zawartości po rozwinięciu, i zmniejsza się, gdy obszar zawartości jest zwinięty. Aby zapobiec zmianie szerokości kontrolki po jej rozwinięciu lub zwinięciu, można ustawić wyraźną szerokość, lub jeśli kontrolka jest elementem podrzędnym panelu , ustaw PoziomeWyrównanie na Stretch i pozwól panelowi układu kontrolować rozmiar.

W tym miejscu w Expanderznajduje się seria powiązanych kontrolek . HorizontalAlignment każdego Expander w StackPanel jest ustawiony na Stretch przy użyciu stylu w zasobach StackPanel, a szerokość StackPanel określa szerokość kontrolek 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>

trzy kontrolki ekspandera o tej samej szerokości, ułożone w pionie

Wysokość

Nie należy określać wysokości na Expander. Jeśli to zrobisz, przycisk zarezerwuje to miejsce nawet wtedy, gdy obszar zawartości zostanie zwinięty, co niweczy cel Expander. Aby określić rozmiar rozwiniętego obszaru zawartości, ustaw wymiary rozmiaru zawartości Expander. Jeśli to konieczne, możesz ograniczyć parametr Height zawartości i sprawić, że zawartość stanie się przewijalna.

Zawartość przewijana

Jeśli zawartość jest zbyt duża dla rozmiaru obszaru zawartości, możesz opakować zawartość ScrollViewer, aby obszar zawartości mógł być przewijany. Kontrolka Expander nie zapewnia automatycznej możliwości przewijania.

Kiedy umieścisz ScrollViewer w zawartości Expander, ustaw wysokość kontrolki ScrollViewer na wymaganą wysokość dla obszaru zawartości. Jeśli zamiast tego ustawisz wymiar wysokości zawartości wewnątrz ScrollViewer, ScrollViewer nie rozpoznaje tego ustawienia i dlatego nie udostępnia zawartości przewijanej.

W poniższym przykładzie pokazano, jak utworzyć kontrolkę Expander zawierającą tekst przewijany jako jego zawartość.

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

Ekspander z zawartością w postaci przewijanego tekstu

Rozszerzanie i zwijanie obszaru zawartości

Domyślnie Ekspander jest zwinięty i rozwija się w dół.

  • Ustaw właściwość IsExpanded na true, aby obszar zawartości został początkowo rozszerzony.
  • Ustaw właściwość ExpandDirection na wartość Up, aby zawartość rozszerzała się w górę.
<Expander IsExpanded="True" ExpandDirection="Up">

Expander jest rozszerzany lub zwijany albo programowo przez ustawienie właściwości IsExpanded, albo poprzez interakcję z Headeri nie można go odrzucić przez prostą interakcję.

Wskazówka

Przejściowy interfejs użytkownika, taki jak Flyout lub otwarta lista rozwijana ComboBox, zamyka się po kliknięciu lub naciśnięciu poza nim. Jest to nazywane light-dismiss. Obszar zawartości Expander nie jest traktowany jako przejściowy i nie nakłada się na inne elementy interfejsu użytkownika, więc nie obsługuje funkcji lekkiego zamykania.

Można również obsługiwać zdarzenia Rozwijanie i Zwijanie, aby wykonać akcję, gdy zawartość jest wyświetlana lub ukryta. Oto kilka przykładów tych zdarzeń.

Rozwój wydarzenia

W tym przykładzie masz grupę rozszerzeń i chcesz mieć tylko jeden otwarty naraz. Gdy użytkownik otwiera Expander, system obsługuje zdarzenie Rozwijanie i zwija wszystkie kontrolki Expander w grupie, z wyjątkiem tej klikniętej przez użytkownika.

Ostrzeżenie

W zależności od aplikacji i doświadczenia użytkownika, może być wygodne automatyczne zwijanie kontrolek Expander, gdy użytkownik rozwija inną. Jednak to również odbiera użytkownikowi kontrolę. Jeśli zachowanie może być przydatne, rozważ wybranie opcji, którą użytkownik może łatwo ustawić.

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

Zwinięte zdarzenie

W tym przykładzie obsłużysz zdarzenie zwinięte i wypełnisz Header podsumowaniem opcji wybranych w Content.

Na tym obrazie przedstawiono Expander z rozwiniętą zawartością i wybranymi opcjami.

Rozwinięta kontrolka Ekspander z wybranymi opcjami wyświetlanymi w obszarze zawartości

Po zwinięciu wybrane opcje są podsumowane w nagłówku, dzięki czemu użytkownik nadal może je zobaczyć bez otwierania Expander.

kontrolki Ekspander w stanie zwiniętym z wybranymi opcjami podsumowanymi w nagłówku 

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

Lekka stylizacja

Możesz zmodyfikować domyślne Style i ControlTemplate, aby nadać kontrolce unikatowy wygląd. Aby zapoznać się z listą dostępnych zasobów motywu, przejdź do sekcji dotyczącej stylu i szablonu kontrolki w dokumentacji API ekspandera. Aby uzyskać więcej informacji, zobacz sekcję Lekkie stylizacje z artykułu Sterowanie stylizacją.

Rekomendacje

  • Użyj Expander, gdy ilość miejsca wyświetlania jest ograniczona, a część zawartości dodatkowej może być ukryta, dopóki użytkownik nie zażąda jej.

Przykłady kodu

Ten kod XAML tworzy grupę kontrolek Expander pokazanych w innych częściach tego artykułu. Kod procedur obsługi zdarzeń Expanding i Collapsed jest również wyświetlany w poprzednich sekcjach.

<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 i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

Expander dla aplikacji UWP wymaga interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tej kontrolki istnieją w przestrzeni nazw Microsoft.UI.Xaml.Controls .

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

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

<muxc:Expander />
  • Last updated on