PROJEKT APLIKACJI Z WYKORZYSTANIEM RÓŻNYCH LAYOUTÓW

Krok 1: Konfigurowanie projektu

1. Otwórz program Visual Studio 2022 .

2. Utwórz nowy projekt aplikacji .NET MAUI . Nazwij go na przykład ukladApki.

3. W swoim projekcie otwórz MainPage.xaml plik. Ten plik zdefiniuje układ wizualny strony głównej.
   
   

Krok 2: Zdefiniuj podstawową strukturę za pomocą Grid

W tym artykule MainPage.xaml użyjemy Grid układu do podzielenia naszego układu na sekcje.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="ukladApki.MainPage">

    <Grid RowDefinitions="Auto,*,*,Auto" ColumnDefinitions="*,*">

    </Grid>

</ContentPage>

Przyjrzyjmy się linia po linii:

• Pierwsze linijki:

xmlns="http://schemas.microsoft.com/dotnet/2021/maui" - Ten wiersz wskazuje przestrzeń nazw dla elementów .NET MAUI. Przestrzenie nazw pomagają uniknąć konfliktów, gdy używamy tych samych nazw dla różnych elementów.

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" - To kolejna przestrzeń nazw, tym razem dla XAML, języka służącego do opisywania interfejsu użytkownika.

x:Class="ukladApki.MainPage" - Ta linia wskazuje, że ten kod XAML definiuje wygląd klasy MainPage z Twojego pliku C# (prawdopodobnie ukladApki.MainPage.cs).

• Główny element - Grid:

<Grid RowDefinitions="Auto,*,*,Auto" ColumnDefinitions="*,*"> - To linia definiuje układ elementów na stronie.

Grid - Jest to kontener, który służy do rozmieszczania elementów w wierszach i kolumnach.

RowDefinitions="Auto,*,*,Auto" - Ta część definiuje liczbę i wysokość wierszy w siatce.

Auto - Oznacza, że wysokość wiersza będzie dostosowana automatycznie do zawartości.

* - Oznacza, że wiersz zajmie całą pozostałą dostępną przestrzeń. W tym przypadku mamy taki wiersz na drugiej pozycji - będzie on największy.

ColumnDefinitions="*,*" - Tutaj definiujemy liczbę i szerokość kolumn w siatce.

* - Oznacza, że kolumna zajmie połowę dostępnej szerokości.

Krok 3: Dodawanie niebieskiej sekcji nagłówka z tytułem i logo

W pierwszym rzędzie tworzymy niebieski nagłówek z tytułem i obrazem logo.

<!-- Blue Layout Section (Top) with Title and Logo -->

<BoxView Grid.Row="0" Grid.ColumnSpan="2" Color="Blue" />

<HorizontalStackLayout Grid.Row="0" Grid.ColumnSpan="2" 

                       HorizontalOptions="Center" VerticalOptions="Center" 

                       Padding="10" Spacing="10">

    <!-- Logo Image -->

    <Image Source="logo.png" WidthRequest="40" HeightRequest="40" />

    <!-- Title Label -->

    <Label Text="Nazwa Aplikacji"

           FontSize="Title"

           TextColor="White"

           VerticalOptions="Center"/>

</HorizontalStackLayout>

Rozbijmy to krok po kroku:

Sekcja niebieskiego tła:

BoxView Grid.Row="0" Grid.ColumnSpan="2" Color="Blue":

BoxView: To element, który tworzy prostokątny obszar o określonym kolorze.

Grid.Row="0": Umieszcza ten element w pierwszym wierszu siatki.

Grid.ColumnSpan="2": Rozciąga ten element na dwie kolumny siatki, zajmując całą szerokość.

Color="Blue": Ustawia kolor tła na niebieski.

Sekcja z logo i tytułem:

HorizontalStackLayout Grid.Row="0" Grid.ColumnSpan="2" ...:

HorizontalStackLayout: To kontener, który układa elementy poziomo.

Grid.Row="0": Umieszcza ten kontener w pierwszym wierszu siatki.

Grid.ColumnSpan="2": Rozciąga ten kontener na dwie kolumny siatki, zajmując całą szerokość.

HorizontalOptions="Center": Centruje kontener poziomo.

VerticalOptions="Center": Centruje kontener pionowo.

Padding="10": Dodaje marginesy o wielkości 10 jednostek wokół kontenera.

Spacing="10": Dodaje odstęp 10 jednostek między elementami wewnątrz kontenera.

Elementy wewnątrz HorizontalStackLayout:

Image Source="logo.png" WidthRequest="40" HeightRequest="40":

Image: To element, który wyświetla obraz.

Source="logo.png": Wskazuje ścieżkę do pliku obrazu.

WidthRequest="40": Ustawia żądaną szerokość obrazu na 40 jednostek.

HeightRequest="40": Ustawia żądaną wysokość obrazu na 40 jednostek.

Label Text="Nazwa Aplikacji" ...:

Label: To element, który wyświetla tekst.

Text="Nazwa Aplikacji": Ustawia tekst wyświetlany przez etykietę.

FontSize="Title": Ustawia rozmiar czcionki na rozmiar tytułu.

TextColor="White": Ustawia kolor tekstu na biały.

VerticalOptions="Center": Centruje etykietę pionowo.

Krok 4: Dodawanie sekcji treści

Następnie dodajemy sekcje treści poniżej nagłówka.

Sekcja zielona (środek po lewej) – w tym obszarze może znajdować się obraz lub inna treść.

<BoxView Grid.Row="1" Grid.Column="0" Color="Green" />

<Label Grid.Row="1" Grid.Column="0" Text="Tu kolor jest zielony i wstawiamy tu obrazek"

       HorizontalOptions="Center" VerticalOptions="Center" TextColor="Black"/>

Biała sekcja wprowadzania tekstu (środek po prawej) – w tym obszarze znajduje się pole do wprowadzania tekstu, w którym użytkownik może wprowadzić dane.

<BoxView Grid.Row="1" Grid.Column="1" Color="White" />

<Entry Grid.Row="1" Grid.Column="1" Placeholder="Tu kolor jest biały i pole tekstowe"

       HorizontalOptions="Fill" VerticalOptions="Center" TextColor="Black"/>

Wyjaśnienie :

Sekcja zielona (lewa):

BoxView Grid.Row="1" Grid.Column="0" Color="Green":

Tworzy zielony prostokąt jako tło dla tej sekcji.

Grid.Row="1": Umieszcza element w drugim wierszu siatki (pamiętaj, że numerowanie zaczyna się od 0).

Grid.Column="0": Umieszcza element w pierwszej kolumnie siatki.

Label Grid.Row="1" Grid.Column="0" ...:

Dodaje etykietę (opis) do zielonej sekcji.

Wszystkie właściwości związane z siatką (Grid.Row, Grid.Column) są takie same jak dla BoxView, co oznacza, że etykieta będzie nałożona na zielony prostokąt.

HorizontalOptions="Center": Centruje etykietę poziomo w obrębie zielonej sekcji.

VerticalOptions="Center": Centruje etykietę pionowo w obrębie zielonej sekcji.

Sekcja biała (prawa):

BoxView Grid.Row="1" Grid.Column="1" Color="White":

Tworzy białe tło dla tej sekcji.

Grid.Row="1": Umieszcza element w drugim wierszu siatki.

Grid.Column="1": Umieszcza element w drugiej kolumnie siatki.

Entry Grid.Row="1" Grid.Column="1" ...:

Dodaje pole tekstowe do białej sekcji.

Placeholder="Tu kolor jest biały i pole tekstowe": Ustawia tekst zastępczy w polu tekstowym, który zniknie, gdy użytkownik zacznie wpisywać.

HorizontalOptions="Fill": Rozciąga pole tekstowe na całą szerokość dostępnej przestrzeni w kolumnie.

VerticalOptions="Center": Centruje pole tekstowe pionowo w obrębie białej sekcji.

Krok 5: Dodawanie sekcji dolnego przycisku

W ostatnim rzędzie dodamy trzy przyciski ułożone poziomo na jasnofioletowym tle.

<BoxView Grid.Row="2" Grid.ColumnSpan="2" Color="Lavender" />

<StackLayout Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal" 

             HorizontalOptions="Center" VerticalOptions="Center" Spacing="10">

    <Button Text="Button 1" Clicked="OnButtonClicked" />

    <Button Text="Button 2" Clicked="OnButtonClicked" />

    <Button Text="Button 3" Clicked="OnButtonClicked" />

</StackLayout>

Wyjaśnienie :

Ten fragment kodu dodaje trzeci wiersz do siatki, który zajmuje całą szerokość i zawiera trzy przyciski ułożone poziomo.

Sekcja lawendowa:

BoxView Grid.Row="2" Grid.ColumnSpan="2" Color="Lavender":

Tworzy lawendowe tło dla tego wiersza.

Grid.Row="2": Umieszcza element w trzecim wierszu siatki.

Grid.ColumnSpan="2": Rozciąga element na dwie kolumny, zajmując całą szerokość.

Sekcja z przyciskami:

StackLayout Grid.Row="2" Grid.ColumnSpan="2" ...:

Tworzy kontener, który układa elementy poziomo.

Grid.Row="2": Umieszcza kontener w trzecim wierszu siatki.

Grid.ColumnSpan="2": Rozciąga kontener na dwie kolumny, zajmując całą szerokość.

HorizontalOptions="Center": Centruje kontener poziomo w wierszu.

VerticalOptions="Center": Centruje kontener pionowo w wierszu.

Spacing="10": Ustawia odstęp między przyciskami na 10 jednostek.

Przyciski:

Button Text="Button 1" Clicked="OnButtonClicked":

Tworzy przycisk z tekstem "Button 1".

Clicked="OnButtonClicked": Definiuje metodę OnButtonClicked, która zostanie wywołana po kliknięciu przycisku.

Podobnie są zdefiniowane pozostałe dwa przyciski.

Krok 6: Kod za zdarzeniami kliknięcia przycisku

W programie MainPage.xaml.cs definiujemy obsługę zdarzeń dla kliknięć przycisków.

namespace ukladApki

{

    public partial class MainPage : ContentPage

    {

        public MainPage()

        {

            InitializeComponent();

        }

        // General event handler for all buttons

        private void OnButtonClicked(object sender, EventArgs e)

        {

            if (sender is Button button)

            {

                DisplayAlert("Button Clicked", $"{button.Text} was clicked", "OK");

            }

        }

    }

}

Szczegółowe wyjaśnienie:

• namespace ukladApki:
  To jest przestrzeń nazw. Wyobraź sobie, że to jest folder, w którym przechowywane są wszystkie elementy związane z tą konkretną aplikacją. Dzięki przestrzeniom nazw unikamy konfliktów nazw, gdy mamy wiele klas o tej samej nazwie.

• public partial class MainPage : ContentPage:
  Tutaj definiujemy klasę o nazwie MainPage, która będzie reprezentować naszą stronę główną. Słowo kluczowe partial oznacza, że część definicji klasy może znajdować się w innym pliku (zazwyczaj w pliku XAML, który opisuje wygląd strony). Klasa ta dziedziczy po klasie ContentPage, która jest podstawową klasą dla stron w aplikacjach .NET MAUI.

• public MainPage():
  To jest konstruktor klasy MainPage. Wywoływany jest, gdy tworzony jest nowy obiekt tej klasy. Wewnątrz konstruktora wywołujemy metodę InitializeComponent(), która łączy kod C# z plikiem XAML, czyli z opisem interfejsu użytkownika.

• private void OnButtonClicked(object sender, EventArgs e):
  To jest metoda, która zostanie wywołana, gdy użytkownik kliknie dowolny przycisk na stronie.
  sender: obiekt, który wywołał zdarzenie (w naszym przypadku będzie to przycisk).
  e: argumenty zdarzenia, które zawierają dodatkowe informacje o zdarzeniu, ale w tym przypadku nie są nam potrzebne.

• if (sender is Button button):
  To sprawdzenie, czy obiekt, który wywołał zdarzenie, jest przyciskiem. Jeśli tak, to przypisujemy go do zmiennej button.

• DisplayAlert("Button Clicked", $"{button.Text} was clicked", "OK");:
  Jeśli obiekt był przyciskiem, to wyświetlamy prosty komunikat (alert) z informacją o tym, który przycisk został naciśnięty. Metoda DisplayAlert służy do wyświetlania takich komunikatów.