KOLOR TŁA .NET MAUI w Visual Studio 2022
KOLOR TŁA .NET MAUI 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.
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.
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>
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.
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.
Uruchom aplikację, klikając przycisk Start w Visual Studio.