【.NET MAUI】コンバーターを使ってデータを変換する（.NET MAUI Community Toolkit）

当ページのリンクには広告が含まれています。

URLをコピーしました！

Converterて何？

Converter とは .NET MAUI や WPF など XAML を使う UI フレームワークで、データバインディングを使用してデータを表示する際に、データの変換をしたり、表示形式を変更したりすることができる IValueConverter インターフェースを継承したクラスのことです。

.NET MAUI Community Toolkit には、このコンバーターが提供されており、変換できるパターンは50種類以上もあります。

この記事では、コンバーターの使い方や.NET MAUI Community Toolkit が提供しているコンバーターの種類について分かりやすく解説をしています。ぜひ参考にしてみて下さい。

あわせて読みたい

【.NET MAUI】CommunityToolkit.Mauiの紹介（アプリ開発をサポートするライブラリ） .NET MAUI Community Toolkit て何だろう？ .NET MAUI Community Toolkit とは、.NET MAUI でアプリ開発する上で非常に便利な機能が詰まったライブラリです。Nuget でイ…

オススメの参考書

丁寧に解説された1冊。リリースされて間もない.NET MAUI の基礎が学べるので、これから Android や iOS などをターゲットとして開発するなら非常に参考になる書籍です。

.NET MAUIによるマルチプラットフォームアプリ開発 iOS、Android、Windows、macOS対応アプリをC#で開発

Amazon

楽天市場

Yahooショッピング

ポチップ

Converterの使い方

.NET MAUI Community Toolkit のコンバーターの１つである BoolToObjectConverter を例に使い方を紹介します。

アプリ画面に CheckBox と Ellipse を配置して、CheckBox がチェックされたら Ellipse を緑色で塗りつぶしをし、CheckBox のチェックが外されたら Ellipse を赤色で塗りつぶしをします。

Bool 型を Brush 型へ変換する

CheckBox の IsChecked が True 緑色へ変換する
CheckBox の IsChecked が False 赤色へ変換する

次の環境でサンプルコードを実行しています。

開発環境

統合開発環境　 Visual Studio 2022
プロジェクト　 .NET MAUI
フレームワーク .NET 7
OS　　　　　　 Windows 11

ライブラリをインストールする

.NET MAUI Community Toolkit を .NET MAUI のプロジェクトにインストールします。

次の手順でプロジェクトへインストールしましょう。

STEP

プロジェクトを開く

お使いのパソコンにインストールされている Visual Studio 2022 で、プロジェクトを開きます。

統合開発環境である Visual Studio のインストールがまだの方は、次の記事を参考にしてインストールします。

あわせて読みたい

【C#】Visual Studio 2022をインストールする手順を紹介 C# でアプリ開発をするには『Visual Studio』を使うのが一般的です。 Visual Studio は Microsoft 社が提供する統合開発環境で、プログラミングする時に必要となるツー…

STEP

NuGet パッケージの管理を開く

メニューバーから [ツール] -> [NuGet パッケージマネージャー] -> [ソリューションの NuGet パッケージの管理] の順に選択します。

STEP

CommunityToolkit.Mauiをインストールする

検索欄に「CommunityToolkit.Maui」を入力して、検索結果の一覧から「CommunityToolkit.Maui」をインストールします。(2023年5月現在、バージョンは5.1.0)

STEP

ライセンス条項に同意する

ライセンスへの同意を求める画面が表示されるので、内容を確認して [I Accept] ボタンをクリックします。

STEP

インストールを確認する

インストールが完了すると、ReadMe.txt が表示されます。このファイルにはライブラリの使い方が記載されています。

ReadMe.txt は閉じても特に問題はありません。

あわせて読みたい

【.NET MAUI】開発環境を構築してアプリ開発をはじめる（C#）「C#でスマホのアプリケーションを開発したい！」ていう方は、『.NET MAUI』を使えばスマホで動くアプリが開発できます。Java や Kotlin、Swiftなどの開発言語の経験が…

ライブラリの初期設定をする

CommunityToolkit.Maui を使うための設定があります。

次の手順でライブラリの初期設定をしましょう。

STEP

名前空間の参照先を追加する

MainProgram.cs を開いて、ファイルの先頭に using ステートメントを追加します。

using CommunityToolkit.Maui;

STEP

初期化処理を追加する

続いて、スタートアップ処理に CommunityToolkit.Maui の初期化処理を追加します。（下記コードの8行目に追加）

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

        return builder.Build();
    }
}

コントロールを配置する

MainPage.xaml を開いて、CheckBox と Ellipse を画面に配置します。

<ContentPage
    x:Class="ConverterSample.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <VerticalStackLayout
        Spacing="25"
        VerticalOptions="Center">
        <HorizontalStackLayout HorizontalOptions="Center">
            <CheckBox x:Name="CheckBox1" />
            <Label Text="ここをチェックすると色が変わります" VerticalOptions="Center" />
        </HorizontalStackLayout>
        <Ellipse
            Fill="Black"
            HeightRequest="100"
            WidthRequest="100" />
    </VerticalStackLayout>
</ContentPage>

この段階では次のような画面になります。

リソースを設定する

ContentPage のリソースとして、色とコンバーターの定義を記述します。

色は SolidColorBrush で True の場合と False の場合でそれぞれ指定します。コンバーターは CommunityToolkit.Maui の BoolToObjectConverter を使い、TrueObject プロパティには True の場合の色、FalseObject プロパティには False の場合の色を指定します。

<ContentPage
    x:Class="ConverterSample.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <SolidColorBrush x:Key="TrueColorBrush">Green</SolidColorBrush>
        <SolidColorBrush x:Key="FalseColorBrush">Red</SolidColorBrush>
        <toolkit:BoolToObjectConverter
            x:Key="BoolToColorBrushConverter"
            FalseObject="{StaticResource FalseColorBrush}"
            TrueObject="{StaticResource TrueColorBrush}" />
    </ContentPage.Resources>
    <VerticalStackLayout Spacing="25" VerticalOptions="Center">
        <HorizontalStackLayout HorizontalOptions="Center">
            <CheckBox x:Name="CheckBox1" />
            <Label Text="ここをチェックすると色が変わります" VerticalOptions="Center" />
        </HorizontalStackLayout>
        <Ellipse
            Fill="Black"
            HeightRequest="100"
            WidthRequest="100" />
    </VerticalStackLayout>
</ContentPage>

コンバーターを設定する

変換を含むバインドをしたいコントロールで、Converter プロパティに先ほどリソースで設定した BoolToObjectConverter を指定します。

今回は Ellipse を指定した色で塗りつぶしたいので、Ellipse の Fill プロパティをバインディングします。

コンバーターを設定したサンプルは次の通りです。

<ContentPage
    x:Class="ConverterSample.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <SolidColorBrush x:Key="TrueColorBrush">Green</SolidColorBrush>
        <SolidColorBrush x:Key="FalseColorBrush">Red</SolidColorBrush>
        <toolkit:BoolToObjectConverter
            x:Key="BoolToColorBrushConverter"
            FalseObject="{StaticResource FalseColorBrush}"
            TrueObject="{StaticResource TrueColorBrush}" />
    </ContentPage.Resources>
    <VerticalStackLayout Spacing="25" VerticalOptions="Center">
        <HorizontalStackLayout HorizontalOptions="Center">
            <CheckBox x:Name="CheckBox1" />
            <Label Text="ここをチェックすると色が変わります" VerticalOptions="Center" />
        </HorizontalStackLayout>
        <Ellipse
            Fill="{Binding Source={x:Reference CheckBox1}, Path=IsChecked, Mode=TwoWay, Converter={StaticResource BoolToColorBrushConverter}}"
            HeightRequest="100"
            WidthRequest="100" />
    </VerticalStackLayout>
</ContentPage>