Układy

Klasy układu interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) umożliwiają rozmieszczanie i grupowanie kontrolek interfejsu użytkownika w aplikacji. Wybranie klasy układu wymaga znajomości sposobu, w jaki układ umieszcza jego elementy podrzędne i jak układ ma rozmiary elementów podrzędnych. Ponadto może być konieczne zagnieżdżanie układów w celu utworzenia żądanego układu.

StackLayout

Element StackLayout organizuje elementy w jednowymiarowym stosie w poziomie lub w pionie. Właściwość Orientation określa kierunek elementów, a domyślna orientacja to Vertical. StackLayout zwykle służy do rozmieszczania podsekcji interfejsu użytkownika na stronie.

Poniższy kod XAML pokazuje, jak utworzyć pionowy StackLayout obiekt zawierający trzy Label obiekty:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

W pliku StackLayout, jeśli rozmiar elementu nie jest jawnie ustawiony, rozszerza się, aby wypełnić dostępną szerokość lub wysokość, jeśli Orientation właściwość jest ustawiona na Horizontal.

Element A StackLayout jest często używany jako układ nadrzędny, który zawiera inne układy podrzędne. Nie StackLayout należy jednak używać obiektu do odtworzenia Grid układu przy użyciu kombinacji StackLayout obiektów. Poniższy kod przedstawia przykład tego złego rozwiązania:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Jest to marnotrawne, ponieważ wykonywane są niepotrzebne obliczenia układu. Zamiast tego żądany układ można lepiej osiągnąć przy użyciu elementu Grid.

Aby uzyskać więcej informacji, zobacz StackLayout.

HorizontalStackLayout

Obiekt HorizontalStackLayout organizuje widoki podrzędne w jednowymiarowym stosie poziomym i jest bardziej wydajną alternatywą dla elementu StackLayout. HorizontalStackLayout zwykle służy do rozmieszczania podsekcji interfejsu użytkownika na stronie.

Poniższy kod XAML przedstawia sposób tworzenia zawierającego HorizontalStackLayout różne widoki podrzędne:

<HorizontalStackLayout Margin="20">
   <Rectangle Fill="Red"
              HeightRequest="30"
              WidthRequest="30" />
   <Label Text="Red"
          FontSize="18" />
</HorizontalStackLayout>

HorizontalStackLayoutJeśli rozmiar elementu nie jest jawnie ustawiony, zostanie on rozszerzany w celu wypełnienia dostępnej wysokości.

Aby uzyskać więcej informacji, zobacz HorizontalStackLayout.

VerticalStackLayout

Obiekt VerticalStackLayout organizuje widoki podrzędne w jednowymiarowym stosie pionowym i jest bardziej wydajną alternatywą dla elementu StackLayout. VerticalStackLayout zwykle służy do rozmieszczania podsekcji interfejsu użytkownika na stronie.

Poniższy kod XAML pokazuje, jak utworzyć VerticalStackLayout zawierający trzy Label obiekty:

<VerticalStackLayout Margin="20,35,20,25">
    <Label Text="The VericalStackLayout has its Margin property set, to control the rendering position of the VerticalStackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the VerticalStackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the VerticalStackLayout." />
</VerticalStackLayout>

VerticalStackLayoutJeśli rozmiar elementu nie jest jawnie ustawiony, rozszerza się, aby wypełnić dostępną szerokość.

Aby uzyskać więcej informacji, zobacz VerticalStackLayout.

Siatka

Element A Grid służy do wyświetlania elementów w wierszach i kolumnach, które mogą mieć rozmiary proporcjonalne lub bezwzględne. Wiersze i kolumny siatki są określane za pomocą RowDefinitions właściwości i ColumnDefinitions .

Aby umieścić elementy w określonych Grid komórkach, użyj Grid.Column właściwości i Grid.Row dołączonych. Aby tworzyć elementy obejmujące wiele wierszy i kolumn, użyj Grid.RowSpan właściwości i Grid.ColumnSpan dołączonych.

Uwaga

Grid Układ nie powinien być mylony z tabelami i nie jest przeznaczony do prezentowania danych tabelarycznych.

Poniższy kod XAML pokazuje, jak utworzyć obiekt z dwoma Grid wierszami i dwiema kolumnami:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

W tym przykładzie ustalanie rozmiaru działa w następujący sposób:

• Każdy wiersz ma jawną wysokość 50 jednostek niezależnych od urządzenia.
• Szerokość pierwszej kolumny jest ustawiona na Auto, a zatem jest tak szeroka, jak jest wymagana dla jej elementów podrzędnych. W tym przypadku jest to 200 jednostek niezależnych od urządzenia, aby pomieścić szerokość pierwszego Labelelementu .

Miejsce można dystrybuować w kolumnie lub wierszu przy użyciu automatycznego określania rozmiaru, co pozwala na dopasowanie rozmiaru kolumn i wierszy do zawartości. Jest to osiągane przez ustawienie wysokości RowDefinitionobiektu lub szerokości ColumnDefinitionobiektu na Autowartość . Rozmiar proporcjonalny może być również używany do rozkładania dostępnego miejsca między wierszami i kolumnami siatki według proporcji ważonych. Jest to osiągane przez ustawienie wysokości RowDefinitionobiektu lub szerokości ColumnDefinitionobiektu na wartość, która używa * operatora .

Uwaga

Spróbuj upewnić się, że jak najwięcej wierszy i kolumn jest ustawionych na Auto rozmiar. Każdy wiersz lub kolumna o automatycznym rozmiarze spowoduje, że aparat układu wykona dodatkowe obliczenia układu. Zamiast tego należy użyć wierszy i kolumn o stałym rozmiarze, jeśli to możliwe. Możesz też ustawić wiersze i kolumny, aby zajmować proporcjonalną ilość miejsca z wartością GridUnitType.Star wyliczenia.

Aby uzyskać więcej informacji, zobacz Siatka.

FlexLayout

Element jest FlexLayout podobny do StackLayout elementu , który wyświetla elementy podrzędne w poziomie lub w pionie w stosie. Można FlexLayout jednak również owinąć elementy podrzędne, jeśli istnieje zbyt wiele, aby zmieścić się w jednym wierszu lub kolumnie, a także umożliwia bardziej szczegółową kontrolę rozmiaru, orientacji i wyrównania elementów podrzędnych.

Poniższy kod XAML pokazuje, jak utworzyć obiekt FlexLayout , który wyświetla jego widoki w jednej kolumnie:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

W tym przykładzie układ działa w następujący sposób:

• Właściwość jest ustawiona Direction na Column, co powoduje rozmieszczenie elementów podrzędnych FlexLayout elementu w jednej kolumnie elementów.
• Właściwość jest ustawiona AlignItems na Center, co powoduje, że każdy element jest wyśrodkowany w poziomie.
• Właściwość jest ustawiona JustifyContent na SpaceEvenly, która przydziela wszystkie pozostawione spacje w pionie równomiernie między wszystkimi elementami, a powyżej pierwszego elementu i poniżej ostatniego elementu.

Aby uzyskać więcej informacji, zobacz FlexLayout.

AbsoluteLayout

Element AbsoluteLayout służy do pozycjonowania i określania rozmiaru elementów przy użyciu jawnych wartości lub wartości względem rozmiaru układu. Pozycja jest określana przez lewy górny róg elementu podrzędnego względem lewego górnego rogu obiektu AbsoluteLayout.

Element AbsoluteLayout powinien być traktowany jako układ specjalnego przeznaczenia, który ma być używany tylko wtedy, gdy można nałożyć rozmiar na elementy podrzędne lub gdy rozmiar elementu nie ma wpływu na pozycjonowanie innych elementów podrzędnych. Standardowym zastosowaniem tego układu jest utworzenie nakładki, która obejmuje stronę z innymi kontrolkami, na przykład w celu ochrony użytkownika przed interakcją z normalnymi kontrolkami na stronie.

Ważne

Właściwości HorizontalOptions i VerticalOptions nie mają wpływu na elementy podrzędne elementu AbsoluteLayout.

W obiekcie AbsoluteLayoutAbsoluteLayout.LayoutBounds dołączona właściwość służy do określania położenia poziomego, położenia w pionie, szerokości i wysokości elementu. Ponadto dołączona właściwość określa sposób AbsoluteLayout.LayoutFlags interpretowania granic układu.

Poniższy kod XAML pokazuje, jak rozmieścić elementy w obiekcie AbsoluteLayout:

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

W tym przykładzie układ działa w następujący sposób:

• Każdy BoxView z nich ma jawny rozmiar 100x100 i jest wyświetlany w tej samej pozycji, wyśrodkowany w poziomie.
• Czerwony BoxView jest obracany o 30 stopni, a zielony BoxView jest obracany o 60 stopni.
• W każdym BoxViewobiekcie AbsoluteLayout.LayoutFlags dołączona właściwość jest ustawiona na PositionProportional, wskazując, że pozycja jest proporcjonalna do pozostałej przestrzeni po uwzględnieniu szerokości i wysokości.

Uwaga

Należy unikać używania AbsoluteLayout.AutoSize właściwości zawsze, gdy jest to możliwe, ponieważ spowoduje to wykonanie dodatkowych obliczeń układu przez aparat układu.

Aby uzyskać więcej informacji, zobacz AbsoluteLayout.

BindableLayout

Element BindableLayout umożliwia dowolną klasę układu pochodzącą z Layout klasy w celu wygenerowania jej zawartości przez powiązanie z kolekcją elementów z opcją ustawiania wyglądu każdego elementu za pomocą elementu DataTemplate.

Układ możliwy do powiązania jest wypełniany danymi, ustawiając jego ItemsSource właściwość na dowolną kolekcję, która implementuje IEnumerableelement , i dołączając go do klasy pochodnej Layout. Wygląd każdego elementu w układzie, który można powiązać, można zdefiniować przez ustawienie dołączonej BindableLayout.ItemTemplate właściwości na DataTemplate.

Poniższy kod XAML pokazuje, jak powiązać element StackLayout z kolekcją elementów i zdefiniować ich wygląd za pomocą elementu DataTemplate:

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"
                   Aspect="AspectFill"
                   WidthRequest="44"
                   HeightRequest="44" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Układy możliwe do powiązania powinny być używane tylko wtedy, gdy kolekcja elementów do wyświetlenia jest mała, a przewijanie i zaznaczenie nie jest wymagane.

Aby uzyskać więcej informacji, zobacz BindableLayout.

Układy niestandardowe

W programie .NET MAUI klasy układu pochodzą z klasy abstrakcyjnej Layout . Ta klasa deleguje układ i pomiar międzyplatformowy do klasy menedżera układu. Każda klasa menedżera układów implementuje ILayoutManager interfejs, który określa, że ArrangeChildren Measure i należy podać implementacje:

• Implementacja Measure wywołuje IView.Measure każdy widok w układzie i zwraca całkowity rozmiar układu, biorąc pod uwagę ograniczenia.
• Implementacja ArrangeChildren określa, gdzie każdy widok powinien być umieszczony w granicach układu, i wywołuje Arrange każdy widok z odpowiednimi granicami. Wartość zwracana jest rzeczywistym rozmiarem układu.

Układy programu .NET MAUI mają wstępnie zdefiniowane menedżery układów do obsługi ich układu. Czasami jednak konieczne jest organizowanie zawartości strony przy użyciu układu, który nie jest udostępniany przez program .NET MAUI. Można to osiągnąć, pisząc własny układ niestandardowy. Aby uzyskać więcej informacji, zobacz Niestandardowe układy.

Przezroczystość danych wejściowych

Każdy element wizualizacji ma InputTransparent powiązaną właściwość, która służy do definiowania, czy element może odbierać dane wejściowe. Jego wartość domyślna to false, zapewniając, że element może odbierać dane wejściowe. Gdy ta właściwość znajduje się true w elemecie, element nie otrzyma żadnych danych wejściowych. Zamiast tego dane wejściowe zostaną przekazane do wszystkich elementów, które są wizualnie za elementem.

Klasa Layout , z której pochodzą wszystkie układy, ma CascadeInputTransparent powiązaną właściwość, która kontroluje, czy elementy podrzędne dziedziczą przezroczystość danych wejściowych układu. Jego wartość domyślna to true, upewniając się, że ustawienie InputTransparent właściwości true na w klasie układu spowoduje, że wszystkie elementy w układzie nie otrzymają żadnych danych wejściowych.