Xamarin.Forms Samouczek dotyczący obiektu StackLayout

Artykuł
Developer (Początkujący)
Czas do ukończenia: 10 min

Zanim podejmiesz próbę ukończenia tego samouczka, musisz pomyślnie ukończyć następujące szkolenia:

Skompiluj swój pierwszy Xamarin.Forms przewodnik Szybki start dotyczący aplikacji .

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Utwórz element Xamarin.FormsStackLayout w języku XAML.
Określanie orientacji obiektu StackLayout.
Kontrolowanie rozszerzenia i wyrównania widoku podrzędnego w obiekcie StackLayout.

Użyjesz programu Visual Studio 2019 lub Visual Studio dla komputerów Mac, aby utworzyć prostą aplikację, która pokazuje, jak wyrównać kontrolki w elemencie StackLayout. Na poniższych zrzutach ekranu przedstawiono ostateczną wersję aplikacji:

Użyjesz również Przeładowywanie na gorąco XAML, Xamarin.Forms aby zobaczyć zmiany interfejsu użytkownika bez ponownego kompilowania aplikacji.

Tworzenie obiektu stacklayout

Pozostały czas: 9 min

StackLayout to układ, który organizuje elementy podrzędne w poziome lub pionowe stosy jednowymiarowe. Domyślnie układ StackLayout ma orientację pionową.

Program Visual Studio
Visual Studio dla komputerów Mac

Do ukończenia tego samouczka jest potrzebny program Visual Studio 2019 (najnowsza wersja) z zainstalowanym pakietem roboczym Opracowywanie aplikacji mobilnych za pomocą środowiska .NET. Ponadto będzie potrzebny sparowany komputer Mac w celu kompilowania aplikacji samouczka w systemie iOS. Aby uzyskać informacje na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin. Aby uzyskać informacje na temat łączenia programu Visual Studio 2019 z hostem kompilacji Mac, zobacz Parowanie z komputerem Mac w celu opracowywania aplikacji platformy Xamarin.iOS.

Uruchom program Visual Studio i utwórz nową pustą Xamarin.Forms aplikację o nazwie StackLayoutTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę StackLayoutTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W Eksploratorze rozwiązań w projekcie StackLayoutTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutTutorial.MainPage">
    <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>
</ContentPage>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z trzech wystąpień obiektu Label w obiekcie StackLayout. Projekt StackLayout umieszcza widoki podrzędne (wystąpienia obiektu Label) w jednym wierszu, który jest domyślnie w orientacji pionowej. Ponadto właściwość Margin wskazuje miejsce renderowania obiektu StackLayout w ramach obiektu ContentPage.

Uwaga

Oprócz właściwości Margin w obiekcie StackLayout można również ustawić właściwości Padding i Spacing. Wartość właściwości Padding określa odległość między widokami w projekcie StackLayout, a wartość właściwości Spacing określa ilość miejsca między poszczególnymi elementami podrzędnymi w projekcie StackLayout. Aby uzyskać więcej informacji, zobacz Margines i wypełnienie.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Aby uzyskać więcej informacji na temat obiektu StackLayout, zobacz Xamarin.Forms StackLayout.

Do ukończenia tego samouczka jest potrzebny program Visual Studio dla komputerów Mac (najnowsza wersja) z zainstalowaną obsługą platform iOS i Android. Ponadto będzie również potrzebne środowisko Xcode (najnowsza wersja). Aby uzyskać więcej informacji na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin.

Uruchom Visual Studio dla komputerów Mac i utwórz nową pustą Xamarin.Forms aplikację o nazwie StackLayoutTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę StackLayoutTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W okienku rozwiązania w projekcie StackLayoutTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutTutorial.MainPage">
    <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>
</ContentPage>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z trzech wystąpień obiektu Label w obiekcie StackLayout. Projekt StackLayout umieszcza widoki podrzędne (wystąpienia obiektu Label) w jednym wierszu, który jest domyślnie w orientacji pionowej. Ponadto właściwość Margin wskazuje miejsce renderowania obiektu StackLayout w ramach obiektu ContentPage.

Uwaga

Oprócz właściwości Margin w obiekcie StackLayout można również ustawić właściwości Padding i Spacing. Wartość właściwości Padding określa odległość między widokami w projekcie StackLayout, a wartość właściwości Spacing określa ilość miejsca między poszczególnymi elementami podrzędnymi w projekcie StackLayout. Aby uzyskać więcej informacji, zobacz Margines i wypełnienie.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Aby uzyskać więcej informacji na temat obiektu StackLayout, zobacz Xamarin.Forms StackLayout.

Określanie orientacji

Pozostały czas: 6 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację StackLayout, aby elementy podrzędne były wyrównane w poziomie, a nie w pionie:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <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>

Ten kod ustawia dla właściwości Orientation wartość Horizontal.

Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Pamiętaj, że wystąpienia obiektu Label w obiekcie StackLayout są teraz wyrównane w poziomie, a nie w pionie.

W pliku MainPage.xaml zmodyfikuj deklarację StackLayout, aby elementy podrzędne były wyrównane w poziomie, a nie w pionie:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <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>

Ten kod ustawia dla właściwości Orientation wartość Horizontal.

Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Pamiętaj, że wystąpienia obiektu Label w obiekcie StackLayout są teraz wyrównane w poziomie, a nie w pionie.

Kontrolowanie wyrównania i rozszerzenia

Pozostały czas: 4 min

Rozmiar i położenie widoków podrzędnych w obiekcie StackLayout zależą od wartości widoków HeightRequest podrzędnych i WidthRequest właściwości oraz wartości HorizontalOptions właściwości i VerticalOptions .

Właściwości HorizontalOptions i VerticalOptions można ustawić na pola struktury LayoutOptions, która hermetyzuje dwie preferencje układu:

Wyrównanie — preferowane wyrównanie widoku podrzędnego, które określa jego położenie i rozmiar w układzie nadrzędnym.
Rozszerzenie — wskazuje, czy widok podrzędny powinien korzystać z dodatkowego miejsca, jeśli jest dostępne (opcja używana tylko przez obiekt StackLayout).

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu StackLayout, aby ustawić opcje wyrównania i rozszerzenia dla każdego obiektu Label:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Ten kod ustawia preferencje wyrównania w pierwszych czterech wystąpieniach obiektu Label oraz preferencje rozszerzenia w czterech końcowych wystąpieniach obiektu Label. Pola Start, Center, End i Fill są używane do definiowania wyrównania wystąpień obiektu Label w obiekcie nadrzędnym StackLayout. Pola StartAndExpand, CenterAndExpand, EndAndExpand i FillAndExpand są używane do definiowania preferencji wyrównania oraz wskazywania, czy widok ma zajmować więcej miejsca, jeśli jest dostępne w obiekcie nadrzędnym StackLayout.

Uwaga

Domyślna wartość właściwości widoku HorizontalOptions i VerticalOptions to Fill.

Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Obiekt StackLayout zachowuje tylko preferencje wyrównania w widokach podrzędnych, których kierunek jest przeciwny do orientacji obiektu StackLayout. W związku z tym widoki podrzędne obiektu Label w obiekcie StackLayout w orientacji pionowej mają właściwości HorizontalOptions ustawiane na jedno z pól wyrównania:
- Start, które powoduje umieszczenie obiektu Label po lewej stronie obiektu StackLayout.
- Center, które powoduje wyśrodkowanie obiektu Label w obiekcie StackLayout.
- End, które powoduje umieszczenie obiektu Label po prawej stronie obiektu StackLayout.
- Fill, które zapewnia, że obiekt Label wypełnia szerokość obiektu StackLayout.
Obiekt StackLayout może rozwijać widoki podrzędne tylko w kierunku zgodnym ze swoją orientacją. W związku z tym obiekt StackLayout w orientacji pionowej może rozwijać widoki podrzędne obiektu Label, które ustawiają właściwości VerticalOptions na jedno z pól rozszerzenia. Oznacza to, że w przypadku wyrównania w pionie każdy obiekt Label zajmuje tyle samo miejsca w obiekcie StackLayout. Tylko końcowy obiekt Label, który ustawia właściwość VerticalOptions na FillAndExpand, ma inny rozmiar.

Ważne

Gdy całe miejsce w obiekcie StackLayout jest używane, preferencje rozszerzenia nie wywołują żadnego efektu.

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji na temat wyrównania i rozszerzenia, zobacz Opcje układu w programie Xamarin.Forms.

W pliku MainPage.xaml zmodyfikuj deklarację obiektu StackLayout, aby ustawić opcje wyrównania i rozszerzenia dla każdego obiektu Label:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Uwaga

Domyślna wartość właściwości widoku HorizontalOptions i VerticalOptions to Fill.

Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Obiekt StackLayout zachowuje tylko preferencje wyrównania w widokach podrzędnych, których kierunek jest przeciwny do orientacji obiektu StackLayout. W związku z tym widoki podrzędne obiektu Label w obiekcie StackLayout w orientacji pionowej mają właściwości HorizontalOptions ustawiane na jedno z pól wyrównania:
- Start, które powoduje umieszczenie obiektu Label po lewej stronie obiektu StackLayout.
- Center, które powoduje wyśrodkowanie obiektu Label w obiekcie StackLayout.
- End, które powoduje umieszczenie obiektu Label po prawej stronie obiektu StackLayout.
- Fill, które zapewnia, że obiekt Label wypełnia szerokość obiektu StackLayout.
Obiekt StackLayout może rozwijać widoki podrzędne tylko w kierunku zgodnym ze swoją orientacją. W związku z tym obiekt StackLayout w orientacji pionowej może rozwijać widoki podrzędne obiektu Label, które ustawiają właściwości VerticalOptions na jedno z pól rozszerzenia. Oznacza to, że w przypadku wyrównania w pionie każdy obiekt Label zajmuje tyle samo miejsca w obiekcie StackLayout. Tylko końcowy obiekt Label, który ustawia właściwość VerticalOptions na FillAndExpand, ma inny rozmiar.

Ważne

Gdy całe miejsce w obiekcie StackLayout jest używane, preferencje rozszerzenia nie wywołują żadnego efektu.

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Aby uzyskać więcej informacji na temat wyrównania i rozszerzenia, zobacz Opcje układu w programie Xamarin.Forms.

Xamarin.Forms Samouczek dotyczący obiektu StackLayout

Tworzenie obiektu stacklayout

Określanie orientacji

Kontrolowanie wyrównania i rozszerzenia

Gratulacje!

Następne kroki

Xamarin.Forms Samouczek dotyczący obiektu StackLayout

Tworzenie obiektu stacklayout

Określanie orientacji

Kontrolowanie wyrównania i rozszerzenia

Gratulacje!

Następne kroki

Pokrewne łącza