Panele układu

Panele układu to kontenery, które umożliwiają rozmieszczanie i grupowanie elementów interfejsu użytkownika w aplikacji. Wbudowane panele układu XAML obejmują RelativePanel, StackPanel, Grid, VariableSizedWrapGrid i Canvas. W tym miejscu opiszemy każdy panel i pokażemy, jak używać go do układu elementów interfejsu użytkownika XAML.

Podczas wybierania panelu układu należy wziąć pod uwagę kilka kwestii:

• W jaki sposób panel umieszcza swoje elementy podrzędne.
• Jak panel rozmiaruje swoje elementy podrzędne.
• Jak nakładające się elementy podrzędne są układane jedna na drugiej (kolejność nakładania).
• Liczba i złożoność zagnieżdżonych elementów panelu potrzebnych do utworzenia żądanego układu.

Przykłady

Otwórz aplikację Galeria WinUI 3 i zobacz panele układu w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy GitHub.

Właściwości panelu

Zanim omówimy poszczególne panele, przyjrzyjmy się niektórym wspólnym właściwościom, które mają wszystkie panele.

Właściwości przypisane do panelu

Większość paneli układu XAML używa dołączonych właściwości, aby umożliwić swoim elementom podrzędnym informowanie panelu nadrzędnego o tym, jak powinny być umieszczone w interfejsie użytkownika. Dołączone właściwości używają składni AttachedPropertyProvider.PropertyName. Jeśli masz panele, które są zagnieżdżone wewnątrz innych paneli, dołączone właściwości w elementach interfejsu użytkownika, które wskazują cechy układu dla nadrzędnego elementu, są interpretowane tylko przez najbardziej bezpośredni panel nadrzędny.

Oto przykład sposobu ustawiania właściwości Canvas.Left dołączonej do kontrolki Button w języku XAML. Informuje to nadrzędną kanwę, że przycisk powinien być umieszczony na 50 pikseli z lewej krawędzi kanwy.

<Canvas>
  <Button Canvas.Left="50">Hello</Button>
</Canvas>

Aby uzyskać więcej informacji na temat dołączonych właściwości, zobacz Omówienie dołączonych właściwości.

Obramowania panelu

Panele RelativePanel, StackPanel i Grid definiują właściwości obramowania, które pozwalają narysować obramowanie wokół panelu bez zawijania ich w dodatkowy element obramowania. Właściwości obramowania to BorderBrush, BorderThickness, CornerRadius i Padding.

Oto przykład, jak ustawić właściwości granicy w obrębie Grid.

<Grid BorderBrush="Blue" BorderThickness="12" CornerRadius="12" Padding="12">
    <TextBlock Text="Hello World!"/>
</Grid>

Użycie wbudowanych właściwości obramowania zmniejsza liczbę elementów XAML, co może poprawić wydajność interfejsu użytkownika aplikacji. Aby uzyskać więcej informacji na temat paneli układu i wydajności interfejsu użytkownika, zobacz Optymalizowanie układu XAML.

RelativePanel

Element RelativePanel umożliwia układ elementów interfejsu użytkownika, określając, gdzie są one powiązane z innymi elementami i w odniesieniu do panelu. Domyślnie element jest umieszczony w lewym górnym rogu panelu. W celu zmiany układu interfejsu użytkownika dla różnych rozmiarów okien można użyć kontrolki RelativePanel z elementami VisualStateManager i AdaptiveTrigger .

Otwórz aplikację Galeria WinUI 3 i zobacz RelativePanel w działaniu

W tej tabeli przedstawiono dołączone właściwości, których można użyć do wyrównywania elementu względem panelu lub innych elementów.

Wyrównanie panelu	Wyrównanie elementów równorzędnych	Pozycja elementu sąsiedniego
AlignTopWithPanel	AlignTopWith	Powyżej
AlignBottomWithPanel	AlignBottomWith	Poniżej
AlignLeftWithPanel	AlignLeftWith	LeftOf
AlignRightWithPanel	AlignRightWith	RightOf
AlignHorizontalCenterWithPanel	AlignHorizontalCenterWith
AlignVerticalCenterWithPanel	AlignVerticalCenterWith

Ten kod XAML pokazuje, jak rozmieścić elementy w panelu względnym.

<RelativePanel BorderBrush="Gray" BorderThickness="1">
    <Rectangle x:Name="RedRect" Fill="Red" Height="44" Width="44"/>
    <Rectangle x:Name="BlueRect" Fill="Blue"
               Height="44" Width="88"
               RelativePanel.RightOf="RedRect" />

    <Rectangle x:Name="GreenRect" Fill="Green" 
               Height="44"
               RelativePanel.Below="RedRect" 
               RelativePanel.AlignLeftWith="RedRect" 
               RelativePanel.AlignRightWith="BlueRect"/>
    <Rectangle Fill="Orange"
               RelativePanel.Below="GreenRect" 
               RelativePanel.AlignLeftWith="BlueRect" 
               RelativePanel.AlignRightWithPanel="True"
               RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

Wynik wygląda następująco.

Poniżej przedstawiono kilka kwestii, które należy wziąć pod uwagę podczas określania rozmiaru prostokątów:

• Czerwony prostokąt ma jawny rozmiar 44x44. Znajduje się on w lewym górnym rogu panelu, który jest pozycją domyślną.
• Zielony prostokąt ma jawną wysokość 44. Lewa strona jest wyrównana do czerwonego prostokąta, a jego prawa strona jest wyrównana do niebieskiego prostokąta, który określa jego szerokość.
• Pomarańczowy prostokąt nie ma jawnego rozmiaru. Lewa strona jest wyrównana do niebieskiego prostokąta. Jego prawe i dolne krawędzie są wyrównane z krawędzią panelu. Jego rozmiar jest określany przez te wyrównania i zmienia rozmiar w miarę zmiany rozmiaru panelu.

StackPanel

StackPanel rozmieszcza elementy podrzędne w jedną linię, która może być zorientowana w poziomie lub w pionie. StackPanel jest zwykle używany do rozmieszczania małej podsekcji interfejsu użytkownika na stronie.

Otwórz aplikację Galeria WinUI 3 i zobacz, jak działa StackPanel

Możesz użyć właściwości Orientacja , aby określić kierunek elementów podrzędnych. Domyślna orientacja to Pionowo.

Poniższy kod XAML pokazuje, jak utworzyć pionowy StackPanel z elementami.

<StackPanel>
    <Rectangle Fill="Red" Height="44"/>
    <Rectangle Fill="Blue" Height="44"/>
    <Rectangle Fill="Green" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</StackPanel>

Wynik wygląda następująco.

Jeśli rozmiar elementu podrzędnego nie jest jawnie ustawiony w elemecie StackPanel, rozciąga się tak, aby wypełnić dostępną szerokość (lub wysokość, jeśli orientacja jest pozioma). W tym przykładzie szerokość prostokątów nie jest ustawiona. Prostokąty rozszerzają się, aby wypełnić całą szerokość StackPanel.

Siatka

Panel Siatka obsługuje układy elastyczne i umożliwia rozmieszczanie kontrolek w układach wielowierszowych i wielokolumnowych. Należy określić wiersze i kolumny siatki przy użyciu właściwości RowDefinitions i ColumnDefinitions .

Otwórz aplikację Galeria WinUI 3 i zobacz Grid w akcji

Aby umieścić obiekty w określonych komórkach siatki, użyj właściwości dołączonych Grid.Column i Grid.Row .

Aby ustawić zakres zawartości między wieloma wierszami i kolumnami, użyj dołączonych właściwości Grid.RowSpan i Grid.ColumnSpan .

W tym przykładzie XAML pokazano, jak utworzyć siatkę z dwoma wierszami i dwiema kolumnami.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="44"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Width="44"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>

Wynik wygląda następująco.

W tym przykładzie rozmiarowanie działa następująco:

• Drugi wiersz ma jawną wysokość 44 efektywnych pikseli. Domyślnie wysokość pierwszego wiersza wypełnia pozostałą przestrzeń.
• Szerokość pierwszej kolumny jest ustawiona na automatyczna, więc jest tak szeroka, jak to konieczne dla jej elementów. W tym przypadku jest to 44 efektywne piksele szerokości, aby pomieścić szerokość czerwonego prostokąta.
• Nie ma żadnych innych ograniczeń rozmiaru na prostokątach, więc każdy z nich rozciąga się, aby wypełnić komórkę siatki, w której się znajduje.

Przestrzeń można rozmieszczać w kolumnie lub wierszu, korzystając z opcji Auto lub rozmiaru gwiazdkowego. Automatyczne ustalanie rozmiaru umożliwia zmianę rozmiaru elementów interfejsu użytkownika w celu dopasowania ich do ich zawartości lub kontenera nadrzędnego. Można również użyć automatycznego określania rozmiaru wierszy i kolumn siatki. Aby użyć automatycznego określania rozmiaru, ustaw opcję Wysokość i/lub Szerokość elementów interfejsu użytkownika na Wartość Automatyczna.

Rozmiar proporcjonalny, nazywany również ustalaniem rozmiaru gwiazdy, służy do dystrybucji dostępnego miejsca między wierszami i kolumnami siatki według proporcji ważonych. W języku XAML wartości gwiazdek są wyrażane jako * (lub n* dla rozmiaru ważonej gwiazdy). Aby na przykład określić, że jedna kolumna jest 5 razy szersza niż druga kolumna w układzie z 2 kolumnami, użyj wartości "5*" i "*" dla właściwości Width w elementach ColumnDefinition .

Ten przykład łączy stałe, automatyczne i proporcjonalne ustalanie rozmiaru w siatce z 4 kolumnami.

Kolumna	Sizing	Opis
Kolumna_1	Automatycznie	Kolumna dopasuje swój rozmiar do swojej zawartości.
Kolumna_2	*	Po obliczeniu kolumn automatycznych kolumna otrzymuje część pozostałej szerokości. Column_2 będzie o połowę tak szeroki, jak Column_4.
Column_3	44	Kolumna będzie mieć szerokość 44 pikseli.
Kolumna_4	2*	Po obliczeniu kolumn automatycznych kolumna otrzymuje część pozostałej szerokości. Column_4 będzie dwa razy większa niż Column_2.

Domyślna szerokość kolumny to "*", więc nie trzeba jawnie ustawiać tej wartości dla drugiej kolumny.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>

W projektancie Visual Studio XAML wynik wygląda następująco.

VariableSizedWrapGrid

VariableSizedWrapGrid to panel układu w stylu siatki, w którym wiersze lub kolumny są automatycznie zawijane do nowego wiersza lub kolumny po osiągnięciu wartości MaximumRowsOrColumns .

Otwórz aplikację Galeria WinUI 3 i zobacz działanie VariableSizedWrapGrid

Właściwość Orientacja określa, czy siatka dodaje elementy w wierszach lub kolumnach przed zawijaniem. Domyślna orientacja to Pionowa, co oznacza, że siatka dodaje elementy od góry do dołu do momentu zapełniania kolumny, a następnie zawijania do nowej kolumny. Gdy wartość to Pozioma, siatka dodaje elementy od lewej do prawej, a następnie zawija do nowego wiersza.

Wymiary komórek są określane przez element ItemHeight i ItemWidth. Każda komórka ma ten sam rozmiar. Jeśli nie określono wartości ItemHeight lub ItemWidth, to pierwsza komórka dostosowuje swój rozmiar do zawartości, a każda kolejna komórka ma rozmiar pierwszej komórki.

Możesz użyć właściwości VariableSizedWrapGrid.ColumnSpan i VariableSizedWrapGrid.RowSpan, aby określić, ile sąsiednich komórek powinien wypełniać element podrzędny.

Oto jak używać VariableSizedWrapGrid w XAML.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Orange" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

Wynik wygląda następująco.

W tym przykładzie maksymalna liczba wierszy w każdej kolumnie wynosi 3. Pierwsza kolumna zawiera tylko 2 elementy (czerwone i niebieskie prostokąty), ponieważ niebieski prostokąt obejmuje 2 wiersze. Zielony prostokąt przechodzi do góry następnej kolumny.

Płótno

Panel Canvas umieszcza elementy podrzędne używając stałych punktów współrzędnych i nie obsługuje elastycznych układów. Punkty poszczególnych elementów podrzędnych można określić, ustawiając właściwości Canvas.Left i Canvas.Top dołączone dla każdego elementu. Nadrzędna kanwa odczytuje te dołączone wartości właściwości z elementów podrzędnych podczas rozmieszczania układu.

Otwórz aplikację WinUI 3 Gallery i zobacz Canvas w akcji

Obiekty na kanwie mogą nakładać się na siebie, gdzie jeden obiekt jest rysowany na drugim obiekcie. Domyślnie kanwa renderuje obiekty podrzędne w kolejności, w której są zadeklarowane, więc ostatni element podrzędny jest renderowany u góry (każdy element ma domyślny indeks z 0). Jest to takie samo, jak inne wbudowane panele. Jednak kanwa obsługuje również dołączoną właściwość Canvas.ZIndex , którą można ustawić na każdym z elementów podrzędnych. Tę właściwość można ustawić w kodzie, aby zmienić kolejność rysowania elementów w czasie wykonywania. Element o najwyższej wartości Canvas.ZIndex rysowany jest na końcu i dlatego przysłania inne elementy, które zajmują tę samą przestrzeń lub się w jakikolwiek sposób zachodzą. Należy pamiętać, że wartość alfa (przezroczystość) jest przestrzegana, więc nawet jeśli elementy nakładają się na siebie, zawartość wyświetlana w nakładających się obszarach może być mieszana, jeśli górna wartość ma nie maksymalną wartość alfa.

Kanwa nie dokonuje żadnego dostosowania rozmiarów swoich elementów podrzędnych. Każdy element musi określać jego rozmiar.

Oto przykład kanwy w języku XAML.

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red" Height="44" Width="44"/>
    <Rectangle Fill="Blue" Height="44" Width="44" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Height="44" Width="44" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Orange" Height="44" Width="44" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

Wynik wygląda następująco.

Użyj panelu Canvas z rozwagą. Chociaż wygodne jest dokładne kontrolowanie pozycji elementów w interfejsie użytkownika w niektórych scenariuszach, stały panel układu powoduje, że obszar interfejsu użytkownika będzie mniej adaptacyjny do ogólnych zmian rozmiaru okna aplikacji. Zmiana rozmiaru okna aplikacji może pochodzić ze zmian orientacji urządzenia, podziału okien aplikacji, zmiany monitorów i wielu innych scenariuszy użytkownika.

Panel Owijający

Important

WrapPanel jest dostępny od Zestaw SDK do aplikacji systemu Windows 2.0 Experimental 2. Zestaw SDK do aplikacji systemu Windows 2.0 Experimental 4 zmienił nazwy swoich właściwości odstępów na ItemSpacing i LineSpacing. Interfejsy API są oznaczone jako eksperymentalne i mogą ulec zmianie lub zostać usunięte w przyszłej wersji. Nie używaj ich w aplikacjach produkcyjnych.

WrapPanel rozmieszcza swoje elementy podrzędne jeden po drugim w wierszu. Gdy następny element nie mieści się w przestrzeni, która pozostaje w wierszu, panel przenosi go na początek nowego wiersza. Użyj kontrolki WrapPanel dla małego zestawu elementów, takich jak tagi lub przyciski filtru, które powinny zawijać się przy zmianie dostępnej przestrzeni. WrapPanel jest portem elementu Windows Community Toolkit WrapPanel.

Otwórz aplikację Galeria WinUI 3 i zobacz element WrapPanel w akcji

Właściwość Orientacja określa kierunek, w którym panel dodaje elementy. Domyślna orientacja to Pozioma, co oznacza, że panel dodaje elementy od lewej do prawej, a następnie zawija do nowego wiersza. Gdy wartość to Pionowo, panel dodaje elementy od góry do dołu, a następnie zawija do nowej kolumny. Gdy element FlowDirection panelu ma wartość RightToLeft, na przykład w aplikacji zlokalizowanej dla języka pisanego od prawej do lewej, panel odzwierciedla ten układ. Wypełnia każdy wiersz od prawej do lewej i dodaje każdą nową kolumnę po lewej stronie poprzedniego.

W przeciwieństwie do VariableSizedWrapGrid, element WrapPanel nie używa komórek o stałym rozmiarze. Każdy element podrzędny zachowuje żądany rozmiar wzdłuż osi orientacji. W wierszu każde dziecko otrzymuje miejsce tak wysokie, jak najwyższe dziecko w tym wierszu. W kolumnie każdy element podrzędny otrzymuje slot tak szeroki, jak najszerszy element podrzędny w tej kolumnie.

Użyj tych właściwości, aby dodać odstępy w układzie:

• ItemSpacing ustawia odstęp między sąsiednimi elementami w tym samym wierszu. Wartość domyślna to 0.
• Funkcja LineSpacing ustawia odstęp między liniami. Wartość domyślna to 0.
• Dopełnienie ustawia odstęp między krawędziami panelu a jego elementami.

Poniżej przedstawiono sposób użycia elementu WrapPanel w języku XAML.

<WrapPanel Width="132" ItemSpacing="4" LineSpacing="4">
    <Rectangle Fill="Red" Width="44" Height="44"/>
    <Rectangle Fill="Blue" Width="80" Height="44"/>
    <Rectangle Fill="Green" Width="44" Height="44"/>
    <Rectangle Fill="Orange" Width="60" Height="44"/>
</WrapPanel>

Wynik wygląda następująco.

W tym przykładzie czerwone i niebieskie prostokąty oraz odstępy między elementami używają 128 z 132 pikseli panelu, więc udostępniają pierwszy wiersz. Zielony prostokąt nie mieści się w pozostałej przestrzeni, więc zawija się do drugiego wiersza. Pomarańczowy prostokąt mieści się obok zielonego prostokąta w drugim wierszu.

Aby ostatnie dziecko wypełniało miejsce, które pozostaje w wierszu, ustaw właściwość ItemsStretch na Last. Wartość domyślna, None, pozostawia każdy element podrzędny w żądanym rozmiarze. Nie ustawiaj jawnej szerokości ostatniego elementu podrzędnego ani jawnej wysokości, gdy orientacja ma wartość Pionowa, ponieważ jawny rozmiar uniemożliwia rozciągnięcie elementu podrzędnego.

<WrapPanel Width="132" ItemSpacing="4" LineSpacing="4" ItemsStretch="Last">
    <Rectangle Fill="Red" Width="44" Height="44"/>
    <Rectangle Fill="Blue" Width="80" Height="44"/>
    <Rectangle Fill="Green" Width="44" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</WrapPanel>

Wynik wygląda następująco.

W tym przykładzie pomarańczowy prostokąt wypełnia resztę drugiego wiersza. Aby ustawić wartość w kodzie, użyj wyliczenia WrapPanelItemsStretch .

// Stretch the last child of a WrapPanel named tagPanel.
tagPanel.ItemsStretch = WrapPanelItemsStretch.Last;

WrapPanel owija swoje elementy podrzędne tylko wtedy, gdy dostępne miejsce w kierunku orientacji jest ograniczone. Na przykład poziomy StackPanel nie ogranicza szerokości elementów podrzędnych, więc poziomy WrapPanel wewnątrz niego pokazuje wszystkie swoje elementy podrzędne w jednym wierszu. Panel nie rezerwuje miejsca ani nie dodaje odstępów dla elementów podrzędnych, których widoczność jest Collapsed.

WrapPanel nie wirtualizuje swoich elementów podrzędnych. Tworzy i rozmieszcza każde dziecko, w tym dzieci, które są przewijane poza widok. Aby wyświetlić dużą kolekcję, która zawija elementy, użyj kontrolki GridView lub elementu ItemsRepeater z elementem UniformGridLayout. Te kontrolki obsługują wirtualizację interfejsu użytkownika.

Panele dla elementów kontrolki ItemsControl

Istnieje kilka paneli specjalnego przeznaczenia, które mogą być używane tylko jako ItemsPanel do wyświetlania elementów w ItemsControl. Są to ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel i WrapGrid. Nie można używać tych paneli do ogólnego układu interfejsu użytkownika.

Pobieranie przykładowego kodu

• przykład galerii WinUI 3 — zobacz wszystkie kontrolki XAML w formacie interaktywnym.