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:

• Jak panel umieszcza elementy podrzędne.
• Jak panel rozmiaruje jego elementy podrzędne.
• Jak nakładające się elementy podrzędne są nakładane na siebie warstwy (kolejność z).
• Liczba i złożoność zagnieżdżonych elementów panelu potrzebnych do utworzenia żądanego układu.

Przykłady

Galeria WinUI 2
	Jeśli masz zainstalowaną aplikację Galeria WinUI 2 , zobacz akcję RelativePanel, StackPanel, Grid, VariableSizedWrapGrid i Canvas . Pobieranie aplikacji z galerii WinUI 2 (Microsoft Store) Pobieranie kodu źródłowego (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.

Dołączone właściwości 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 określają cechy układu elementu nadrzędnego, 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 ustawiania właściwości obramowania w siatce.

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

Panel względny

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 .

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.

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

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 element StackPanel elementów.

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

Grid

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

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 rozmiar działa następująco:

• Drugi wiersz ma jawną wysokość 44 pikseli. Domyślnie wysokość pierwszego wiersza wypełnia dowolne miejsce.
• Szerokość pierwszej kolumny jest ustawiona na Wartość Automatyczna, więc jest tak szeroka, jak to konieczne dla jej elementów podrzędnych. 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.

Miejsce można rozłożyć w kolumnie lub wierszu przy użyciu opcji Auto lub gwiazdki. 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 z wierszami i kolumnami 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.

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 XAML programu Visual Studio 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 .

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, pierwsze rozmiary komórek pasujące do jej zawartości, a każda inna komórka jest rozmiarem pierwszej komórki.

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

Oto jak używać zmiennejSizedWrapGrid w języku 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 następnie opakowuje się w górnej części następnej kolumny.

Kanwa

Panel Kanwy umieszcza elementy podrzędne przy użyciu stałych punktów współrzędnych i nie obsługuje układów płynó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.

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 rysuje ostatnio i dlatego pobiera wszystkie inne elementy, które mają ten sam obszar lub nakładają się w dowolny sposób. 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 zmienia rozmiaru 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 Kanwy według uznania. 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.

Panele dla elementu ItemsControl

Istnieje kilka paneli specjalnego przeznaczenia, które mogą być używane tylko jako ElementPanel do wyświetlania elementów w kontrolceItemsControl. Są to elementy 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 z galerii WinUI 2 — zobacz wszystkie kontrolki XAML w formacie interaktywnym.