Übung: Erstellen eines .NET MAUI-Konverters

Abgeschlossen

In dieser Übung fügen Sie der in der vorherigen Übung erstellten Wetter-App einen Konverter hinzu. Der erste Konverter konvertiert einen Enumerationswert in eine Bildressource. Der zweite Konverter wandelt die Temperatur von Fahrenheit in Celsius um.

In ein Bild konvertieren

Der aktuelle Bindungskontext der Wetter-App-Seite ist ein Datenobjekt mit Eigenschaften, die die Wettervorhersage beschreiben. Eine dieser Eigenschaften ist die Wetterlage, bei der es sich um eine Enumeration handelt. Wenn Wetterinformationen angezeigt werden, sollte die App ein Symbol anzeigen, um Benutzern zu helfen, die Wetterlage zu visualisieren. Zum Anzeigen dieser Symbole muss die Enumeration in eine Bildressource konvertiert werden.

1. Öffnen Sie das Projekt „Weather Sample“ aus der vorherigen Übung in Visual Studio oder Visual Studio Code.

2. Fügen Sie dem Projekt einen Ordner mit dem Namen Converters hinzu.

3. Fügen Sie dem Ordner Converters eine neue Klasse namens WeatherConditionToImageConverter.cs hinzu.

4. Öffnen Sie WeatherConditionToImageConverter.cs im Code-Editor, und ersetzen Sie den gesamten Code durch folgenden:

   using System.Globalization;
   using WeatherClient.Models;
   
   namespace WeatherClient.Converters;
   
   internal class WeatherConditionToImageConverter : IValueConverter
   {
       public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
       {
           WeatherType weatherCondition = (WeatherType)value!;
   
           return weatherCondition switch
           {
               Models.WeatherType.Sunny => ImageSource.FromFile("sunny.png"),
               Models.WeatherType.Cloudy => ImageSource.FromFile("cloud.png"),
               _ => ImageSource.FromFile("question.png")
           };
       }
   
       public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture) =>
           throw new NotImplementedException();
   }
   

   Dieser Code definiert den Konverter WeatherConditionToImageConverter im Namespace WeatherClient.Converters. Dieser Konverter erwartet die WeatherType-Enumeration als Wert und gibt eine Bildressource basierend auf diesem Wert zurück.

5. Öffnen Sie die Datei MainPage.xaml.cs.

6. Fügen Sie im Stammelement einen neuen XML-Namespace namens cvt hinzu, und ordnen Sie ihn dem .NET-Namespace WeatherClient.Converters zu.

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:cvt="clr-namespace:WeatherClient.Converters"
                x:Class="WeatherClient.MainPage">
   

7. Fügen Sie eine Instanz des Konverters WeatherConditionToImageConverter zu den Ressourcen der Seite mit dem Schlüssel WeatherConditionToImageConverter hinzu:

   <ContentPage ...
   
       <ContentPage.Resources>
           <cvt:WeatherConditionToImageConverter x:Key="WeatherConditionToImageConverter" />
       </ContentPage.Resources>
   

8. Suchen Sie das Steuerelement <Image> in Grid.Row="0".

9. Ändern Sie die Eigenschaft Source="question.png" in die folgende Bindung:

   Source="{Binding Condition, Converter={StaticResource WeatherConditionToImageConverter}}"
   

10. Führen Sie das Projekt aus.

Beachten Sie, dass beim Auswählen der Schaltfläche " Aktualisieren " das Feld "Bedingung " zu einem Symbol wechselt: