XAML, Steuerelemente und Layouts

In W2.1.1 haben Sie Kladde.App angelegt. Die App zeigt noch die Seite der Vorlage. Diese Lektion ersetzt sie durch die ersten eigenen Seiten: eine Kontaktliste mit einer Detailseite und die Termine des Tages, verbunden durch eine Shell mit zwei Tabs. Die Daten stehen fest im Code; die Web-API kommt in W2.2.2 dazu. Auch der Code ist noch einfach gehalten, mit Code-Behind. Das ist Absicht: In W2.2.1 bauen Sie genau diese Seiten auf MVVM um, und dafür brauchen Sie sie zuerst in dieser einfachen Form.

Sie lernen dafür sieben Dinge, die jede MAUI-App braucht:

XAML lesen

XAML ist eine Beschreibung von Objekten in XML. Ein Element ist eine Klasse, ein Attribut ist eine Eigenschaft. Jede Seite besteht aus zwei Dateien, die zusammen eine einzige Klasse ergeben: der .xaml-Datei mit der Oberfläche und der .xaml.cs-Datei, dem Code-Behind. So sieht der Kopf einer Seite aus:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Kladde.App.Pages.ContactsPage">
    ...
</ContentPage>

namespace Kladde.App.Pages;

public partial class ContactsPage : ContentPage
{
    public ContactsPage()
    {
        InitializeComponent();
    }
}

Was hier steht, ist in wenigen Punkten erklärt:

• x:Class nennt den vollständigen Namen einer .NET-Klasse. Die XAML-Datei definiert damit die Klasse ContactsPage, die von ContentPage ableitet; deshalb ist die C#-Klasse partial. Alles andere in der Datei sind Objekte bestehender Klassen, die erzeugt und eingestellt werden. x:Class darf nur am Wurzelelement stehen.
• Die zwei Namensräume. Der erste, ohne Präfix, bedeutet: Elemente ohne Präfix sind Klassen von .NET MAUI, also ContentPage oder Label. Der zweite hat das Präfix x und gilt für Dinge, die zu XAML selbst gehören, etwa x:Class, x:Name und x:DataType. Die Adressen sind keine Webseiten; unter ihnen steht nichts. Sie dienen als Versionskennung.
• InitializeComponent erzeugt zur Laufzeit alle Objekte der XAML-Datei, verbindet sie zu einem Baum, hängt Ereignis-Handler aus dem Code an die Ereignisse und setzt den Baum als Inhalt der Seite. Ohne den Aufruf bleibt die Seite leer.
• Eigene Klassen aus Ihrem Projekt binden Sie mit einem weiteren Namensraum ein, zum Beispiel xmlns:models="clr-namespace:Kladde.App.Models". Danach schreiben Sie models:ContactResponse.

Eigenschaften, Konverter, Markup-Erweiterungen

Einfache Werte schreiben Sie als Attribut: <Label Text="Kontakte" FontSize="24" />. Für Aufzählungen genügt der Name des Mitglieds, für Farben der Name aus Colors oder ein hexadezimaler RGB-Wert; dafür sorgen Typkonverter, die MAUI mitbringt. Ist der Wert zu verwickelt für ein Attribut, schreiben Sie die Eigenschaft als eigenes Element (Eigenschaftselement-Syntax):

<Label>
    <Label.FontSize>
        22
    </Label.FontSize>
</Label>

In geschweiften Klammern stehen Markup-Erweiterungen. Sie werden zur Laufzeit ausgewertet. Diese brauchen Sie in dieser Lektion:

Ereignisse hängen Sie mit dem Namen einer Methode im Code-Behind an: <Button Clicked="OnBackClicked" />. Ein Element, auf das Ihr Code zugreifen muss, bekommt x:Name="ContactList"; danach gibt es im Code-Behind ein Feld gleichen Namens.

Ein Quellgenerator für XAML

MAUI übersetzt XAML beim Bauen (XAML-Kompilierung, standardmäßig an). In .NET 10 gibt es zusätzlich einen Quellgenerator für XAML. Er erzeugt zur Übersetzungszeit stark typisierten Code für Ihre XAML-Dateien, was nach Learn die Bauzeit verbessert und die Werkzeuge unterstützt. Sie schalten ihn in der Projektdatei ein, in einer PropertyGroup:

<PropertyGroup>
  <MauiXamlInflator>SourceGen</MauiXamlInflator>
</PropertyGroup>

In diesem Kurs schalten Sie ihn in Übung 1 ein und lassen ihn danach an. Learn beschreibt außerdem globale und implizite Namensräume, die das Wiederholen von xmlns:-Zeilen ersparen; sie sind als Vorschau-Merkmal gekennzeichnet und brauchen eine Datei GlobalXmlns.cs und einen Schalter für Vorschaufunktionen. Der Kurs verwendet sie nicht.

Layouts

Eine Seite hat ein Kind, meist ein Layout. Ein Layout ordnet seine Kinder an. Drei brauchen Sie ständig:

Es gibt auch StackLayout mit einer Eigenschaft Orientation. Die beiden Stapel-Layouts mit festem Richtungsnamen sind nach Learn die leistungsfähigere Wahl. Alle drei haben die Eigenschaft Spacing (Standard 0), den Abstand zwischen den Kindern.

Grid

Ein Grid hat standardmäßig eine Zeile und eine Spalte. Zeilen und Spalten legen Sie mit RowDefinitions und ColumnDefinitions fest. Jede Größe hat eine von drei Arten:

Der Standard einer Zeile oder Spalte ist *. Kurz schreiben Sie die Definitionen als kommagetrennte Zeichenkette, zum Beispiel RowDefinitions="Auto, *" und ColumnDefinitions="Auto, *". Die Zelle eines Kindes bestimmen die angehängten Eigenschaften Grid.Row und Grid.Column, gezählt ab 0 (beide haben den Standard 0). Mit Grid.RowSpan und Grid.ColumnSpan erstreckt sich ein Kind über mehrere Zellen.

<Grid RowDefinitions="Auto, Auto" ColumnDefinitions="Auto, *" ColumnSpacing="12">
    <Label Text="09:00" />
    <Label Grid.Row="1" Text="bis 10:00" />
    <Label Grid.Column="1" Grid.RowSpan="2" Text="Beratung" />
</Grid>

Learn gibt zwei Warnungen mit. Erstens: Möglichst wenige Zeilen und Spalten auf Auto stellen, denn jede erzwingt zusätzliche Berechnungen; fest oder * ist günstiger. Zweitens: Ein Grid ist kein Tabellenlayout für tabellarische Daten. Bilden Sie auch kein Grid mit verschachtelten Stapeln nach: Das ist verschwenderisch, nehmen Sie ein Grid.

Stapel und Abstände

Die MAUI-Stapel „teilen“ den Platz nicht auf: Sie stapeln ihre Kinder in einer Richtung, bis alle gestapelt sind, auch über den verfügbaren Platz hinaus. Optionen wie FillAndExpand kennen VerticalStackLayout und HorizontalStackLayout nicht; sie behandeln sie als Fill. Das ist der Unterschied zu Xamarin.Forms, den Sie in alten Beispielen finden.

Für Abstände gibt es drei Eigenschaften mit klar getrennter Bedeutung:

Die Ausrichtung eines Kindes steuern HorizontalOptions und VerticalOptions mit den Werten Start, Center, End und Fill. Ein Stapel beachtet sie nur quer zur Stapelrichtung: In einem senkrechten Stapel wirkt HorizontalOptions, aber nicht VerticalOptions.

Steuerelemente

Diese Lektion braucht wenige Steuerelemente. Sie sind hier nach dem eingeordnet, was sie können:

Alle Steuerelemente mit Text haben dieselben vier Eigenschaften für die Schrift: FontFamily, FontAttributes, FontSize und FontAutoScalingEnabled. Die Schriftgröße steht in geräteunabhängigen Einheiten. Die Vorgabe von MAUI-Apps ist die Schriftart Open Sans auf jeder Plattform; sie lässt sich ändern.

CollectionView statt ListView

Mit .NET 10 sind ListView und seine Zellen (TextCell, ImageCell, EntryCell, SwitchCell, ViewCell) abgekündigt, ebenso TableView. Learn nennt für alles CollectionView. Damit sind alte Anleitungen, die ListView mit TextCell benutzen, für diesen Kurs falsch. Die CollectionView unterscheidet sich in einigem von der ListView:

Daten und Vorlage

Die Sammlung setzen Sie mit ItemsSource, und wie ein Eintrag aussieht, bestimmt ItemTemplate, eine DataTemplate. Das Wurzelelement der Vorlage ist hier ein Grid; der Wurzelknoten darf nie ein ViewCell sein, denn die CollectionView kennt keine Zellen. Das Beispiel zeigt das Muster:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:Monkey">
            <Grid Padding="10">
                <Label Text="{Binding Name}" FontAttributes="Bold" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Das ist die Form aus Learn, gekürzt. Ihre eigene Liste folgt in der Übung. Zwei Hinweise zur Sammlung:

• Soll sich die Liste ändern, wenn Elemente hinzukommen, wegfallen oder sich ändern, braucht sie eine Sammlung, die Änderungen meldet, wie ObservableCollection<T>. Für die festen Daten dieser Lektion genügt eine gewöhnliche Liste. In W2.2.1 tauschen Sie sie aus.
• Eine CollectionView löst eine Ausnahme aus, wenn ihre ItemsSource von einem anderen Thread als dem Oberflächenthread geändert wird. Merken Sie sich das für W2.2.2, wenn Daten aus dem Netz kommen.

Zwei Fallen betreffen das Layout um die Liste: Eine CollectionView in einem VerticalStackLayout oder StackLayout kann das Scrollen verhindern und die Zahl der angezeigten Einträge begrenzen. Stecken Sie sie in ein Grid. Und mit Stapel-Layouts als Anordnung der Einträge (ItemsLayout) schalten Sie die Virtualisierung ab; die Standardanordnung ist senkrecht und passt.

Leer und Auswahl

Ist ItemsSource null oder leer, zeigt die Liste ihre Leeransicht: der Text in EmptyView, oder eine ganze Ansicht mit mehreren Elementen. Das ist der Ort für „Keine Kontakte vorhanden.“:

<CollectionView ItemsSource="{Binding Contacts}" EmptyView="Keine Kontakte vorhanden." />

Mit SelectionMode="Single" wird ein Eintrag ausgewählt und hervorgehoben; SelectedItem ist dann der Eintrag und das Ereignis SelectionChanged wird ausgelöst. Seine Argumente haben PreviousSelection und CurrentSelection als schreibgeschützte Listen. Kehrt ein Benutzer von einer Detailseite zurück, ist der Eintrag noch ausgewählt und lässt sich nicht erneut antippen. Learn empfiehlt dagegen, die Auswahl nach dem Auslösen zu löschen:

void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var cv = (CollectionView)sender;
    if (cv.SelectedItem == null)
        return;

    cv.SelectedItem = null;
}

Das Löschen löst SelectionChanged noch einmal aus, mit leerer CurrentSelection; Ihr Handler muss diesen zweiten Aufruf erkennen und überspringen. Die Übung baut das ein.

Gebundene Typen und Warnungen

Die Bindungen {Binding Name} lösen zur Laufzeit einen Eigenschaftspfad per Reflexion auf, es sei denn, XAML kennt den Typ. Setzen Sie x:DataType auf den Typ, an den das Element und seine Kinder binden, dann werden die Bindungen schon beim Bauen übersetzt: falsche Namen sind Baufehler, und die Laufzeit ist schneller. Wer x:DataType weglässt, bekommt die Warnung XC0022; innerhalb einer DataTemplate brauchen Sie es an der Vorlage selbst, sonst meldet der Build XC0024. Setzen Sie es überall, wo sich der Typ des BindingContext ändert. Sie können beide Warnungen zu Fehlern machen:

<WarningsAsErrors>$(WarningsAsErrors);XC0022;XC0023</WarningsAsErrors>

Shell: Tabs, Routen, Daten

Die Shell ist die Gliederung der App. Die Vorlage legt sie als AppShell an. Ihre Hauptbausteine:

Die Seiten entstehen bei Bedarf, wenn jemand dorthin navigiert. Dafür setzen Sie die ContentTemplate jedes ShellContent mit der Markup-Erweiterung DataTemplate auf die Seitenklasse. Mehrere ShellContent-Elemente in einer TabBar werden zu unteren Tabs; mehr als fünf Tabs ergeben einen Tab „More“. ShellContent braucht nicht in einem Tab zu stehen: MAUI packt es selbst ein.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:pages="clr-namespace:Kladde.App.Pages"
       x:Class="Kladde.App.AppShell">
    <TabBar>
        <ShellContent Title="Kontakte" Route="contacts" ContentTemplate="{DataTemplate pages:ContactsPage}" />
        <ShellContent Title="Heute" Route="today" ContentTemplate="{DataTemplate pages:AppointmentsPage}" />
    </TabBar>
</Shell>

Routen

Navigiert wird mit URIs aus Routen. Jedes Element der Shell-Hierarchie hat eine; fehlt eine, erzeugt MAUI sie zur Laufzeit, aber nicht beständig von Sitzung zu Sitzung. Zwei gleiche Routen auf derselben Ebene lösen beim Start eine ArgumentException aus. Seiten, die nicht in der Hierarchie stehen, etwa Detailseiten, melden Sie mit Routing.RegisterRoute an, vor dem ersten Gebrauch. Ihre Route heißt globale Route:

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("contactdetails", typeof(ContactDetailPage));
    }
}

Navigiert wird mit Shell.Current.GoToAsync. Die Methode gibt eine Task zurück, die endet, wenn die Animation fertig ist, und ist immer mit await aufzurufen: Ein vergessenes await führt zu Wettläufen, fehlenden Parametern und stillen Fehlern.

Zwei Grenzen aus Learn: Absolute Routen funktionieren nicht mit Seiten, die mit RegisterRoute angemeldet sind; und relative Routen funktionieren nicht für Seiten, die in der Shell-Klasse selbst stehen. Wer zu einer Route navigiert, die es nicht gibt, bekommt eine ArgumentException. Wenn eine Seite aus der Hierarchie angesteuert wird, entsteht kein Navigationsstapel; wird eine Seite angesteuert, die nicht in der Hierarchie steht, entsteht einer, und man kann zurückgehen.

Daten an die Zielseite

Einfache Werte gehen als Zeichenfolge an die URI: await Shell.Current.GoToAsync($"details?id={item.Id}");. Ganze Objekte übergeben Sie als zweites Argument. Für Daten, die nur einmal gelten und nach der Navigation gelöscht werden, gibt es ShellNavigationQueryParameters:

var parameters = new ShellNavigationQueryParameters
{
    { "Contact", contact }
};
await Shell.Current.GoToAsync("contactdetails", parameters);

Die Zielseite empfängt sie auf einem von zwei Wegen: mit QueryProperty-Attributen oder durch die Schnittstelle IQueryAttributable mit der Methode ApplyQueryAttributes. Learn warnt, dass das Attribut nicht sicher für das Kürzen (Trimming) und für Native AOT ist, und empfiehlt IQueryAttributable. Der Kurs nimmt deshalb die Schnittstelle. Beachten Sie einen Unterschied: Zeichenfolgen, die per IQueryAttributable ankommen, sind nicht automatisch URL-dekodiert; die per Attribut ankommenden sind es.

Stile und Ressourcen

Alles, was Sie auf mehr als einem Element einstellen, gehört in einen Stil oder eine Ressource. Ein Ressourcenwörterbuch (ResourceDictionary) enthält Farben, Stile, Vorlagen, Konverter und andere Werte. Es kann an einem Steuerelement, einer Seite oder der App hängen; je weiter oben, desto weiter reicht die Gültigkeit. Ein Stil (Style) fasst Eigenschaftswerte in Setter zusammen, mit einem TargetType:

• Impliziter Stil: ohne x:Key. Er gilt für jedes Element in Reichweite, dessen Typ genau der TargetType ist, aber nicht für abgeleitete Typen. Mit ApplyToDerivedTypes="True" gilt er auch dort.
• Expliziter Stil: mit x:Key. Er gilt nur für Elemente, die ihn mit Style="{StaticResource Schlüssel}" verwenden.
• Vererbung: BasedOn baut einen Stil auf einem anderen auf; er darf nur von Stilen auf derselben oder einer höheren Ebene erben.

Eigene Dateien binden Sie als Teil der Ressourcen der App ein. In App.xaml steht schon ein Wörterbuch mit zusammengeführten Wörterbüchern der Vorlage; fügen Sie dort eine Zeile an:

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Resources/Styles/KladdeStyles.xaml" />
</ResourceDictionary.MergedDictionaries>

Das Beispiel zeigt die Form; der Pfad hängt davon ab, wo Sie die Datei ablegen. Eine Änderung an einem Ressourcenwörterbuch lädt bei Hot Reload alle XAML-Dateien neu.

Hell und dunkel

Die Systeme haben ein helles und ein dunkles Thema, und eine App soll beide beachten. MAUI-Apps reagieren darauf unter iOS 13 und neuer, Android 10 (API 29) und neuer, macOS 10.14 und neuer und Windows 10 und neuer. Die Markup-Erweiterung AppThemeBinding wählt einen Wert nach dem Thema; wechselt es, während die App läuft, passen sich alle Elemente an. Werte aus einem Wörterbuch binden Sie mit StaticResource ein:

<Color x:Key="CardLight">#F2F2F5</Color>
<Color x:Key="CardDark">#2A2A30</Color>

<Style x:Key="CardGrid" TargetType="Grid">
    <Setter Property="BackgroundColor"
            Value="{AppThemeBinding Light={StaticResource CardLight}, Dark={StaticResource CardDark}}" />
</Style>

Das aktuelle System-Thema liefert Application.Current.RequestedTheme (Light, Dark oder Unspecified). Mit Application.Current.UserAppTheme legen Sie fest, welches Thema die App benutzt, unabhängig vom System; AppTheme.Unspecified stellt das Verhalten des Systems wieder her. Das brauchen Sie in der Übung, um beide Darstellungen zu prüfen, ohne das Telefon umzustellen.

Barrierefreiheit

Eine App ist für alle Menschen da, auch für die, die sie mit einem Bildschirmleser, mit vergrößerter Schrift oder ohne Touch bedienen. Was K2 in Lektion 2.1.7 für Webseiten gelehrt hat, gilt dem Sinn nach hier wieder; die Technik ist eine andere. Drei Werkzeuge gehören in jede Seite.

Semantische Eigenschaften. SemanticProperties sind angehängte Eigenschaften, die die Bedienhilfen der Plattform füttern. Sie erzwingen keine einheitliche Wirkung, sondern nutzen, was die Plattform kann:

<Image Source="like.png"
       SemanticProperties.Description="Like"
       SemanticProperties.Hint="Like this post." />

Das Beispiel ist von Learn. Unter Windows gibt es neun Überschriftsebenen; Android und iOS kennen nur eine, jede gesetzte Ebene wird dort zur Überschrift. Learn nennt mehrere Fallen. Setzen Sie Description nicht an einem Label: Der Text würde nicht mehr vorgelesen, und sichtbarer und gesprochener Text sollen gleich sein. Setzen Sie Description unter Android nicht an Entry und Editor, das stört TalkBack; dort nehmen Sie Placeholder oder Hint. Und setzen Sie Hint nicht anders als Placeholder: Beide landen unter Android in derselben Plattform-Eigenschaft. Unter iOS kann der Bildschirmleser die Kinder eines Elements nicht erreichen, das selbst eine Description hat.

Lesereihenfolge. Standardmäßig ist es die Reihenfolge in XAML, in einem Grid zusätzlich nach Zeile und Spalte. Bauen Sie das Layout so, dass die Reihenfolge im Dokument der Lesereihenfolge entspricht.

Schrift des Systems. Alle Steuerelemente mit Text skalieren ihre Schrift mit der Einstellung des Betriebssystems (FontAutoScalingEnabled steht auf true). Schalten Sie das nur aus, wenn die Größe exakt feststehen muss. Wichtiger ist, dass Ihre Layouts eine größere Schrift vertragen: Zeilen mit Auto und * wachsen mit, Zeilen mit fester Höhe schneiden Text ab.

namespace Kladde.App.Models;

public sealed record ContactResponse(
    int Id, string Name, string? Email, string? Company, IReadOnlyList<string> Tags);

public sealed record AppointmentResponse(
    string Title, DateTimeOffset Start, DateTimeOffset End, IReadOnlyList<int> ContactIds);

namespace Kladde.App.Models;

/// <summary>Fixed sample data for W2.1; the web API replaces it in W2.2.2.</summary>
public static class SampleData
{
    public static IReadOnlyList<ContactResponse> Contacts { get; } =
    [
        new(1, "Mira Hoffmann", "mira.hoffmann@example.com", "Hoffmann IT-Beratung", ["Kunde"]),
        new(2, "Jonas Weber", "jonas.weber@example.com", "Weber und Partner", ["Kunde", "Wartung"]),
        new(3, "Selin Aydin", "selin.aydin@example.com", "Aydin Logistik", ["Interessent"]),
        new(4, "Tom Brandt", null, null, []),
        new(5, "Lena Krüger", "lena.krueger@example.com", "Krüger Software", ["Partner"]),
        new(6, "Paul Neumann", "paul.neumann@example.com", "Neumann Bau", ["Kunde"]),
    ];

    public static IReadOnlyList<AppointmentResponse> TodaysAppointments { get; } =
    [
        new("Beratung Hoffmann", Today(9, 0), Today(10, 0), [1]),
        new("Rückruf Weber", Today(10, 30), Today(11, 0), [2]),
        new("Workshop Aydin", Today(13, 0), Today(14, 30), [3]),
        new("Jour fixe Team", Today(16, 0), Today(16, 30), []),
    ];

    private static DateTimeOffset Today(int hour, int minute) =>
        new(DateTime.Today.AddHours(hour).AddMinutes(minute));
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Kladde.App.Models"
             x:Class="Kladde.App.Pages.ContactsPage"
             Title="Kontakte">
    <CollectionView x:Name="ContactList"
                    EmptyView="Keine Kontakte vorhanden.">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:ContactResponse">
                <Grid Padding="12" RowDefinitions="Auto, Auto">
                    <Label Text="{Binding Name}" FontAttributes="Bold" />
                    <Label Grid.Row="1" Text="{Binding Company}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

using Kladde.App.Models;

namespace Kladde.App.Pages;

public partial class ContactsPage : ContentPage
{
    public ContactsPage()
    {
        InitializeComponent();
        ContactList.ItemsSource = SampleData.Contacts;
    }
}

<?xml version="1.0" encoding="UTF-8" ?>
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:pages="clr-namespace:Kladde.App.Pages"
       x:Class="Kladde.App.AppShell">
    <TabBar>
        <ShellContent Title="Kontakte"
                      Route="contacts"
                      ContentTemplate="{DataTemplate pages:ContactsPage}" />
    </TabBar>
</Shell>

<MauiXamlInflator>SourceGen</MauiXamlInflator>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Kladde.App.Models"
             x:Class="Kladde.App.Pages.ContactDetailPage"
             x:DataType="models:ContactResponse"
             Title="Kontakt">
    <VerticalStackLayout Padding="20" Spacing="8">
        <Label Text="{Binding Name}"
               FontSize="24"
               SemanticProperties.HeadingLevel="Level1" />
        <Label Text="{Binding Company}" />
        <Label Text="{Binding Email}" />
        <Button Text="Zurück" Clicked="OnBackClicked" />
    </VerticalStackLayout>
</ContentPage>

using Kladde.App.Models;

namespace Kladde.App.Pages;

public partial class ContactDetailPage : ContentPage, IQueryAttributable
{
    public ContactDetailPage()
    {
        InitializeComponent();
    }

    public void ApplyQueryAttributes(IDictionary<string, object> query)
    {
        if (query.TryGetValue("Contact", out object? value) && value is ContactResponse contact)
        {
            BindingContext = contact;
        }
    }

    private async void OnBackClicked(object? sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("..");
    }
}

using Kladde.App.Pages;

namespace Kladde.App;

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("contactdetails", typeof(ContactDetailPage));
    }
}

private async void OnContactSelected(object? sender, SelectionChangedEventArgs e)
{
    if (e.CurrentSelection.FirstOrDefault() is not ContactResponse contact)
    {
        return;
    }

    ((CollectionView)sender!).SelectedItem = null;

    var parameters = new ShellNavigationQueryParameters { { "Contact", contact } };
    await Shell.Current.GoToAsync("contactdetails", parameters);
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Kladde.App.Models"
             x:Class="Kladde.App.Pages.AppointmentsPage"
             Title="Heute">
    <Grid RowDefinitions="Auto, *" Padding="12">
        <Label x:Name="DayLabel"
               FontSize="20"
               SemanticProperties.HeadingLevel="Level1" />
        <CollectionView x:Name="AppointmentList"
                        Grid.Row="1"
                        EmptyView="Heute stehen keine Termine an.">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:AppointmentResponse">
                    <Grid Padding="0, 8" ColumnDefinitions="Auto, *" RowDefinitions="Auto, Auto" ColumnSpacing="16">
                        <Label Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" />
                        <Label Grid.Row="1" Text="{Binding End, StringFormat='bis {0:HH:mm}'}" />
                        <Label Grid.Column="1" Grid.RowSpan="2" Text="{Binding Title}" VerticalOptions="Center" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

using System.Globalization;
using Kladde.App.Models;

namespace Kladde.App.Pages;

public partial class AppointmentsPage : ContentPage
{
    public AppointmentsPage()
    {
        InitializeComponent();
        DayLabel.Text = DateTime.Today.ToString("dddd, d. MMMM", CultureInfo.GetCultureInfo("de-DE"));
        AppointmentList.ItemsSource = SampleData.TodaysAppointments;
    }
}

<ShellContent Title="Heute"
              Route="today"
              ContentTemplate="{DataTemplate pages:AppointmentsPage}" />

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Color x:Key="CardLight">#F2F2F5</Color>
    <Color x:Key="CardDark">#2A2A30</Color>

    <Style x:Key="CardGrid" TargetType="Grid">
        <Setter Property="Padding" Value="12" />
        <Setter Property="BackgroundColor"
                Value="{AppThemeBinding Light={StaticResource CardLight}, Dark={StaticResource CardDark}}" />
    </Style>

    <Style x:Key="CardTitle" TargetType="Label">
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="FontSize" Value="18" />
    </Style>
</ResourceDictionary>

<Grid Style="{StaticResource CardGrid}" RowDefinitions="Auto, Auto">
    <Label Text="{Binding Name}" Style="{StaticResource CardTitle}" />
    <Label Grid.Row="1" Text="{Binding Company}" />
</Grid>

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Hell oder dunkel" Clicked="OnThemeClicked" />
</ContentPage.ToolbarItems>

private void OnThemeClicked(object? sender, EventArgs e)
{
    if (Application.Current is { } app)
    {
        app.UserAppTheme = app.UserAppTheme == AppTheme.Dark ? AppTheme.Light : AppTheme.Dark;
    }
}

Die Kladde: Kontakte und Termine in der App

Nach dieser Lektion hat Kladde.App zwei Seiten in einer Shell: die Kontakte mit einer Detailseite und die Termine des Tages, mit festen Beispieldaten aus SampleData, gestaltet mit einem eigenen Ressourcenwörterbuch, in hellem und dunklem Thema, mit Überschriften für den Bildschirmleser und mitwachsender Schrift. Die zwei Datensätze ContactResponse und AppointmentResponse haben die Namen und Felder der Antworten der Web-API aus K2, damit W2.2.2 sie ohne Umbau füllen kann. Die Seiten arbeiten noch mit Code-Behind: Der Konstruktor weist die Daten zu, der Handler navigiert. In W2.2.1 holen Sie die Logik aus den Seiten heraus und bauen Kontaktliste, Detailseite und Termine auf ViewModels um, die Sie ohne Gerät testen.

Was Sie jetzt können

• Sie lesen XAML: Wurzelelement, x:Class, die zwei Namensräume, Eigenschaften, Markup-Erweiterungen und die Rolle von InitializeComponent.
• Sie bauen Seiten mit Grid, VerticalStackLayout und HorizontalStackLayout und unterscheiden Padding, Margin und Spacing.
• Sie zeigen Listen mit CollectionView, mit Vorlage, x:DataType, Leeransicht und Auswahl, und nehmen kein ListView mehr.
• Sie navigieren mit Shell: Tabs, Routen, RegisterRoute, GoToAsync mit await, einmalige Daten und IQueryAttributable.
• Sie sammeln Gestaltung in Stilen und Ressourcen, unterstützen helle und dunkle Darstellung und setzen SemanticProperties und mitwachsende Schrift ein.

Weiterlesen

• Get started with XAML: Aufbau einer XAML-Datei, Namensräume, Konverter.
• What’s new in .NET MAUI for .NET 10: Quellgenerator, globale Namensräume, Abkündigungen.
• Grid: Zeilen, Spalten, Größenarten.
• StackLayout: Stapel-Layouts, Abstände und Ausrichtung.
• CollectionView: Daten, Vorlagen, Auswahl und Leeransicht.
• Compiled bindings: x:DataType und die Warnungen XC0022 bis XC0025.
• .NET MAUI Shell navigation: Routen, GoToAsync, Daten übergeben.
• .NET MAUI Shell tabs: Tabs und ihr Aussehen.
• Style apps using XAML: implizite und explizite Stile, Vererbung.
• Respond to system theme changes: AppThemeBinding und UserAppTheme.
• Build accessible apps with semantic properties: Beschreibung, Hinweis und Überschriften.
• Fonts in .NET MAUI: Schriftgrößen und automatische Skalierung.