OBRAZY W .NET MAUI w Visual Studio 2022
OBRAZY W .NET MAUI w Visual Studio 2022
Opis Projektu.
Tworzymy projekt, w którym wstawiamy dwa obrazy. Każdy z obrazów będzie miał inne zdarzenie. Pierwszy obraz po kliknięciu odeśle nas do wybranej strony internetowej, drugi po kliknięciu wyświetli napis.
Uruchom Visual Studio 2022 .
Kliknij na "Utwórz nowy projekt" (Utwórz nowy projekt).
Wyszukaj „.NET MAUI App” i wybierz tę opcję. Kliknij „Dalej” .
Nadzwyczajny projektowi, np. ObrazyProjekt, wybieram miejsce, w którym chcesz zapisać projekt. Kliknij „Utwórz” .
Po utworzeniu projektu Visual Studio uzyskuje się z dostępnej struktury .NET MAUI.
W nowo wprowadzonym zastosowaniu - solucji różnych plików i folderów, skorzystamy z kluczowych elementy, które nas interesują:
MainPage.xaml – odpowiada za wygląd głównej strony aplikacji.
MainPage.xaml.cs – odpowiada za logikę działania, czyli co się dzieje, gdy użytkownik wejdzie w interakcję z elementami aplikacji.
folder Resuorces > Images w projekcie.
Wklej tam dwa pliki graficzne (np. obrazek1.png i obrazek2.png), które będą używane w aplikacji.
Uwaga: Obrazy te automatycznie będą przetworzone i dostępne w aplikacji po ich umieszczeniu w folderze Resuorces > Images
Otwórz plik MainPage.xaml .
Usuwamy przykładowy kod z pliku i zapisujemy następujące polecenia:
<?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="obrazy.MainPage">
<ScrollView>
<VerticalStackLayout
Padding="30,0"
Spacing="25">
<!-- Pierwszy obrazek - otwierający stronę internetową -->
<Image
Source="obrazek1.png"
HorizontalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnImage1Tapped" />
</Image.GestureRecognizers>
</Image>
<Label Text="Kliknij obrazek powyżej" HorizontalTextAlignment="Center" />
<!-- Drugi obrazek - wyświetlający komunikat -->
<Image
Source="obrazek2.png"
HorizontalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnImage2Tapped" />
</Image.GestureRecognizers>
</Image>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Image – dodanie obrazu do projektu. Wpisz w Source="obrazek1.png" - plik musi być wcześniej dodany do tego folderu
TapGestureRecognizer służy do rozpoznawania gestu dotknięcia (tap) na elemencie interfejsu użytkownika. Gdy użytkownik dotknie elementu, do którego przypisany jest ten gest, zostanie wywołane określone zdarzenie (np. Tapped).
WidthRequest i HeightRequest. Te właściwości służą do ustawienia żądanej szerokości i wysokości elementu, ale nie gwarantują, że element faktycznie zajmie tyle miejsca, ponieważ układ może to zmienić.
<Image.GestureRecognizers> <TapGestureRecognizer Tapped="OnImage2Tapped" /> </Image.GestureRecognizers>
Cały ten fragment kodu służy do dodania interaktywności do obrazka w aplikacji .NET MAUI.
Rozbijmy go na części:
<Image.GestureRecognizers>:
Znaczenie: Ta linijka otwiera kolekcję gestów, które mogą być przypisane do obrazka. Wewnątrz tej kolekcji możemy definiować różne gesty, takie jak dotknięcie, przesunięcie, przyciągnięcie itp.
Cel: Dzięki tej kolekcji możemy sprawić, że obraz będzie reagował na interakcje użytkownika, takie jak dotknięcie palcem.
<TapGestureRecognizer Tapped="OnImage2Tapped" />:
Znaczenie: To jest konkretny gest - gest dotknięcia (tap).
Tapped="OnImage2Tapped":
Tapped: To zdarzenie, które zostanie wywołane, gdy użytkownik dotknie obrazka.
OnImage2Tapped: To nazwa metody, która zostanie wywołana, gdy nastąpi to zdarzenie. W tej metodzie możesz umieścić kod, który określi, co ma się stać po dotknięciu obrazka (np. przejście do innej strony, wyświetlenie okna dialogowego itp.).
Otwórz plik MainPage.xaml.cs .
Zastąp zawartość pliku następującym kodem:
using System;
using Microsoft.Maui.Controls;
namespace ObrazyProjekt
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
// Obsługa kliknięcia pierwszego obrazka
private async void OnImage1Tapped(object sender, EventArgs e)
{
Uri url = new Uri("https://sites.google.com/view/gregoryk/menu/aplikacje-mobilne?authuser=0");
await Browser.Default.OpenAsync(url, BrowserLaunchMode.SystemPreferred);
}
// Obsługa kliknięcia drugiego obrazka
private async void OnImage2Tapped(object sender, EventArgs e)
{
await DisplayAlert("Informacja", "Witaj w moim programie", "OK");
}
}
}
Wyjaśnienie kodu MainPage.xaml.cs
using System;:
Ta linijka informuje kompilator, że będziemy używać elementów z przestrzeni nazw System, która zawiera podstawowe klasy i funkcje języka C#.
using Microsoft.Maui.Controls;:
Tutaj informujemy kompilator, że będziemy używać elementów z przestrzeni nazw Microsoft.Maui.Controls, która zawiera klasy związane z tworzeniem interfejsu użytkownika w aplikacjach .NET MAUI.
namespace ObrazyProjekt:
To jest deklaracja przestrzeni nazw dla naszej aplikacji. Wszystkie klasy i elementy, które zdefiniujemy w tym pliku, będą należały do tej przestrzeni nazw.
public partial class MainPage : ContentPage:
Ta linijka definiuje klasę MainPage, która dziedziczy po klasie ContentPage. Klasa MainPage będzie głównym widokiem naszej aplikacji.
public MainPage():
To jest konstruktor klasy MainPage. Wywoływana jest, gdy tworzony jest nowy obiekt tej klasy.
InitializeComponent(); - ta linijka inicjalizuje elementy interfejsu użytkownika zdefiniowane w pliku XAML (który nie jest pokazany w tym fragmencie kodu).
private async void OnImage1Tapped(object sender, EventArgs e):
Ta metoda jest wywoływana, gdy użytkownik kliknie pierwszy obrazek.
async: oznacza, że metoda może wykonywać operacje asynchronicznie, np. otwieranie strony internetowej.
await Browser.Default.OpenAsync(url, BrowserLaunchMode.SystemPreferred);: Ta linijka otwiera domyślną przeglądarkę internetową i ładuje podany adres URL.
private async void OnImage2Tapped(object sender, EventArgs e):
Ta metoda jest wywoływana, gdy użytkownik kliknie drugi obrazek.
await DisplayAlert("Informacja", "Witaj w moim programie", "OK");: Ta linijka wyświetla proste okno dialogowe z informacją.
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”.