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

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

             x:Class="MauiApp1.MainPage"

             Title="Przykład Button">

  <StackLayout Padding="20" Spacing="20">

    <!-- Przycisk z ustawionymi właściwościami i stylizacją stanów -->

    <Button Text="Najedź myszą"

            WidthRequest="200"

            HeightRequest="50"

            BackgroundColor="Blue"

            Opacity="0.8">

      <!-- Definicja grup stanów przycisku -->

      <VisualStateManager.VisualStateGroups>

        <VisualStateGroup x:Name="CommonStates">

          <!-- Stan Normalny -->

          <VisualState x:Name="Normal">

            <VisualState.Setters>

              <Setter Property="BackgroundColor" Value="Blue" />

              <Setter Property="Opacity" Value="0.8" />

            </VisualState.Setters>

          </VisualState>

          <!-- Stan Naciśnięty -->

          <VisualState x:Name="Pressed">

            <VisualState.Setters>

              <Setter Property="BackgroundColor" Value="DarkBlue" />

            </VisualState.Setters>

          </VisualState>

          <!-- Stan po najechaniu kursorem (PointerOver) -->

          <VisualState x:Name="PointerOver">

            <VisualState.Setters>

              <Setter Property="BackgroundColor" Value="Red" />

              <Setter Property="Opacity" Value="1.0" />

            </VisualState.Setters>

          </VisualState>

        </VisualStateGroup>

      </VisualStateManager.VisualStateGroups>

    </Button>

  </StackLayout>

</ContentPage>

######

WYJAŚNIENIE

1. Ustawienia kontenera:

• Używamy StackLayout z paddingiem i odstępami, aby uporządkować układ elementów na stronie.

2. Button:

• Text: Tekst wyświetlany na przycisku.

• WidthRequest i HeightRequest: Ustalają rozmiar przycisku (200 px szerokości, 50 px wysokości).

• BackgroundColor: Ustawia domyślny kolor tła przycisku (niebieski).

• Opacity: Ustawia przezroczystość przycisku (0.8, czyli lekko przezroczysty).

3. VisualStateManager:

• VisualStateGroup “CommonStates”: Definiuje grupę stanów, w której określamy wygląd przycisku dla różnych interakcji.

• VisualState “Normal”: Stan domyślny – przycisk ma niebieskie tło i opacity 0.8.

• VisualState “Pressed”: Gdy przycisk jest naciśnięty, zmienia tło na ciemnoniebieskie.

• VisualState “PointerOver”: Gdy wskaźnik myszy znajduje się nad przyciskiem, tło zmienia się na czerwone, a opacity na 1.0 (pełna nieprzezroczystość).

Wskazówki:

• Aby korzystać ze stanu PointerOver, upewnij się, że testujesz aplikację na platformie desktopowej lub symulatorze, który obsługuje wskaźnik myszy.

• Jeśli chcesz dodać więcej stanów lub zmienić styl przy innych interakcjach (np. Focused, Disabled), możesz rozszerzyć VisualStateGroup o dodatkowe VisualState.

• Dzięki XAML Hot Reload możesz na bieżąco podglądać zmiany wprowadzane w kodzie XAML, co bardzo ułatwia iteracyjne projektowanie interfejsu.

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

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

             x:Class="MauiApp1.MainPage"

             Title="Przykład pola tekstowego">

  <StackLayout Padding="20" Spacing="20">

    <!-- Pole tekstowe do wprowadzania danych -->

    <Entry x:Name="entryText"

           Placeholder="Wpisz swój tekst"

           FontSize="16"

           TextColor="Black"

           BackgroundColor="LightGray"

           Margin="10"

           HorizontalOptions="FillAndExpand"

           VerticalOptions="Center"

           Keyboard="Default" />

  </StackLayout>

</ContentPage>

#####

WYJAŚNIENIE

1. Entry – Kontrolka używana do wprowadzania pojedynczej linii tekstu. Jeśli potrzebujesz pola wieloliniowego, warto użyć kontrolki Editor.

2. x:Name=“entryText”

Pozwala nadać kontrolce unikalną nazwę, dzięki czemu możesz się do niej odwoływać z kodu-behind (C#).

3. Placeholder=“Wpisz swój tekst”

Tekst wyświetlany w polu, gdy jest ono puste. Działa jak podpowiedź dla użytkownika, co należy wpisać.

4. FontSize=“16”

Ustawia rozmiar czcionki wyświetlanego tekstu na 16 punktów. Możesz dostosować tę wartość, aby pole wyglądało zgodnie z wymaganiami projektu.

5. TextColor=“Black”

Ustawia kolor tekstu. W tym przykładzie jest czarny.

6. BackgroundColor=“LightGray”

Ustawia kolor tła pola tekstowego. W przykładzie jest to jasnoszary, co pomaga wyróżnić pole na tle interfejsu.

7. Margin=“10”

Dodaje odstęp wokół pola tekstowego, co poprawia czytelność interfejsu poprzez dodanie przestrzeni między kontrolkami.

8. HorizontalOptions=“FillAndExpand”

Określa, że pole tekstowe powinno rozciągać się na całą dostępną szerokość w poziomie. Dzięki temu pole automatycznie dopasowuje się do rozmiaru rodzica.

9. VerticalOptions=“Center”

Ustawia pionowe rozmieszczenie pola tekstowego w centrum kontenera.

10. Keyboard=“Default”

Ustawia typ klawiatury wyświetlanej przy wprowadzaniu danych. Możesz zmienić tę właściwość, np. na "Numeric", jeśli pole ma przyjmować tylko liczby.

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

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

             x:Class="MauiApp1.MainPage"

             Title="Przykład linku">

  <StackLayout Padding="20" Spacing="20">

    <!-- Label działające jak link -->

    <Label>

      <Label.FormattedText>

        <FormattedString>

          <Span Text="Kliknij tutaj, aby odwiedzić stronę"

                TextColor="Blue"

                FontAttributes="Underline">

            <Span.GestureRecognizers>

              <!-- Obsługa zdarzenia Tapped -->

              <TapGestureRecognizer Tapped="OnLinkTapped"/>

            </Span.GestureRecognizers>

          </Span>

        </FormattedString>

      </Label.FormattedText>

      <!-- Definicja stanów wizualnych -->

      <VisualStateManager.VisualStateGroups>

        <VisualStateGroup x:Name="CommonStates">

          <VisualState x:Name="Normal">

            <VisualState.Setters>

              <Setter Property="TextColor" Value="Blue"/>

            </VisualState.Setters>

          </VisualState>

          <VisualState x:Name="PointerOver">

            <VisualState.Setters>

              <Setter Property="TextColor" Value="DarkBlue"/>

            </VisualState.Setters>

          </VisualState>

          <VisualState x:Name="Pressed">

            <VisualState.Setters>

              <Setter Property="TextColor" Value="Red"/>

            </VisualState.Setters>

          </VisualState>

        </VisualStateGroup>

      </VisualStateManager.VisualStateGroups>

    </Label>

  </StackLayout>

</ContentPage>

#####

WYJAŚNIENIE

1. Label z FormattedText i Span:

• Kontrolka Label zawiera element FormattedString, w którym definiujemy jeden Span.

• Span ustawia tekst, kolor (TextColor) i atrybuty czcionki (FontAttributes) – tutaj tekst jest podkreślony, co imituje wygląd linku.

• TapGestureRecognizer przypisany do Span umożliwia obsługę zdarzenia kliknięcia. W metodzie w kodzie-behind (C#) należy zaimplementować obsługę zdarzenia OnLinkTapped.

2. VisualStateManager:

• VisualStateGroup “CommonStates” definiuje różne stany wizualne kontrolki.

• Stan Normal ustawia domyślny kolor tekstu (Blue).

• Stan PointerOver – gdy użytkownik najedzie kursorem myszy – zmienia kolor tekstu na DarkBlue.

• Stan Pressed – gdy użytkownik naciśnie kontrolkę – zmienia kolor na Red.

• Dzięki temu uzyskujemy efekt interakcji podobny do linków na stronach internetowych.

3. Obsługa zdarzenia OnLinkTapped:

• W pliku kodu-behind (MainPage.xaml.cs) należy zaimplementować metodę:

private async void OnLinkTapped(object sender, EventArgs e)

{

    // Przykład: otwarcie strony w przeglądarce

    await Launcher.OpenAsync("https://www.przykladowastrona.pl");

}

• Metoda ta zostanie wywołana, gdy użytkownik kliknie na tekst.