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
EmptyViewi dopracowanymItemTemplate. - W formularzach pamiętaj o
Placeholder,Keyboard,MaxLength,IsPassword, a w datach/godzinach oFormati zakresach.