Responsive Layouts in .NET MAUI

Schauen wir uns an, wie wir die MarkupExtension OnOrientation verwenden können:

• Warum responsive .NET MAUI-Anwendungen?
• Wie die OnOrientation-MarkupExtension funktioniert
• Verwendung von OnOrientation
  • Inline in der Syntax von Attributen
  • Syntax für Eigenschaftselemente
• Einschränkungen
• Fazit

Warum responsive .NET MAUI-Anwendungen?

Layouts von mobilen Anwendungen sollten reaktionsfähig sein und sich an verschiedene Bildschirmgrößen und Ausrichtungen anpassen, um ein ansprechendes Benutzererlebnis zu bieten. Obwohl wir daran gewöhnt sind, Geräte im Hochformat zu verwenden, wo es mehr vertikalen als horizontalen Platz auf dem Bildschirm gibt, gibt es immer noch Fälle, in denen es sinnvoll ist, in das Querformat zu wechseln, sogar bei Telefonen.

Eine .NET MAUI App so zu gestalten, dass sie nahtlos zwischen Hoch- und Querformat wechselt, kann eine Herausforderung sein. Der erste Schritt in die richtige Richtung kann darin bestehen, feste Größen nach Möglichkeit zu vermeiden und die Steuerelemente automatisch skalieren zu lassen. Oftmals hat die Anwendung jedoch in beiden Ausrichtungen viel Leerraum, wie im folgenden Beispiel zu sehen ist.

Indem wir Eigenschaften von Layouts wie ColumnDefinitions aus Grid mit unterschiedlichen Werten versehen, können wir den zusätzlichen horizontalen Platz auf dem Bildschirm besser ausnutzen.

Dies lässt sich leicht mit einer benutzerdefinierten MarkupExtension bewerkstelligen, so dass sie direkt in XAML verwendet werden kann, wie hier:

<Grid ColumnDefinitions="{OnOrientation Default='*', Landscape='*,*', TypeConverter={x:Type ColumnDefinitionCollectionTypeConverter}}">

Warum der TypeConverter hier angegeben ist, wird weiter unten erklärt.

Wenn Sie ein Projekt in Xamarin oder .NET MAUI haben, können wir Ihnen helfen, Zeit zu sparen.

Bevor Sie auf eigene Faust loslegen, sollten Sie sich unsere Dienstleistungen ansehen. Unser Team aus erfahrenen Entwicklern freut sich darauf, Ihr Projekt zu besprechen und Ihnen zu helfen, es mit einem hervorragenden Standard abzuschließen.

Werfen Sie einen Blick auf die App-Entwicklungsdienste

Wie die OnOrientation-MarkupExtension funktioniert

Im Gegensatz zu anderen MarkupExtensions wie OnPlatform und OnIdiom, bei denen der Faktor, der entscheidet, welcher Wert zu verwenden ist, beim Start festgelegt wird, funktioniert OnOrientation anders, da sich die Ausrichtung zur Laufzeit ändert. Das bedeutet, dass OnOrientation einen Wert liefern muss, der sich zur Laufzeit ändert. Dies kann erreicht werden, indem in ProvideValue(IServiceProvider serviceProvider) ein Binding zurückgegeben wird, mit einer Source, die INotifyPropertyChanged implementiert, in diesem Fall ein Objekt von OnOrientationSource. Die OnOrientationExtension verwendet das Ereignis DeviceDisplay.MainDisplayInfoChanged, um eine Nachricht über den WeakReferenceMessenger zu veröffentlichen.

OnOrientationSource liefert den aktuellen Wert über die Eigenschaft Value. Ihr Getter wertet die aktuelle Ausrichtung aus und gibt den entsprechenden Wert zurück. Wenn sich die Ausrichtung ändert, empfängt sie die OrientationChangedMessage und feuert das PropertyChanged-Ereignis für Value ab, was zu einer Aktualisierung in der Ansicht führt.

Es ist vielleicht aufgefallen, dass OnOrientationExtension auch die Eigenschaft TypeConverter definiert. Leider greift bei der Verwendung einer MarkupExtension der TypeConverter Mechanismus nicht, was normalerweise zu einer Fehlinterpretation des Typs führt. Deshalb kann TypeConverter verwendet werden, um anzugeben, welche Art von TypeConverter für die Konvertierung des String-Wertes aus dem OnOrientation-Ausdruck verwendet werden soll, was eine einfache Umgehung dieser Einschränkung ist. Um herauszufinden, welcher TypeConverter verwendet werden soll, können Entwickler das TypeConverterAttribute überprüfen, mit dem die BindableProperty annotiert ist, wie im Beispiel dargestellt.

Verwendung von OnOrientation

1. Installieren Sie CommunityToolkit.Maui in das Projekt
2. Fügen Sie UseMauiCommunityToolkit() zu MauiProgram.cs hinzu, wenn Sie den MauiAppBuilder konfigurieren
3. Hinzufügen der beiden Klassen „OnOrientationExtension.cs“ und „OnOrientationSource.cs“ in das .NET MAUI-Projekt
4. Fügen Sie den Namespace-Alias zur XAML-Datei hinzu
5. Verwenden Sie OnOrientation entweder inline als MarkupExtension in der Attributsyntax oder über die Syntax von Eigenschaftselementen

Stellen Sie sicher, dass Sie immer einen Wert für Default angeben.

Inline in der Syntax von Attributen

Primitive Werte können einfach wie folgt verwendet werden:

<Label Grid.Row="{OnOrientation Default=0, Landscape=1}" />

Da die Werte, die Sie in einer MarkupExtension angeben, von einem primitiven Typ wie int oder string sein müssen und die Typkonvertierung mit TypeConverters nicht greift, müssen Sie manchmal x:Static verwenden, um auf statische Variablen oder Enum-Werte zu verweisen.

<Label HorizontalOptions="{OnOrientation Default={x:Static LayoutOptions.Start}, Landscape={x:Static LayoutOptions.Center}}" />

Die Konvertierung eines komplexen Wertes aus einer Zeichenkette kann durch die Angabe eines TypeConverters erreicht werden:

<Grid ColumnDefinitions="{OnOrientation Default='*', Landscape='*,*', TypeConverter={x:Type ColumnDefinitionCollectionTypeConverter}}">

Syntax für Eigenschaftselemente

Wenn ein komplexer Wert benötigt wird und kein passender TypeConverter existiert, dann kann man auch die Syntax von Eigenschaftselementen verwenden, um die verschiedenen Werte anzugeben. Obwohl man argumentieren kann, dass dies für den praktischen Gebrauch viel zu langatmig ist.

<Grid.ColumnDefinitions>
    <ext:OnOrientation>
        <ext:OnOrientation.Default>
            <ColumnDefinitionCollection>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="0" />
            </ColumnDefinitionCollection>
        </ext:OnOrientation.Default>
        <ext:OnOrientation.Landscape>
            <ColumnDefinitionCollection>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </ColumnDefinitionCollection>
        </ext:OnOrientation.Landscape>
    </ext:OnOrientation>
</Grid.ColumnDefinitions>

Diese Syntax kann aber auch dazu verwendet werden, ganze Ansichten auszuschalten:

<ContentView>
    <ContentView.Content>
        <ext:OnOrientation>
            <Label Text="Dieser Text ist in Standard sichtbar" />
            <ext:OnOrientation.Landscape>
                <Label Text="Dieser Text ist im Querformat sichtbar" />
            </ext:OnOrientation.Landscape>
        </ext:OnOrientation>
    </ContentView.Content>
</ContentView>

Interesse an unserer Arbeit geweckt?

Wir gehen davon aus, dass Sie ein gewisses Interesse an unserer Arbeit gewonnen haben, da Sie es bis hierher geschafft haben. Bitte zögern Sie nicht, uns Ihr Feedback zu geben oder ein Projekt von Ihnen zu besprechen. Wir würden uns freuen, von Ihnen zu hören.

Lassen Sie uns reden

Einschränkungen

OnOrientation basiert auf der Ausrichtung, die von DeviceDisplay.MainDisplayInfo.Orientation bereitgestellt wird, und funktioniert daher nicht richtig auf Desktop-Plattformen. Außerdem kann ein Binding-Ausdruck nicht als einer der Werte verwendet werden.

Fazit

Das Anpassen des Layouts mit OnOrientationExtension kann recht komfortabel und flexibel sein. Aber denken Sie daran, dass es auch andere Wege gibt, mit Orientierungsänderungen umzugehen, also schauen Sie sich unbedingt diese Artikel an:

• Using OrientationStateTrigger by Julian Ewers-Peters
• Handhabung von Ausrichtungsänderungen in Xamarin.Forms - 5 Ansätze von Joanie Davis

Schauen Sie sich den OnOrientationExtension-Zweig im PokeApp-Maui-Repository an, wo Sie dies in Aktion sehen können. Du kannst auch hier klicken für die Gist und Feedback oder andere Kommentare hinterlassen.