Utworzenie Nowego Projektu w Visual Studio 2022

Otwórz Visual Studio 2022.

Wybierz Utwórz nowy projekt.

Wybierz .NET MAUI App i kliknij Dalej.

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

Po utworzeniu projektu przejdź do pliku MainPage.xaml, w którym zdefiniujemy wygląd aplikacji.

Przygotowanie Obrazka

Dodaj obrazek logo.png do projektu:

Skopiuj plik logo.png do folderu Resources/Images w projekcie.

W Visual Studio kliknij prawym przyciskiem na logo.png i wybierz Properties.

Upewnij się, że w sekcji Build Action jest ustawione MauiImage.

Definiowanie Layoutu w XAML (MainPage.xaml)

W pliku MainPage.xaml ustawimy kolor tła na ciemnoniebieski, dodamy obrazek, pole tekstowe z instrukcją oraz przycisk do zmiany koloru tła.

Kod MainPage.xaml

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

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

             x:Class="ZmianaKoloruTla.MainPage"

             BackgroundColor="DarkBlue">

    <VerticalStackLayout Padding="20" Spacing="20" HorizontalOptions="Center" VerticalOptions="Center">

        <!-- Wyświetlanie obrazka (logo) -->

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

        <!-- Pole tekstowe z instrukcją -->

        <Label Text="Aby ustawić kolor tła w .NET MAUI, użyj właściwości BackgroundColor na poziomie ContentPage."

               FontSize="Medium"

               TextColor="White"

               HorizontalOptions="Center"

               VerticalOptions="Center" />

        <!-- Przycisk do zmiany koloru tła -->

        <Button Text="Zmień kolor tła na ciemnoczerwony"

                Clicked="OnZmianaKoloruTlaClicked"

                HorizontalOptions="Center" />

    </VerticalStackLayout>

</ContentPage>

Omówienie elementów kodu w XAML

• BackgroundColor="DarkBlue": Ustawia kolor tła strony (ContentPage) na ciemnoniebieski.

• Image: Wyświetla obrazek logo.png o szerokości i wysokości ustawionej na 100 pikseli.

• Label: Wyświetla instrukcję dotyczącą ustawiania koloru tła. Kolor tekstu to biały (TextColor="White"), aby był widoczny na ciemnym tle.

• Button: Przycisk, który po kliknięciu wywołuje zdarzenie OnZmianaKoloruTlaClicked.

4Dodanie Obsługi Zdarzenia do C# (MainPage.xaml.cs)

Teraz przechodzimy do kodu C#, aby dodać funkcję, która zmienia kolor tła na ciemnoczerwony po kliknięciu przycisku i po ponownym kliknięciu powraca na poprzedni kolor.

Kod MainPage.xaml.cs

using Microsoft.Maui.Graphics;

namespace ZmianaKoloruTla

{

    public partial class MainPage : ContentPage

    {

        // Zmienna przechowująca aktualny kolor tła

        private bool isDarkBlue = true;

        public MainPage()

        {

            InitializeComponent();

            // Ustawienie początkowego koloru tła i tekstu przycisku

            this.BackgroundColor = Microsoft.Maui.Graphics.Colors.DarkBlue;

        }

        // Funkcja zmieniająca kolor tła po kliknięciu przycisku

        private void OnZmianaKoloruTlaClicked(object sender, EventArgs e)

        {

            if (isDarkBlue)

            {

                // Zmieniamy kolor tła na ciemnoczerwony

                this.BackgroundColor = Microsoft.Maui.Graphics.Colors.DarkRed;

                // Zmieniamy tekst przycisku

                ((Button)sender).Text = "Zmień kolor na ciemnoniebieski";

            }

            else

            {

                // Zmieniamy kolor tła na ciemnoniebieski

                this.BackgroundColor = Microsoft.Maui.Graphics.Colors.DarkBlue;

                // Zmieniamy tekst przycisku

                ((Button)sender).Text = "Zmień kolor na ciemnoczerwony";

            }

            // Odwracamy wartość isDarkBlue (z true na false lub z false na true)

            isDarkBlue = !isDarkBlue;

        }

    }

}

Wyjaśnienie kodu

• Ta linia importuje przestrzeń nazw Microsoft.Maui.Graphics, która zawiera definicje kolorów i innych elementów graficznych, które będziemy używać w naszej aplikacji.

• Namespace...Ta linia definiuje przestrzeń nazw dla naszej aplikacji. Wszystkie klasy i metody, które zdefiniujemy, będą należeć do tej przestrzeni nazw.

• Ta linia definiuje klasę MainPage, która dziedziczy po klasie ContentPage. Klasa MainPage reprezentuje główną stronę naszej aplikacji. Słowo kluczowe partial oznacza, że definicja tej klasy jest podzielona na dwie części: jedną w tym pliku (C#) i drugą w odpowiadającym pliku XAML (interfejs użytkownika).

• Ta linia deklaruje prywatną zmienną boolowską o nazwie isDarkBlue. Ta zmienna będzie używana do śledzenia aktualnego koloru tła. Początkowo jest ustawiona na true, co oznacza, że początkowy kolor tła będzie ciemnoniebieski.

• Ten konstruktor jest wywoływany, gdy tworzony jest obiekt MainPage.

  • InitializeComponent();: Ta linia inicjalizuje komponenty zdefiniowane w pliku XAML.

  • this.BackgroundColor = Microsoft.Maui.Graphics.Colors.DarkBlue;: Ta linia ustawia początkowy kolor tła strony na ciemnoniebieski.

• private void OnZmianaKoloruTlaClicked(object sender, EventArgs e Ta metoda jest wywoływana, gdy użytkownik kliknie przycisk (który jest powiązany z tym zdarzeniem w XAML).

Wewnątrz metody OnZmianaKoloruTlaClicked:

• Warunek if: Sprawdza wartość zmiennej isDarkBlue.

• Zmiana koloru tła i tekstu przycisku: W zależności od wartości isDarkBlue zmienia kolor tła na ciemnoczerwony lub ciemnoniebieski, a także zmienia tekst przycisku, aby wskazywał na nowy kolor.

• Zmiana wartości isDarkBlue: Po zmianie koloru, wartość isDarkBlue jest negowana, co powoduje, że przy następnym kliknięciu przycisku kolor zostanie zmieniony na przeciwny.
  
  

Uruchomienie i Testowanie Aplikacji

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