練習 - 建立 .NET MAUI 轉換器

10 分鐘

在此練習中，您會將轉換器新增至上一個練習中建立的 Weather 應用程式。第一個轉換器會將列舉值轉換為影像資源。第二個轉換器會將溫度從華氏轉換為攝氏。

轉換為影像

天氣應用程式頁面的目前繫結內容是一個資料物件，其中包含描述天氣預報的屬性。其中一個屬性是天空狀況，這是列舉。顯示天氣資訊時，應用程式應該會顯示圖示以協助使用者視覺化天空狀況。若要顯示這些圖示，列舉必須轉換為影像資源。

在 Visual Studio 或 Visual Studio Code 中開啟上一個練習中的天氣範例專案。
將資料夾新增至名為 Converters 的專案。
將新的類別新增至名為 WeatherConditionToImageConverter.cs 的 Converters 資料夾。

在程式碼編輯器中開啟 WeatherConditionToImageConverter.cs，並以下列程式碼取代所有程式碼：

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

此程式碼會在 WeatherClient.Converters 命名空間中定義 WeatherConditionToImageConverter 轉換器。此轉換器預期 WeatherType 列舉為值，並根據該值傳回影像資源。

開啟 MainPage.xaml 檔案。

在根項目上，新增名為 cvt 的新 XML 命名空間，並將其對應至 .NET 命名空間 WeatherClient.Converters。

<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">

使用 WeatherConditionToImageConverter 的索引鍵，將 WeatherConditionToImageConverter 轉換器的執行個體新增至頁面的資源：

<ContentPage ...

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

在 Grid.Row="0" 中尋找 <Image> 控制項。

將 Source="question.png" 屬性變更為下列繫結：

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

執行專案。

請注意，當您按下 [重新整理] 按鈕時，[狀況] 欄位會變更為圖示：

.NET MAUI 應用程式的螢幕擷取畫面顯示天氣預報，並具有象徵晴天的太陽圖示。

練習 - 建立 .NET MAUI 轉換器

轉換為影像

意見反應