Skip to content
App.xaml - definiuje zasoby aplikacji używane przez aplikację w układzie XAML . Domyślne zasoby znajdują się w folderze Resources i definiują kolory dla całej aplikacji i domyślne style dla każdej wbudowanej kontrolki App.xaml.cs - jest kodem w pliku App.xaml. Definiuje klasę App. Klasa tworzy początkowe okno i przypisuje je do MainPage właściwości. Ta właściwość określa, która strona jest wyświetlana po uruchomieniu aplikacji. Ponadto ta klasa umożliwia zastąpienie typowych programów obsługi zdarzeń cyklu życia aplikacji neutralnych dla platformy. Zdarzenia obejmują OnStart, OnResumei OnSleep.MainPage.xaml - zawiera definicję interfejsu użytkownika. MainPage.xaml.cs - zawiera kod strony. W tym pliku zdefiniujesz logikę dla różnych programów obsługi zdarzeń i innych akcji wyzwalanych przez kontrolki na stronie. Przykładowy kod implementuje program obsługi zdarzenia Clicked dla przycisku na stronie.
ContentPage – najczęściej używana stronaNavigationPage – obsługa nawigacjiTabbedPage – zakładkiFlyoutPage – menu boczne
VerticalStackLayoutHorizontalStackLayoutSpacing Padding HorizontalOptionsVerticalOptionsGrid AbsoluteLayoutumożliwia ustawianie dokładnych współrzędnych dla kontrolek.FlexLayoutjest podobny do StackLayout tego, że umożliwia zawijanie kontrolek podrzędnych, które zawiera, jeśli nie mieszczą się w jednym wierszu lub kolumnie.
Label - wyświetla tekstTextFontSizeFontAttributes (Bold, Italic)TextColorHorizontalTextAlignmentButton- przycisk TextClicked (obsługa zdarzenia)BackgroundColorTextColorCornerRadiusEntry- pole tekstowe → (w wpf TextBox)TextPlaceholderIsPasswordKeyboardEditor- wieloliniowy tekstImage - zdjęcie SourceAspectOpacitySwitch- przełącznikCheckBox Picker- lista rozwijana Line - tworzenie linii w wyglądzie aplikacji
Tytuł okna Zawartość okna Zawartość przycisku akceptacji/zamknięcia okna
Aplikacje Mobilne - MAUI
Interfejs użytkownika .NET Multi-platform App UI (.NET MAUI) to wieloplatformowa struktura do tworzenia natywnych aplikacji mobilnych i komputerowych z użyciem języków C# i XAML.
PODSTAWY TWORZENIA APLKACJI
Tworzenie projektu aplikacji NET. MAUI
Aby stworzyć apliację multi-platform potrzebujemy konkretnego rozszerzenia zainstalowanego w Visual Studio Community:
Jeśli na danym komputerze nie był wcześniej tworzony projekt pod aplikacje mobilne, należy przygotować emulator systemu android, w tym celu z listy programów uruchomieniowych wybieramy ‘Emulatory systemu Android’, i tworzymy nowy emulator.
Struktura projektu
❗Podstawowo, zawsze będziemy modyfikować kod w MainPage.xaml oraz MainPage.xaml.cs
PODSTAWOWE ZNACZNIKI XAML W NET.MAUI
Strony
To główne kontenery ekranu aplikacji:
Kontenery - grupowanie elementów
Layouts Służą do rozmieszczania elementów na ekranie.
Kontenery Vertical i Horizontal służą do grupowania elementów w rzędzie/kolumnie. Są tym samym co StackPanel w WPF. Ich podstawowe właściwości do ustawiania to:
Grid możemy dzielić na kolumny i rzędy, podobnie jak przy aplikacjach WPF:
<Grid RowDefinitions="Auto, *"
ColumnDefinitions="*, 2*">
<Label Grid.Row="0" Grid.ColumnSpan="2"/>
<Button Grid.Row="1" Grid.Column="0"/>
<Button Grid.Row="1" Grid.Column="1"/>
</Grid>
ĆWICZENIE - realizacja przykładowego układu kontrolek łącząca Grid i Layout
<ScrollView>
<Grid Padding="20,10"
RowDefinitions="*,3*,*"
ColumnDefinitions="*,*">
<Button MaximumHeightRequest="40" Grid.ColumnSpan="2" Text="BTN3"></Button>
<VerticalStackLayout Grid.Row="1" Spacing="80">
<HorizontalStackLayout HorizontalOptions="Center">
<Button Margin="5" Padding="20,0" Text="BTN6"></Button>
<Button Margin="5" Padding="20,0" Text="BTN7"></Button>
</HorizontalStackLayout>
<Image
Source="dotnet_bot.png"
HeightRequest="185"
Aspect="AspectFit" />
</VerticalStackLayout>
<VerticalStackLayout Grid.Column="1" Grid.Row="1"
Spacing="150">
<Button Grid.Row="1" Margin="5" Padding="20,0" Text="BTN4"></Button>
<Button Grid.Row="2" Margin="5" Padding="20,0" Text="BTN5"></Button>
</VerticalStackLayout>
<HorizontalStackLayout Grid.Row="2" Grid.ColumnSpan="2" HorizontalOptions="Center"
Spacing="50">
<Button Margin="5" Padding="40,0" Text="BTN2" MaximumHeightRequest="50"></Button>
<Button Margin="5" Padding="40,0" Text="BTN1" MaximumHeightRequest="50"></Button>
</HorizontalStackLayout>
</Grid>
</ScrollView>
Podstawowe kontrolki - elementy aplikacji
<Switch IsToggled="True"/>
<CheckBox IsChecked="True"/>
<Picker Title="Wybierz opcję">
<Picker.Items>
<x:String>Opcja 1</x:String>
<x:String>Opcja 2</x:String>
</Picker.Items>
</Picker>
Poza podanymi wyżej, najczęściej wykorzystywane podstawowe właściwości to:
There are no rows in this table
<Line Grid.Column="1"
X1="0" Y1="0"
X2="0" Y2="300"
Stroke="Gray"
StrokeThickness="2" />
<Line Grid.Column="1"
X1="0" Y1="0"
X2="300" Y2="0"
Stroke="Gray"
StrokeThickness="2" />
ĆWICZENIE - wykorzystywanie podstawowych elementów aplikacji. Podstawowe programowanie aplikacji
FORMULARZE I ICH WALIDACJE
Walidacje danych w polach tekstowych:
private void email_Unfocused(object sender, FocusEventArgs e)
{
if(email.Text != null)
{
if (email.Text.Contains('@'))
{
blad_email.IsVisible = false;
}
else
{
blad_email.IsVisible = true;
}
}
}
private void tel_Unfocused(object sender, FocusEventArgs e)
{
if(tel.Text != null)
{
bool czyPoprawny = long.TryParse(tel.Text, out long telefon_long);
if (tel.Text.Length == 9 && czyPoprawny)
{
blad_tel.IsVisible = false;
}
else
{
blad_tel.IsVisible = true;
}
}
}
Czyszczenie formularza:
private void Button_Clicked(object sender, EventArgs e)
{
name.Text = string.Empty; //to są Entry z jakąś zawartością
tel.Text = string.Empty;
blad_tel.IsVisible = false; //to są Label'e z komunikatami o błędzie
email.Text = string.Empty;
blad_email.IsVisible = false;
mess.Text = string.Empty;
blad_mess.IsVisible = false;
}
Wyświetlanie okien z komunikatem
private void Button_Clicked_1(object sender, EventArgs e)
{
DisplayAlertAsync("Potwierdzenie", "Dziękujemy za wysłanie wiadomości", "Wyjdź");
}
W Alertcie zawsze podajemy 3 napisy:
ZNACZNIKI PROGRESU
Slider
<Slider Maximum="360"
Minimum="0"
Value="5"
ValueChanged="OnSliderValueChanged" />
Wiązanie danych
<StackLayout>
<Label Text="ROTATING TEXT"
Rotation="{Binding x:DataType='Slider',
Source={x:Reference slider},
Path=Value}"
FontSize="18"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Slider x:Name="slider"
Maximum="360" />
<Label x:Name="displayLabel"
Text="{Binding x:DataType='Slider',
Source={x:Reference slider},
Path=Value,
StringFormat='The Slider value is {0:F0}'}"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
ProgressBar
<ProgressBar Progress="0.5"
ProgressColor="Red" />
Animowanie ProgressBaru
await progressBar.ProgressTo(0.75, 500, Easing.Linear);
Stepper - przyciski do manipulowania wielkości liczbowej
<Stepper Maximum="360"
Increment="30"
ValueChanged="OnStepperValueChanged" />
DatePicker i TimePicker
<TimePicker Time="4:15:26" />
<DatePicker MinimumDate="01/01/2022"
MaximumDate="12/31/2022"
Date="06/21/2022" />
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.