Tworzenie Programu z Tekstem w .NET MAUI

1. Utworzenie Nowego Projektu w Visual Studio

• Otwórz Visual Studio 2022.

• Kliknij Utwórz nowy projekt.

• Wybierz .NET MAUI App i kliknij Dalej.

• Wpisz nazwę projektu, np. TextExampleApp, i kliknij Utwórz.

• Gdy projekt się otworzy, znajdź i otwórz plik MainPage.xaml. W tym pliku będziemy definiować wygląd aplikacji.

2. Dodanie Elementów Tekstowych do MainPage.xaml

W pliku MainPage.xaml dodamy różne elementy tekstowe, takie jak Label, Entry, Editor oraz przyciski. Wprowadzimy kod, który pokaże, jak różne elementy tekstowe wyświetlają tekst i jak możemy go używać.

Kod MainPage.xaml

Wpisz poniższy kod w pliku MainPage.xaml:

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

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

             x:Class="TextApp.MainPage"

             Title="Przykład z Tekstem">

    <VerticalStackLayout Padding="20" Spacing="15">

        <!-- Prosty tekst wyświetlony jako Label -->

        <Label Text="Witaj w aplikacji MAUI!"

               FontSize="Large"

               HorizontalOptions="Center" />

        <!-- Entry z placeholderem i obsługą zdarzenia -->

        <Entry x:Name="entryBox" Placeholder="Wprowadź tekst" 

               Completed="OnEntryCompleted"

               HorizontalOptions="Fill" />

        <!-- Editor do dłuższych tekstów -->

        <Editor x:Name="editorBox" Placeholder="Wprowadź dłuższy tekst"

                HeightRequest="100" HorizontalOptions="Fill" />

        <!-- Przycisk do wywołania zdarzenia -->

        <Button Text="Pokaż tekst z Entry" Clicked="OnShowEntryTextClicked" />

        <!-- Przycisk do wywołania zdarzenia -->

        <Button Text="Pokaż tekst z Editor" Clicked="OnShowEditorTextClicked" />

        <!-- Label do wyświetlania informacji po kliknięciu przycisków -->

        <Label x:Name="resultLabel"

               FontSize="Medium"

               TextColor="Blue"

               HorizontalOptions="Center" />

    </VerticalStackLayout>

</ContentPage>

Omówienie Kodów w XAML

Label: Wyświetla prosty tekst powitalny „Witaj w aplikacji MAUI!”.

• x:Name="resultLabel": Nadaje etykiecie nazwę "resultLabel". Ta nazwa będzie używana w kodzie C# do odwoływania się do tej konkretnej etykiety i modyfikowania jej właściwości.

• FontSize="Medium": Ustawia rozmiar czcionki etykiety na średni.

• TextColor="Blue": Ustawia kolor tekstu etykiety na niebieski.

• HorizontalOptions="Center": Centruje etykietę poziomo na ekranie.

Entry: To pole tekstowe do wpisywania pojedynczej linii tekstu. Ma Placeholder, który pokazuje podpowiedź dla użytkownika (tekst „Wprowadź tekst”).

• • Gdy użytkownik zakończy wpisywanie i naciśnie Enter, uruchomione zostanie zdarzenie Completed, które obsłużymy w kodzie C#.

Editor: Działa podobnie do Entry, ale pozwala na wpisanie dłuższego tekstu (kilka linii).

Button: Przycisk, który wywołuje zdarzenie Clicked po naciśnięciu. Dodaliśmy dwa przyciski:

• Text="Pokaż tekst z Editor": Ustawia tekst wyświetlany na przycisku na "Pokaż tekst z Editor". To jest to, co użytkownik zobaczy na ekranie.

• Clicked="OnShowEditorTextClicked": Definiuje zdarzenie, które zostanie wywołane, gdy użytkownik kliknie ten przycisk. Zdarzenie to ma nazwę OnShowEditorTextClicked. Kiedy przycisk zostanie naciśnięty, aplikacja zacznie szukać metody o tej nazwie w kodzie C# i ją wykona.

• • Pokaż tekst z Entry: Pokaże tekst wpisany w Entry.

  • Pokaż tekst z Editor: Pokaże tekst wpisany w Editor.

resultLabel: Wyświetli informacje o tekście wpisanym przez użytkownika po kliknięciu przycisków.

3. Dodanie Obsługi Zdarzeń w Kodzie C#

Teraz przechodzimy do obsługi zdarzeń w kodzie C#. Otwórz plik MainPage.xaml.cs, aby dodać kod, który będzie obsługiwał wpisywanie i przyciski.

Kod MainPage.xaml.cs

Wpisz poniższy kod do MainPage.xaml.cs:

using Microsoft.Maui.Controls;

using System;

namespace TextApp

{

    public partial class MainPage : ContentPage

    {

        public MainPage()

        {

            InitializeComponent();

        }

        // Obsługa zdarzenia przy ukończeniu wpisywania w Entry

        private void OnEntryCompleted(object sender, EventArgs e)

        {

            // Pobiera tekst z Entry i wyświetla w Labelu

            resultLabel.Text = $"Wprowadzony tekst (Entry): {entryBox.Text}";

        }

        // Obsługa przycisku do wyświetlenia tekstu z Entry

        private void OnShowEntryTextClicked(object sender, EventArgs e)

        {

            resultLabel.Text = $"Tekst w Entry: {entryBox.Text}";

        }

        // Obsługa przycisku do wyświetlenia tekstu z Editor

        private void OnShowEditorTextClicked(object sender, EventArgs e)

        {

            resultLabel.Text = $"Tekst w Editor: {editorBox.Text}";

        }

    }

}

Omówienie Kodów w C#

OnEntryCompleted:

Jest to funkcja, która uruchamia się automatycznie, gdy użytkownik zakończy wpisywanie tekstu w Entry i naciśnie Enter.

Pobiera tekst z entryBox i wyświetla go w resultLabel.

Szczegółowy opis funkcji

// Obsługa zdarzenia przy ukończeniu wpisywania w Entry

private void OnEntryCompleted(object sender, EventArgs e)

{

    // Pobiera tekst z Entry i wyświetla w Labelu

    resultLabel.Text = $"Wprowadzony tekst (Entry): {entryBox.Text}";

}

1. • Deklaracja funkcji:
     
     private void OnEntryCompleted(object sender, EventArgs e)

private: Modyfikator dostępu oznaczający, że ta funkcja jest dostępna tylko w ramach tej klasy (MainPage). Inne klasy nie mają bezpośredniego dostępu do tej funkcji.
void: Oznacza, że funkcja nie zwraca żadnej wartości.
OnEntryCompleted: Nazwa funkcji. Nazwa ta jest dowolna, ale zwykle wybiera się taką, która opisuje działanie funkcji. W tym przypadku nazwa sugeruje, że funkcja wykonuje się po zakończeniu wpisywania w Entry.
(object sender, EventArgs e): To parametry funkcji.

1. • Parametry funkcji:

object sender: Parametr sender reprezentuje źródło zdarzenia, czyli element, który wywołał to zdarzenie. W naszym przypadku jest to obiekt typu Entry.

EventArgs e: EventArgs to typ danych, który przekazuje dodatkowe informacje o zdarzeniu. W przypadku OnEntryCompleted nie zawiera dodatkowych danych, ale jest potrzebny, aby spełnić sygnaturę metody obsługującej zdarzenia.

1. • Działanie funkcji:
     
     resultLabel.Text = $"Wprowadzony tekst (Entry): {entryBox.Text}";

resultLabel.Text = ...: Ta linia przypisuje nową wartość do właściwości Text kontrolki Label o nazwie resultLabel. Właściwość Text definiuje tekst wyświetlany w tej kontrolce.

$"Wprowadzony tekst (Entry): {entryBox.Text}": Jest to interpolacja łańcucha znaków. Dzięki $ przed cudzysłowami możemy wstawiać zmienne bezpośrednio do tekstu.

entryBox.Text: entryBox to nazwa kontrolki Entry, a Text to właściwość, która przechowuje tekst wpisany przez użytkownika. Ta linia kodu pobiera tekst wpisany przez użytkownika do Entry i wstawia go do łańcucha znaków.

Wynikowa wartość, np. "Wprowadzony tekst (Entry): Przykładowy tekst", zostaje przypisana do Text w resultLabel, co sprawia, że tekst jest wyświetlany na ekranie w kontrolce Label.

Przykład działania funkcji

Użytkownik wpisuje tekst w Entry, np. „Przykładowy tekst”.

Po zakończeniu wpisywania naciska Enter.

Zdarzenie Completed dla Entry zostaje wywołane, co powoduje uruchomienie funkcji OnEntryCompleted.

Funkcja OnEntryCompleted pobiera tekst z Entry, tworzy z niego łańcuch znaków „Wprowadzony tekst (Entry): Przykładowy tekst” i przypisuje go do resultLabel.Text.

resultLabel wyświetla tekst „Wprowadzony tekst (Entry): Przykładowy tekst” na ekranie.

Dzięki tej funkcji użytkownik może zobaczyć tekst, który wpisał w Entry, wyświetlony w Label.

OnShowEntryTextClicked:

Jest to funkcja, która działa po kliknięciu przycisku „Pokaż tekst z Entry”.

Pobiera tekst z Entry i wyświetla go w resultLabel.

OnShowEditorTextClicked:

1. • Jest to funkcja, która działa po kliknięciu przycisku „Pokaż tekst z Editor”.

   • Pobiera tekst z Editor i wyświetla go w resultLabel.

4. Uruchomienie i Testowanie Aplikacji

Uruchom aplikację, klikając przycisk Start w Visual Studio.

Na emulatorze lub fizycznym urządzeniu sprawdź działanie aplikacji:

1. • Wpisz tekst w polu Entry i naciśnij Enter – zobaczysz wpisany tekst w resultLabel.

   • Wpisz tekst w Editor i kliknij przycisk „Pokaż tekst z Editor” – tekst z Editor pojawi się w resultLabel.

Podsumowanie

Dzięki temu projektowi nauczyłeś się:

• Jak dodawać różne formy tekstu do aplikacji .NET MAUI (Label, Entry, Editor).

• Jak tworzyć zdarzenia, które reagują na interakcje użytkownika, takie jak wpisywanie tekstu czy kliknięcia przycisków.

• Jak wyświetlać informacje na ekranie przy użyciu Label.