Cvičení – vytvoření převaděče .NET MAUI

Dokončeno

V tomto cvičení přidáte převaděč do aplikace Počasí vytvořené v předchozím cvičení. První převaděč převede hodnotu výčtu na prostředek image. Druhý převaděč převede teplotu z Fahrenheita na stupně Celsia.

Převést na obrázek

Aktuální kontext vazby stránky aplikace počasí je datový objekt s vlastnostmi popisujícími předpověď počasí. Jednou z těchto vlastností je sky condition, což je výčet. Když se zobrazí informace o počasí, měla by aplikace zobrazit ikonu, která uživateli pomůže vizualizovat stav oblohy. Aby se tyto ikony zobrazily, musí být výčet převeden na prostředek obrázku.

1. Otevřete projekt Ukázka počasí z předchozího cvičení v sadě Visual Studio nebo Visual Studio Code.

2. Přidejte složku do projektu s názvem Převaděče.

3. Přidejte novou třídu do složky Converters s názvem WeatherConditionToImageConverter.cs.

4. Otevřete WeatherConditionToImageConverter.cs v editoru kódu a nahraďte veškerý kód následujícím kódem:

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

   Tento kód definuje WeatherConditionToImageConverter převaděč v WeatherClient.Converters oboru názvů. Tento převaděč očekává WeatherType výčet jako hodnotu a vrátí prostředek image na základě této hodnoty.

5. Otevřete soubor MainPage.xaml.

6. V kořenovém elementu přidejte nový obor názvů XML s názvem cvt a namapujte ho na obor názvů WeatherClient.Converters.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. Přidejte instanci WeatherConditionToImageConverter převaděče do prostředků stránky s klíčem WeatherConditionToImageConverter:

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

8. <Image> Najděte ovládací prvek v Grid.Row="0"souboru .

9. Source="question.png" Změňte vlastnost na následující vazbu:

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

10. Spustit projekt.

Všimněte si, že když stisknete tlačítko Aktualizovat , pole Podmínka se změní na ikonu: