Kontrolki w .NET MAUI

Kontrolki to podstawowe elementy interfejsu użytkownika – przyciski, pola tekstowe, listy czy suwaki. W .NET MAUI umieszczamy je w layoutach (np. StackLayout, Grid). Każda kontrolka ma swoje właściwości i wydarzenia (events), które pozwalają reagować na akcje użytkownika.

1) Label (etykieta)

Do wyświetlania statycznego tekstu: tytuły, opisy, komunikaty.

<Label Text="Witaj w MAUI!"
       FontSize="24"
       TextColor="DarkBlue"
       LineBreakMode="WordWrap"
       HorizontalOptions="Center"/>

Właściwości (z opisem):

Text – treść etykiety; tu ustawiasz, co ma być wyświetlane.
FontSize – rozmiar czcionki; szybka kontrola hierarchii nagłówków.
TextColor – kolor tekstu; kontrast i dostępność.
LineBreakMode – sposób łamania (np. WordWrap); zapobiega „wychodzeniu” tekstu poza ekran.
MaxLines – maksymalna liczba wierszy; przycina długie opisy.
HorizontalOptions / VerticalOptions – wyrównanie w layoucie; porządkuje układ bez dodatkowych kontenerów.

2) Entry (pole tekstowe — jednowierszowe)

Do krótkich danych: login, e-mail, hasło, liczby.

<Entry Placeholder="Wpisz e-mail"
       Keyboard="Email"
       ClearButtonVisibility="WhileEditing"/>
``]
**Właściwości:**  
- **Placeholder** – szary tekst-podpowiedź, gdy pole jest puste; prowadzi użytkownika.  
- **Text** – aktualna zawartość; tu później odczytujesz wpisane dane.  
- **IsPassword** – ukrywa znaki; użyj w polach z hasłem.  
- **Keyboard** – dobiera klawiaturę (np. *Email*, *Numeric*); przyspiesza wpisywanie i zmniejsza błędy.  
- **MaxLength** – ogranicza długość; zapobiega „romansom” z walidacją.  
- **ClearButtonVisibility** – pokazuje X do czyszczenia; lepsza ergonomia na mobile.  
- **IsReadOnly** – blokuje edycję przy zachowaniu wyglądu; przydaje się w podglądzie danych.

---

## 3) Editor (pole tekstowe — wielowierszowe)
Dłuższe treści: komentarze, opisy, notatki.
```xml
<Editor Placeholder="Wpisz komentarz..."
        AutoSize="TextChanges"
        HeightRequest="120"/>

Właściwości:

Text – wpisany tekst; do odczytu/zapisu treści.
Placeholder – podpowiedź; zwiększa zrozumiałość.
AutoSize – TextChanges automatycznie dopasowuje wysokość; brak ręcznego liczenia linii.
HeightRequest – minimalna wysokość startowa; czytelność zanim AutoSize „zaskoczy”.
IsReadOnly – blokuje edycję; np. w trybie przeglądania.
Keyboard – np. Chat, Text; dobiera układ klawiatury do treści.
TextColor – kolor wpisu; dostępność i spójność ze stylem.

4) Button (przycisk)

Wyzwala akcję: zapisz, zaloguj, wyślij.

<Button Text="Zaloguj"
        BackgroundColor="RoyalBlue"
        TextColor="White"
        CornerRadius="12"
        ImageSource="login.png"
        ContentLayout="Left,8"/>

Właściwości:

Text – podpis na przycisku; komunikat akcji.
BackgroundColor / TextColor – kolory; kontrast i branding.
FontSize – czytelność i hierarchia.
ImageSource – ikona w przycisku; szybsza percepcja akcji.
ContentLayout – pozycja ikony względem tekstu; estetyka i ergonomia.
CornerRadius – zaokrąglenia; nowoczesny wygląd, zgodny z mobile.

5) Image (obrazek)

Wyświetla grafikę: logo, zdjęcie, baner.

<Image Source="logo.png"
       Aspect="AspectFit"
       WidthRequest="120"
       HeightRequest="120"
       Opacity="0.95"/>

Właściwości:

Source – plik lokalny/URL/zasób; podstawowe źródło obrazu.
Aspect – Fit/Fill/AspectFill; kontrola przycięcia vs. proporcji.
WidthRequest / HeightRequest – sugerowane wymiary; stabilny layout.
Opacity – przezroczystość; np. pod napisy na banerze.
Margin – odstępy; ułatwia skład kompozycji.
BackgroundColor – kolor tła; przy PNG bez tła lub placeholderach.

6) CheckBox (pole wyboru)

Tak/nie, np. „Akceptuję regulamin”.

<CheckBox IsChecked="False" Color="SeaGreen" />

Właściwości:

IsChecked – stan zaznaczenia; logika formularza.
Color – kolor znacznika; akcent wizualny.
IsEnabled – włącza/wyłącza interakcję; np. dopiero po wypełnieniu pól.
Margin – odstęp od etykiety; czytelność formularza.
HorizontalOptions – wyrównanie w wierszu; spójny układ.

7) RadioButton (przycisk opcji)

Wybór jednej z wielu opcji w grupie.

<VerticalStackLayout>
  <RadioButton Content="Light"  GroupName="Theme"/>
  <RadioButton Content="Dark"   GroupName="Theme"/>
</VerticalStackLayout>

Właściwości:

GroupName – łączy przyciski w jedną grupę; tylko jedna opcja może być aktywna.
Content – tekst/element wizualny obok „kropki”; opis opcji.
IsChecked – stan zaznaczenia; do odczytu wyboru.
IsEnabled – blokada wyboru; logika kroków w formularzu.
Margin – odstępy; porządek w liście opcji.
TextColor – kolor opisu; kontrast z tłem.

8) Switch (przełącznik ON/OFF)

Mobilny przełącznik: np. „Powiadomienia”.

<Switch IsToggled="True" ThumbColor="White" OnColor="MediumSeaGreen"/>

Właściwości:

IsToggled – stan włącz/wyłącz; wiąże się z ustawieniem.
OnColor – kolor tła w stanie ON; sygnał „aktywne”.
ThumbColor – kolor „gałki”; lepsza widoczność.
IsEnabled – blokada w określonych warunkach; kontrola przepływu.
HorizontalOptions – wyrównanie; dopieszcza UI.
Margin – odstępy w formularzu.

9) Slider (suwak)

Wartość liczbową wybierasz przesuwając: głośność, jasność.

<Slider Minimum="0" Maximum="100" Value="50"/>

Właściwości:

Minimum / Maximum – zakres; narzuca dopuszczalne wartości.
Value – bieżąca wartość; wiążesz z modelem danych.
ThumbColor – kolor „gałki”; czytelność, brand.
MinimumTrackColor / MaximumTrackColor – kolory toru; jasne wskazanie postępu.
Margin – odstępy; wygodny chwyt na dotyk.

10) Stepper (przycisk + / –)

Zwiększa/zmniejsza wartość skokowo: sztuki, poziomy.

<Stepper Minimum="0" Maximum="10" Increment="1" Value="5"/>

Właściwości:

Minimum / Maximum – dolna/górna granica; brak wartości „poza skalą”.
Increment – krok; decyduje o precyzji zmiany.
Value – aktualna wartość; wiązanie z modelem.
IsEnabled – blokada; np. brak produktu → brak możliwości zmiany.
HorizontalOptions – układ w wierszu z etykietą.

11) DatePicker (wybór daty)

Kalendarz do wyboru daty: urodziny, rezerwacja.

<DatePicker Format="dd.MM.yyyy"
            MinimumDate="2000-01-01"
            MaximumDate="2035-12-31"/>

Właściwości:

Date – wybrana data; wiążesz z modelem.
Format – sposób prezentacji (np. dd.MM.yyyy); zgodność z lokalnymi zwyczajami.
MinimumDate / MaximumDate – ograniczenia; zapobiega błędom (np. data z przyszłości).
TextColor – kolor wyświetlanej daty; kontrast.
HorizontalOptions – wyrównanie w formularzu.

12) TimePicker (wybór godziny)

Godzina spotkania, alarm, przypomnienie.

<TimePicker Time="12:30:00" Format="HH:mm"/>

Właściwości:

Time – aktualnie wybrana godzina; wiążesz z modelem.
Format – 24h/12h; spójność z kontekstem.
TextColor – kolor wyświetlanego czasu; dostępność.
IsEnabled – blokada; np. zależna od innego pola.
HorizontalOptions – układ w wierszu.

13) Picker (lista rozwijana)

Wybór jednej opcji z listy: kraj, kategoria, metoda płatności.

<Picker Title="Wybierz kategorię">
  <Picker.Items>
    <x:String>Elektronika</x:String>
    <x:String>AGD</x:String>
    <x:String>Książki</x:String>
  </Picker.Items>
</Picker>

Właściwości:

Title – tekst podpowiedzi; zachęca do wyboru.
Items – statyczna lista; szybkie, proste opcje.
SelectedIndex – indeks wybranej pozycji; łatwe mapowanie.
SelectedItem – wybrany obiekt; wygodne w MVVM.
ItemDisplayBinding – która właściwość obiektu jest wyświetlana; np. Nazwa.
TextColor – kolor wybranej opcji; spójność wizualna.

W wersji „produkcyjnej” częściej użyjesz ItemsSource (bindowane do kolekcji) + ItemDisplayBinding.

14) SearchBar (pole wyszukiwania)

Wpisywanie frazy do filtrowania danych (np. listy).

<SearchBar Placeholder="Szukaj produktu..." />

Właściwości:

Placeholder – podpowiedź; wyjaśnia, co można wyszukać.
Text – aktualnie wpisana fraza; wiążesz z filtrem.
TextColor – kolor wpisu; dostępność.
BackgroundColor – tło; odcięcie od reszty UI.
CancelButtonColor – kolor przycisku „Anuluj” (iOS); spójność stylistyczna.

15) ProgressBar (pasek postępu)

Pokazuje progres zadania: ładowanie, zapis.

<ProgressBar Progress="0.35" ProgressColor="MediumPurple"/>

Właściwości:

Progress – 0.0–1.0; aktualny stan.
ProgressColor – kolor paska; semantyka (zielony – OK).
BackgroundColor – tło; widoczność na jasnych/ciemnych motywach.
Opacity – przeźroczystość; subtelny wygląd.
Margin – odstęp od innych elementów.

Metoda ProgressTo() (w kodzie C#) animuje zmianę – ładniejszy UX.

16) ActivityIndicator (spinner)

Animowane „kółko” w trakcie pracy w tle.

<ActivityIndicator IsRunning="True"
                   IsVisible="True"
                   Color="Tomato"/>

Właściwości:

IsRunning – włącza animację; informacja „coś się dzieje”.
IsVisible – pokazuje/ukrywa; łącz często z IsRunning.
Color – kolor spinnera; spójność z akcentem.
Opacity – delikatniejsze, mniej agresywne wrażenie.
HorizontalOptions – pozycjonowanie (np. Center).

17) CollectionView (nowoczesna lista)

Lista/siatka elementów: produkty, osoby, wiadomości.

<CollectionView ItemsLayout="VerticalList">
  <CollectionView.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Jan</x:String>
      <x:String>Agnieszka</x:String>
    </x:Array>
  </CollectionView.ItemsSource>
  <CollectionView.EmptyView>
    <Label Text="Brak danych" HorizontalOptions="Center" />
  </CollectionView.EmptyView>
</CollectionView>

Właściwości:

ItemsSource – źródło danych; najczęściej kolekcja bindowana.
ItemTemplate – wygląd pojedynczego elementu; pełna kontrola UI kart.
ItemsLayout – VerticalList, HorizontalList lub siatka (GridItemsLayout); dostosowanie układu.
SelectionMode – None/Single/Multiple; dopasowanie interakcji.
EmptyView – co pokazać, gdy lista pusta; ważne dla UX.
Header / Footer – nagłówek/stopka listy; filtry, licznik, bannery.

18) ListView (starsza lista)

Starsza kontrolka listy; w nowych projektach zastępuj ją CollectionView, ale możesz spotkać w starszych zadaniach.

<ListView>
  <ListView.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Element 1</x:String>
      <x:String>Element 2</x:String>
    </x:Array>
  </ListView.ItemsSource>
</ListView>

Właściwości:

ItemsSource – źródło danych; jak wyżej.
ItemTemplate – definicja wyglądu wiersza.
SelectedItem – aktualnie zaznaczony element; starsza ścieżka interakcji.
SeparatorVisibility / SeparatorColor – linie między wierszami; czytelność.
HasUnevenRows – pozwala na różną wysokość wierszy; elastyczne layouty.
Header / Footer – stałe sekcje; dodatkowe opisy.

Podsumowanie praktyczne

Na INF.04 liczy się: czytelny layout, sensowny dobór właściwości, dostępność (kontrast, rozmiary), poprawne bindowanie oraz zachowanie na różnych rozdzielczościach.
W listach preferuj CollectionView z EmptyView i dopracowanym ItemTemplate.
W formularzach pamiętaj o Placeholder, Keyboard, MaxLength, IsPassword, a w datach/godzinach o Format i zakresach.