Ćwiczenie — tworzenie konwertera MAUI platformy .NET

• 10 min

W tym ćwiczeniu dodasz konwerter do aplikacji Weather utworzonej w poprzednim ćwiczeniu. Pierwszy konwerter konwertuje wartość wyliczenia na zasób obrazu. Drugi konwerter konwertuje temperaturę z Farenheight na Stopnie Celsjusza.

Konwertowanie na obraz

Bieżącym kontekstem powiązania strony aplikacji pogodowej jest obiekt danych z właściwościami opisującym prognozę pogody. Jedną z tych właściwości jest warunek nieba, który jest wyliczeniem. Po wyświetleniu informacji o pogodzie aplikacja powinna wyświetlić ikonę, aby ułatwić użytkownikowi wizualizowanie stanu nieba. Aby wyświetlić te ikony, wyliczenie musi zostać przekonwertowane na zasób obrazu.

1. Otwórz projekt Weather Sample z poprzedniego ćwiczenia w programie Visual Studio. Jeśli nie masz kopii, możesz pobrać ją z usługi GitHub.

2. Dodaj folder do projektu o nazwie Konwertery.

3. Dodaj nową klasę do folderu Konwertery o nazwie WeatherConditionToImageConverter.cs.

4. Otwórz WeatherConditionToImageConverter.cs w edytorze kodu i zastąp cały kod następującym kodem:

   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();
   }
   

   Ten kod definiuje WeatherConditionToImageConverter konwerter w WeatherClient.Converters przestrzeni nazw. Ten konwerter oczekuje WeatherType wyliczenia jako wartości i zwraca zasób obrazu na podstawie tej wartości.

5. Otwórz plik MainPage.xaml.

6. W elemenie głównym dodaj nową przestrzeń nazw XML o nazwie cvt i zamapuj ją na przestrzeń nazw WeatherClient.Convertersplatformy .NET.

   <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. Dodaj wystąpienie WeatherConditionToImageConverter konwertera do zasobów strony przy użyciu klucza WeatherConditionToImageConverter:

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

8. Znajdź kontrolkę <Image> w pliku Grid.Row="0".

9. Zmień właściwość na Source="question.png" następujące powiązanie:

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

10. Uruchamianie projektu.

Zwróć uwagę, że po naciśnięciu przycisku Odśwież pole Warunek zmieni się na ikonę: