Megjegyzés
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhat bejelentkezni vagy módosítani a címtárat.
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhatja módosítani a címtárat.
A Kibontás vezérlővel megjelenítheti vagy elrejtheti a kevésbé fontos tartalmakat, amelyek egy mindig látható elsődleges tartalomhoz kapcsolódnak. Az fejlécben lévő elemek mindig láthatók. A felhasználó a fejléc használatával kibonthatja és összecsukhatja a Tartalom területet, ahol a másodlagos tartalom megjelenik. A tartalomterület kibontásakor más felhasználói felületi elemeket is kitol az útból; nem fedi át a többi felhasználói felületet. A Expander kitágulhat felfelé vagy lefelé.
A Header és a Content területek bármilyen tartalmat tartalmazhatnak, az egyszerű szövegtől az összetett UI elrendezésekig. A vezérlő használatával például további lehetőségeket jeleníthet meg egy elemhez.
Ez a megfelelő vezérlő?
Használjon olyankor, Expander amikor bizonyos elsődleges tartalomnak mindig láthatónak kell lennie, de előfordulhat, hogy a kapcsolódó másodlagos tartalom el van rejtve, amíg szükséges. Ezt a felhasználói felületet általában akkor használják, ha a megjelenítési terület korlátozott, és amikor az információk vagy beállítások csoportosíthatók. A másodlagos tartalom elrejtése, amíg szükség nem lesz rá, segíthet a felhasználót az alkalmazás legfontosabb részeire összpontosítani.
Kibővítő létrehozása
- Fontos API-k:Expander osztály, Fejléc tulajdonság, Tartalom tulajdonság
A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.
Ez a példa bemutatja, hogyan hozhat létre egyszerű kibontót az alapértelmezett stílussal. A Fejléc tulajdonság határozza meg a mindig látható elemet. A Content tulajdonság határozza meg az összecsukható és kibontható elemet. Ez a példa egy olyan Expander-t készít, amely hasonló az előző ábrához.
<Expander Header="This text is in the header"
Content="This is in the content"/>
Tartalom kibontása
Egy objektum Tartalom tulajdonsága Expander bármilyen típusú objektum lehet, de általában karakterlánc vagy UIElement. A tulajdonság beállításáról Content további információt a ContentControl osztály Megjegyzések szakaszában talál.
Összetett, interaktív felhasználói felületet használhat a Expandertartalmaként, beleértve a szülő Expander tartalmában lévő beágyazott Expander vezérlőket, ahogyan itt látható.
Tartalom igazítása
A tartalom igazításához állítsa be a HorizontalContentAlignment és a VerticalContentAlignment tulajdonságokat a Expander vezérlőn. A tulajdonságok beállításakor az igazítás csak a kibontott tartalomra vonatkozik, a fejlécre nem.
Kibontó méretének szabályozása
Alapértelmezés szerint a fejléc - és tartalomterületek automatikusan méretezhetők a tartalomnak megfelelően. Fontos, hogy a megfelelő technikákkal szabályozni lehessen a méretét, hogy elkerülje a Expander nemkívánatos megjelenést vagy viselkedést.
Szélesség
Ha a tartalom szélesebb, mint a fejléc, a fejléc szélessége a kibontott tartalomterülethez igazodik, és a tartalomterület összecsukásakor csökken. Ha meg szeretné akadályozni, hogy a vezérlőelem szélessége a kibontott vagy összecsukott állapotban megváltozjon, megadhat egy explicit szélességet, vagy ha a vezérlő egy panel gyermekeleme, állítsa a HorizontalAlignment értéket Stretch értékre, és hagyja, hogy az elrendezési panel szabályozza a méretezést.
Itt egy sor kapcsolódó Expander vezérlőt helyezünk el a StackPanelben. Az egyes HorizontalAlignment a Expander-ban a StackPanel-re van állítva egy Stretch használatával a StackPanel, és a szélessége határozza meg a StackPanel vezérlők szélességét.
<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>
Magasság
Ne adjon meg a Expander. Ha ezt választja, a vezérlő akkor is lefoglalja ezt a helyet, ha a tartalomterület össze van csukva, ami ellentétes a Expandercéljával. A kibontott tartalomterület méretének megadásához állítsa be a méreteket a Expandertartalmán. Szükség esetén korlátozhatja a tartalom Height-ját, és görgethetővé teheti a tartalmat.
Görgethető tartalom
Ha a tartalom túl nagy a tartalomterület méretéhez, görgethetővé teheti a tartalmat ScrollViewerrel . A Expander vezérlő nem biztosít automatikusan görgetési képességet.
Amikor a ScrollViewer-t elhelyezi a Expander tartalomban, állítsa be a ScrollViewer vezérlőelem magasságát a tartalomterülethez szükséges magasságra. Ha ehelyett a magassági dimenziót állítja be a tartalomon belül, nem ismeri fel ezt a ScrollViewerbeállítást, ScrollViewer ezért nem biztosít görgethető tartalmat.
Az alábbi példa bemutatja, hogyan hozhat létre olyan vezérlőt Expander , amely tartalomként görgethető szöveget tartalmaz.
<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>
A tartalomterület kibontása és összecsukása
Alapértelmezés szerint a Expander összecsukott állapotban van és lefelé nyílik.
- Állítsa az IsExpanded tulajdonságot úgy, hogy
truea tartalomterület kezdetben ki legyen bontva. - Állítsa az ExpandDirectiontulajdonságot Fel értékre, hogy a tartalom felfelé bővüljön.
<Expander IsExpanded="True" ExpandDirection="Up">
Egy Expander programvezérelten kibontott vagy összecsukott lesz a IsExpanded tulajdonság beállításával, vagy a Header-val/-vel való interakció révén; nem lehet „light dismiss” funkcióval bezárni.
Jótanács
Az átmeneti felhasználói felület( például egy Flyout vagy egy ComboBoxnyitott legördülő listája) bezárul, amikor rákattint vagy koppint azon kívülre. Ezt nevezik külső kattintással bezárásnak. A Expander tartalomterülete nem tekinthető átmenetinek, és nem fedi át a többi felhasználói felületet, így nem támogatja a könnyű elbocsátást.
A Kibővítés és Összeomlás eseményeket is kezelheti, hogy egy műveletet végezzen, amikor a tartalom megjelenik vagy el van rejtve. Íme néhány példa ezekre az eseményekre.
Esemény bővítése
Ebben a példában van egy kibontó csoportod, és azt szeretné, ha egyszerre csak egy lenne nyitva. Amikor a felhasználó megnyit egy Expander elemet, te kezeled a Kibontás eseményt, és összecsukod a csoport összes Expander vezérlőelemét, kivéve azt, amelyikre a felhasználó kattintott.
Caution
Az alkalmazástól és a felhasználói élménytől függően kényelmes lehet automatikusan összecsukni Expander a vezérlőket, amikor a felhasználó egy másikat bővít ki. Ez azonban el is távolítja az irányítást a felhasználótól. Ha a viselkedés hasznos lehet, fontolja meg, hogy a felhasználó által egyszerűen beállítható beállítás legyen.
<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;
}
}
}
Összeomlott esemény
Ebben a példában az összecsukott eseményt kezeli, és kitölti a Header-t a Content-ban/-ben kiválasztott lehetőségek összegzésével.
Ez a kép a Expander-t ábrázolja kibontott tartalommal és kiválasztott beállításokkal.
Összecsukott állapotban a kijelölt beállítások összegzése a fejlécben jelenik meg, így a felhasználó a Expandermegnyitása nélkül is láthatja őket.
<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();
}
Könnyű stílus
Módosíthatja az alapértelmezett beállítást Style , és ControlTemplate egyedi megjelenést adhat a vezérlőnek. A rendelkezésre álló témaerőforrások listájáért tekintse meg az Expander API-dokumentumok Vezérlőstílus és sablon szakaszát. További információkért tekintse meg a Stílusvezérlők cikk Könnyű súlyú stílus című szakaszát.
Recommendations
- Amikor a megjelenítési hely korlátozott, használjon
Expander-t, és előfordulhat, hogy bizonyos másodlagos tartalom rejtve marad, amíg a felhasználó azt nem kéri.
Példakódok
Ez az XAML létrehozza a cikk más részeiben látható vezérlők csoportját Expander . Az Expanding és Collapsed eseménykezelők kódja is megjelenik az előző szakaszokban.
<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>
Kapcsolódó cikkek
Dolgozzon együtt velünk a GitHubon
A tartalom forrása a GitHubon található, ahol létrehozhat és áttekinthet problémákat és lekéréses kérelmeket is. További információért tekintse meg a közreműködői útmutatónkat.
Windows developer