PRZYCISKI (BUTTON) W .NET MAUI w Visual Studio 2022
PRZYCISKI (BUTTON) W .NET MAUI w Visual Studio 2022
W tym poradniku krok po kroku stworzymy prostą aplikację .NET MAUI, która będzie reagować na kliknięcia przycisków. Zobaczysz, jak zaimplementować różne funkcjonalności, od wyświetlania prostych alertów po wykonywanie bardziej złożonych obliczeń.
Uruchom Visual Studio 2022.
Utwórz nowy projekt: Wybierz szablon .NET MAUI App.
Konfiguracja projektu: Nadaj projektowi nazwę (np. ButtonApp) i wybierz lokalizację.
MainPage.xaml: Definiuje interfejs użytkownika za pomocą języka XAML.
MainPage.xaml.cs: Zawiera kod C#, który odpowiada za logikę działania aplikacji.
Otwórz plik MainPage.xaml i zastąp jego zawartość kodem podanym w przykładzie. Kod ten tworzy prosty układ z kilkoma przyciskami i polami tekstowymi.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp4.MainPage">
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Kontener dla całej zawartości ograniczony do 850px -->
<VerticalStackLayout
Padding="30,0"
Spacing="25"
MaximumWidthRequest="550"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<Label
Text="Witaj na kolejnej lekcji. Dziś podłączanie zdarzeń do Buttonów"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />
<Button
x:Name="welcome"
Text="WELCOME"
Clicked="OnWelcomeClicked" />
<Label Text="Chcesz usłyszeć coś miłego?" />
<Button
x:Name="buttonX"
Text="klikni aby zobaczyć prawdę..:)"
Clicked="OnButtonXClicked" />
<Label Text="Obliczymy pole prostokąta" />
<Entry
x:Name="textInput1" Placeholder="Podaj długość boku a" />
<Entry
x:Name="textInput2" Placeholder="Podaj długość boku b" />
<Button
x:Name="buttonY"
Text="oblicz pole prostokąta"
Clicked="OnButtonYClicked" />
<Entry x:Name="textInput" Placeholder="Wprowadź tekst" />
<Button
x:Name="buttonZ"
Text="Click me"
Clicked="OnButtonZClicked" />
</VerticalStackLayout>
</Grid>
</ScrollView>
</ContentPage>
<ContentPage>: Jest to główny element, który określa, że tworzymy stronę w aplikacji.
<ScrollView>: Pozwala na przewijanie zawartości, jeśli jest zbyt duża, aby zmieścić się na ekranie.
<Grid>: Jest to kontener, który umożliwia układanie elementów w wierszach i kolumnach.
<VerticalStackLayout>: Układa elementy pionowo jeden pod drugim.
<Label>: Wyświetla tekst statyczny.
<Button>: Tworzy przycisk, który wywołuje określoną akcję po kliknięciu.
<Entry>: Jest to pole tekstowe, w które użytkownik może wprowadzać dane.
<Grid>:
<Grid.RowDefinitions>: Definiuje wiersze w siatce. W tym przypadku mamy tylko jeden wiersz, który automatycznie dostosuje swoją wysokość do zawartości.
<Grid.ColumnDefinitions>: Definiuje kolumny w siatce. Tutaj mamy tylko jedną kolumnę, która zajmuje całą dostępną szerokość.
<VerticalStackLayout>:
Padding: Określa marginesy wokół zawartości.
Spacing: Definiuje odstęp między elementami.
MaximumWidthRequest: Ogranicza maksymalną szerokość układu.
HorizontalOptions="Center" i VerticalOptions="CenterAndExpand": Centruje układ poziomo i rozciąga go na całą dostępną wysokość.
<Button>:
x:Name: Nadaje przyciskowi nazwę, która jest używana w kodzie C# do obsługi zdarzeń.
Text: Ustawia tekst wyświetlany na przycisku.
Clicked: Zdarzenie, które jest wywoływane, gdy użytkownik kliknie przycisk.
welcome: Wyświetla wiadomość powitalną po kliknięciu.
buttonX: Wyświetla losowy motywacyjny cytat.
buttonY: Oblicza pole prostokąta na podstawie wartości wprowadzonych przez użytkownika w polach tekstowych.
buttonZ: Wyświetla tekst wprowadzony przez użytkownika w polu tekstowym.
Ten kod XAML tworzy prosty interfejs użytkownika z kilkoma przyciskami i polami tekstowymi. Gdy użytkownik kliknie przycisk, wywołana zostanie odpowiednia metoda w kodzie C#, która wykona określone działanie.
4. Implementacja logiki w MainPage.xaml.cs
Otwórz plik MainPage.xaml.cs i zastąp jego zawartość kodem podanym w przykładzie. Kod ten definiuje metody, które będą wywoływane po kliknięciu poszczególnych przycisków.
using Microsoft.Maui;
using Microsoft.Maui.Controls;
namespace MauiApp4
{
public partial class MainPage : ContentPage
{
private readonly List<string> motivationalQuotes = new()
{
"miło Cię dziś widzieć",
"Cieszę się że uczysz się aplikacji mobilnych",
"nie martw się życie ci jeszcze nie raz dokopie",
"ludzie mają gorzej więc nie narzekaj"
};
public MainPage()
{
InitializeComponent();
}
private async void OnWelcomeClicked(object sender, EventArgs e)
{
await DisplayAlert("Jeśli to widzisz to oznacza, że poprawnie podpiąłeś zdarzenie dla swojego buttona", "You clicked Button WELCOME!", "OK");
}
private async void OnButtonXClicked(object sender, EventArgs e)
{
Random random = new();
int randomIndex = random.Next(motivationalQuotes.Count);
string randomQuote = motivationalQuotes[randomIndex];
await DisplayAlert("Motywacja", randomQuote, "OK");
}
private async void OnButtonYClicked(object sender, EventArgs e)
{
bool isParseSuccessfulA = double.TryParse(textInput1.Text, out double sideA);
bool isParseSuccessfulB = double.TryParse(textInput2.Text, out double sideB);
if (isParseSuccessfulA && isParseSuccessfulB)
{
double area = sideA * sideB;
await DisplayAlert("Pole prostokąta", $"Pole wynosi: {area}", "OK");
}
else
{
await DisplayAlert("Błąd", "Wprowadzone wartości muszą być liczbami!", "OK");
}
}
private async void OnButtonZClicked(object sender, EventArgs e)
{
await DisplayAlert("Twój tekst", textInput.Text, "OK");
}
}
}
Analiza powyższego kodu
using Microsoft.Maui; i using Microsoft.Maui.Controls;: Te linijki importują niezbędne przestrzenie nazw, które zawierają klasy i metody potrzebne do tworzenia interfejsów użytkownika w aplikacjach .NET MAUI.
namespace MauiApp4: Definiuje przestrzeń nazw dla naszej aplikacji. Wszystkie klasy i metody zdefiniowane w tym pliku będą należeć do tej przestrzeni nazw.
public partial class MainPage : ContentPage:
public: Oznacza, że klasa jest dostępna z innych części aplikacji.
partial: Informuje kompilator, że definicja klasy jest podzielona na dwie części: jedną w pliku C# i drugą w pliku XAML.
MainPage: Nazwa klasy, która reprezentuje główną stronę aplikacji.
ContentPage: Klasa bazowa, od której dziedziczy nasza klasa. Zapewnia podstawowe funkcjonalności strony w aplikacji .NET MAUI.
OnWelcomeClicked:
Wywoływana, gdy użytkownik kliknie przycisk "WELCOME".
Wyświetla prosty alert, który służy jako potwierdzenie, że połączenie między XAML i C# działa prawidłowo.
OnButtonXClicked:
Wywoływana, gdy użytkownik kliknie przycisk "klikni aby zobaczyć prawdę..:)".
Wyświetla losowy cytat motywacyjny z wcześniej zdefiniowanej listy.
Jak działa losowanie:
Tworzy obiekt klasy Random, który generuje liczby losowe.
Wybiera losowy indeks z listy cytatów.
Wyświetla cytat znajdujący się pod tym indeksem.
OnButtonYClicked:
Wywoływana, gdy użytkownik kliknie przycisk "oblicz pole prostokąta".
Pobiera wartości z pól tekstowych, konwertuje je na liczby i oblicza pole prostokąta.
Wyświetla wynik obliczeń lub komunikat o błędzie, jeśli wprowadzone dane są nieprawidłowe.
OnButtonZClicked:
Wywoływana, gdy użytkownik kliknie przycisk "Click me".
Wyświetla tekst wprowadzony przez użytkownika w polu tekstowym.
private readonly List<string> motivationalQuotes = new():
private: Oznacza, że lista jest prywatna i dostępna tylko wewnątrz klasy MainPage.
readonly: Oznacza, że po zainicjalizowaniu listy nie można zmienić jej referencji, czyli nie można przypisać jej innej listy. Można jednak modyfikować elementy już znajdujące się na liście.
List<string>: To jest typ kolekcji, który przechowuje listę elementów typu string. W tym przypadku przechowuje listę motywacyjnych cytatów.
new(): Tworzy nowy obiekt listy.
Zawartość listy:
W nawiasach klamrowych znajduje się lista inicjalizacyjna, która dodaje elementy do nowo utworzonej listy. Każdy element to osobny cytat typu string.
public MainPage(): Jest to konstruktor klasy MainPage. Wywoływany jest, gdy tworzony jest nowy obiekt tej klasy.
InitializeComponent();: Ta linijka automatycznie inicjalizuje elementy interfejsu użytkownika zdefiniowane w pliku XAML, który jest powiązany z tym plikiem C#.
private async void OnWelcomeClicked(object sender, EventArgs e):
private: Metoda jest prywatna i dostępna tylko wewnątrz klasy.
async: Oznacza, że metoda może wykonywać operacje asynchronicznie, np. wyświetlanie alertu.
void: Metoda nie zwraca żadnej wartości.
OnWelcomeClicked: Nazwa metody, która jest wywoływana, gdy użytkownik kliknie przycisk "WELCOME".
object sender, EventArgs e: Parametry standardowe dla obsługi zdarzeń. sender reprezentuje obiekt, który wywołał zdarzenie (w tym przypadku przycisk), a e zawiera dodatkowe informacje o zdarzeniu.
await DisplayAlert("Jeśli to widzisz to oznacza, że poprawnie podpiąłeś zdarzenie dla swojego buttona", "You clicked Button WELCOME!", "OK");:
Wyświetla alert z trzema przyciskami: tytułem, treścią i przyciskiem "OK".
private async void OnButtonXClicked(object sender, EventArgs e):
Wywoływana, gdy użytkownik kliknie przycisk "klikni aby zobaczyć prawdę..:)".
Random random = new();: Tworzy nowy obiekt klasy Random do generowania liczb losowych.
int randomIndex = random.Next(motivationalQuotes.Count);: Generuje losową liczbę całkowitą od 0 do motivationalQuotes.Count - 1, która będzie indeksem losowego cytatu.
string randomQuote = motivationalQuotes[randomIndex];: Pobiera cytat z listy motivationalQuotes o wylosowanym indeksie.
await DisplayAlert("Motywacja", randomQuote, "OK");: Wyświetla alert z tytułem "Motywacja" i losowym cytatem.
x:Name: W XAML każdemu elementowi można przypisać nazwę, która jest następnie używana w kodzie C# do odwoływania się do tego elementu.
Clicked: To zdarzenie, które jest wywoływane, gdy użytkownik kliknie przycisk. W atrybucie Clicked podajemy nazwę metody w C#, która ma zostać wywołana, gdy to zdarzenie wystąpi.
Kliknij Uruchom (F5) w Visual Studio lub wybierz odpowiedni emulator/symulator urządzenia, który zawiera aplikację.
Po uruchomieniu:
Kliknięcie pierwsze powinno zostać wprowadzone na stronę internetową.
Kliknięcie przycisku powinno być obsługiwane przez komunikat „Witaj w moim programie”.