LoginSignup
6
1

More than 3 years have passed since last update.

XamarinAdvent Calendar 2020Day 16
@f-miyuinアステリア株式会社

Xamarin Community Toolkit カタログ（ビヘイビア・コンバーター編）

Last updated at Posted at 2020-12-16

この記事は、Xamarin Advent Calendar 2020 16日目の記事です。

はじめに

Xamarin Community Toolkit は、Xamarin.Formsで使用できる便利ツール群です。ビヘイビア、コンバーター、エフェクトなどの汎用的な機能が揃っています。
この記事では、Xamarin Community Toolkitの機能を紹介していきます。執筆時点でのバージョンは、1.0.0-pre6 です。

記事内のコードは、GitHubにあげてあります。
XamarinCommunityToolkitCatalog

この記事では、ビヘイビア、コンバーターについて紹介します。
他の機能については、以下の記事で紹介しています。

使い方

プレビュー版ですが、NuGetでインストールできます。
Xamarin.CommunityToolkit

xamlでのネームスペースは、以下のように指定します。

xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

ビヘイビア

AnimationBehavior

タップ時にアニメーションが行われるようにするビヘイビアです。設定できるアニメーションの種類は以下の通りです。

  • FadeAnimation （フェード）
  • FlipHorizontalAnimation （横フリップ）
  • FlipVerticalAnimation （縦フリップ）
  • RotateAnimation （回転）
  • ScaleAnimation （スケール）
  • ShakeAnimation （シェイク）

Commandで、アニメーション終了時に実行するコマンドを設定できます。ただし、仕様なのかバグなのか分かりませんが、２回実行されるので注意が必要です。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.AnimationBehaviorPage"
             Title="AnimationBehavior">
    <StackLayout VerticalOptions="Center"
                 Padding="32, 0"
                 Spacing="16">
        <Label Text="Fade" HorizontalTextAlignment="Center" >
            <Label.Behaviors>
                <xct:AnimationBehavior Command="{Binding FinishedCommand}">
                    <xct:AnimationBehavior.AnimationType>
                        <xct:FadeAnimation />
                    </xct:AnimationBehavior.AnimationType>
                </xct:AnimationBehavior>
            </Label.Behaviors>
        </Label>

        <Label Text="FlipHorizontal" HorizontalTextAlignment="Center" >
            <Label.Behaviors>
                <xct:AnimationBehavior Command="{Binding FinishedCommand}">
                    <xct:AnimationBehavior.AnimationType>
                        <xct:FlipHorizontalAnimation />
                    </xct:AnimationBehavior.AnimationType>
                </xct:AnimationBehavior>
            </Label.Behaviors>
        </Label>

        <Label Text="FlipHorizontal" HorizontalTextAlignment="Center" >
            <Label.Behaviors>
                <xct:AnimationBehavior Command="{Binding FinishedCommand}">
                    <xct:AnimationBehavior.AnimationType>
                        <xct:FlipVerticalAnimation />
                    </xct:AnimationBehavior.AnimationType>
                </xct:AnimationBehavior>
            </Label.Behaviors>
        </Label>

        <Label Text="Rotate" HorizontalTextAlignment="Center" >
            <Label.Behaviors>
                <xct:AnimationBehavior Command="{Binding FinishedCommand}">
                    <xct:AnimationBehavior.AnimationType>
                        <xct:RotateAnimation Rotation="360" Duration="1000" />
                    </xct:AnimationBehavior.AnimationType>
                </xct:AnimationBehavior>
            </Label.Behaviors>
        </Label>

        <Label Text="Scale" HorizontalTextAlignment="Center" >
            <Label.Behaviors>
                <xct:AnimationBehavior Command="{Binding FinishedCommand}">
                    <xct:AnimationBehavior.AnimationType>
                        <xct:ScaleAnimation Scale="2" />
                    </xct:AnimationBehavior.AnimationType>
                </xct:AnimationBehavior>
            </Label.Behaviors>
        </Label>

        <Button Text="Shake">
            <Button.Behaviors>
                <xct:AnimationBehavior EventName="Clicked"
                                       Command="{Binding FinishedCommand}">
                    <xct:AnimationBehavior.AnimationType>
                        <xct:ShakeAnimation />
                    </xct:AnimationBehavior.AnimationType>
                </xct:AnimationBehavior>
            </Button.Behaviors>
        </Button>
    </StackLayout>
</ContentPage>

EventToCommandBehavior

指定したイベントの発火時にコマンドを実行するビヘイビアです。EventNameでイベント名を、Commandでコマンドを設定します。また、CommandParameterでコマンドのパラメータ、EventArgsConverterでEventArgsのコンバーターの設定もできます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.EventToCommandBehaviorPage"
             Title="EventToCommandBehavior">
    <Button Text="Button"
            VerticalOptions="Center"
            Margin="32, 0">
        <Button.Behaviors>
            <xct:EventToCommandBehavior EventName="Clicked"
                                        Command="{Binding ClickedCommand}" />
        </Button.Behaviors>
    </Button>
</ContentPage>

ImpliedOrderGridBehavior

GridでGrid.ColumnやGrid.Rowを指定しなくても、暗黙的に設定を行うビヘイビアです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.ImpliedOrderGridBehaviorPage"
             Title="ImpliedOrderGridBehavior">
    <Grid>
        <Grid.Behaviors>
            <xct:ImpliedOrderGridBehavior />
        </Grid.Behaviors>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Text="0,0" />
        <Label Text="1,0" />
        <Label Text="2,0" />

        <Label Text="0,1" />
        <Label Text="1,1" />
        <Label Text="2,1" />
    </Grid>
</ContentPage>

MaskedBehavior

入力した文字列を指定したパターンに合わせるビヘイビアです。Maskでパターンを設定します。パターンでの任意の文字はデフォルトではXで表します。この文字は、UnMaskedCharacterで変更することが可能です。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.MaskedBehaviorPage"
             Title="MaskedBehavior">
    <Entry VerticalOptions="Center" Margin="32, 0">
        <Entry.Behaviors>
            <xct:MaskedBehavior Mask="XXXX-XX" />
        </Entry.Behaviors>
    </Entry>
</ContentPage>

MaxLengthReachedBehavior

EntryやEditorの最大入力文字（MaxLength）に達した時にイベントのやコマンドを実行するビヘイビアです。イベントはMaxLengthReached、コマンドはCommandで設定します。また、ShouldDismissKeyboardAutomaticallyをtrueにすることで、最大入力文字に達した時に、キーボードを閉じるようにすることもできます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.MaxLengthReachedBehaviorPage"
             Title="MaxLengthReachedBehavior">
    <Entry MaxLength="6"
           VerticalOptions="Center"
           Margin="32, 0">
        <Entry.Behaviors>
            <xct:MaxLengthReachedBehavior Command="{Binding MaxLengthReachedCommand}"
                                          ShouldDismissKeyboardAutomatically="True" />
        </Entry.Behaviors>
    </Entry>
</ContentPage>

UserStoppedTypingBehavior

EntryやEditorで入力を終えてから一定時間後にコマンドを実行するビヘイビアです。StoppedTypingTimeThresholdでコマンド実行までの時間（ミリ秒）を、Commandで実行するコマンドを設定します。また、MinimumLengthThresholdでコマンドの実行を行う最小文字数を設定できたり、ShouldDismissKeyboardAutomaticallyをtrueにすることで、コマンド実行時にキーボードを閉じるようにすることもできます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.UserStoppedTypingBehaviorPage"
             Title="UserStoppedTypingBehavior">
    <Entry VerticalOptions="Center" Margin="32, 0">
        <Entry.Behaviors>
            <xct:UserStoppedTypingBehavior Command="{Binding UserStoppedTypingCommand}"
                                           StoppedTypingTimeThreshold="500"
                                           MinimumLengthThreshold="3"
                                           ShouldDismissKeyboardAutomatically="True" />
        </Entry.Behaviors>
    </Entry>
</ContentPage>

ValidationBehavior

バリデーションを行うためのビヘイビアです。ValidStyleで有効時、InvalidStyleで無効時のスタイルを設定できます。また、IsValidで、有効かどうかを取得できます。
ValidationBehaviorは抽象クラスで、以下が実装してあるクラスです。

CharactersValidationBehavior

指定した種類の文字が指定数分含まれているかどうかのバリデーションを行うビヘイビアです。CharacterTypeで文字の種類、MinimumCharacterCountで最小数、MaximumCharacterCountで最大数を指定します。
指定できる文字の種類は以下の通りです。

  • LowercaseLetter （小文字）
  • UppercaseLetter （大文字）
  • Letter （LowercaseLetter または UppercaseLetter）
  • Digit （数字）
  • Alphanumeric （Letter または Digit）
  • Whitespace （空白文字）
  • NonAlphanumericSymbol （文字、数字、空白文字以外）
  • LowercaseLatinLetter （a〜z）
  • UppercaseLatinLetter （A〜Z）
  • LatinLetter （LowercaseLatinLetter または UppercaseLatinLetter）
  • Any （Alphanumeric または NonAlphanumericSymbol または Whitespace）

フラグなので組み合わせることもできます。ただし、LowercaseLetter、UppercaseLetterでは日本語の文字は含まれないので、必然的にLetterでも含まれないので注意が必要です。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.CharactersValidationBehaviorPage"
             Title="CharactersValidationBehavior">
    <ContentPage.Resources>
        <Style x:Key="invalidEntryStyle" TargetType="Entry">
            <Setter Property="TextColor" Value="Red" />
        </Style>
    </ContentPage.Resources>

    <Entry VerticalOptions="Center" Margin="32, 0">
        <Entry.Behaviors>
            <xct:CharactersValidationBehavior InvalidStyle="{StaticResource invalidEntryStyle}"
                                              CharacterType="Letter"
                                              MinimumCharacterCount="2"
                                              MaximumCharacterCount="5" />
        </Entry.Behaviors>
    </Entry>
</ContentPage>

EmailValidationBehavior

Eメールの書式になっているかどうかのバリデーションを行うビヘイビアです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.EmailValidationBehaviorPage"
             Title="EmailValidationBehavior">
    <ContentPage.Resources>
        <Style x:Key="invalidEntryStyle" TargetType="Entry">
            <Setter Property="TextColor" Value="Red" />
        </Style>
    </ContentPage.Resources>

    <Entry VerticalOptions="Center" Margin="32, 0">
        <Entry.Behaviors>
            <xct:EmailValidationBehavior InvalidStyle="{StaticResource invalidEntryStyle}" />
        </Entry.Behaviors>
    </Entry>
</ContentPage>

MultiValidationBehavior

複数のValidationBehaviorを組み合わせてバリデーションを行うビヘイビアです。バリデーション毎にErrorで無効時の値を設定でき、Errorsで無効と判定されているバリデーションのErrorの値を取得できます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.MultiValidationBehaviorPage"
             Title="MultiValidationBehavior">
    <ContentPage.Resources>
        <Style x:Key="invalidEntryStyle" TargetType="Entry">
            <Setter Property="TextColor" Value="Red" />
        </Style>
    </ContentPage.Resources>

    <StackLayout VerticalOptions="Center" Margin="32, 0">
        <Entry>
            <Entry.Behaviors>
                <xct:MultiValidationBehavior x:Name="multiValidationBehavior"
                                             InvalidStyle="{StaticResource invalidEntryStyle}" >
                    <xct:CharactersValidationBehavior CharacterType="Digit"
                                                      MinimumCharacterCount="1"
                                                      xct:MultiValidationBehavior.Error="数字1文字以上" />
                    <xct:CharactersValidationBehavior CharacterType="UppercaseLetter"
                                                      MinimumCharacterCount="1"
                                                      xct:MultiValidationBehavior.Error="大文字1文字以上" />
                    <xct:CharactersValidationBehavior CharacterType="Any"
                                                      MinimumCharacterCount="8"
                                                      xct:MultiValidationBehavior.Error="8文字以上" />
                </xct:MultiValidationBehavior>
            </Entry.Behaviors>
        </Entry>
        <Label Text="{Binding Errors[0], Source={x:Reference multiValidationBehavior}}" />
    </StackLayout>
</ContentPage>

NumericValidationBehavior

数値の範囲や小数点以下の桁数のバリデーションを行うビヘイビアです。MinimumValueで最小値、MaximumValueで最大値、MinimumDecimalPlacesで小数点以下の最小桁数、MaximumDecimalPlacesで小数点以下の最大桁数を設定します。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.NumericValidationBehaviorPage"
             Title="NumericValidationBehavior">
    <ContentPage.Resources>
        <Style x:Key="invalidEntryStyle" TargetType="Entry">
            <Setter Property="TextColor" Value="Red" />
        </Style>
    </ContentPage.Resources>

    <Entry VerticalOptions="Center" Margin="32, 0">
        <Entry.Behaviors>
            <xct:NumericValidationBehavior InvalidStyle="{StaticResource invalidEntryStyle}"
                                           MinimumValue="1.0"
                                           MaximumValue="10.0"
                                           MinimumDecimalPlaces="1"
                                           MaximumDecimalPlaces="3" />
        </Entry.Behaviors>
    </Entry>
</ContentPage>

RequiredStringValidationBehavior

指定した文字列が入力されているかどうかのバリデーションを行うビヘイビアです。RequiredStringで対象の文字列を設定します。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.RequiredStringValidationBehaviorPage"
             Title="RequiredStringValidationBehavior">
    <ContentPage.Resources>
        <Style x:Key="invalidEntryStyle" TargetType="Entry">
            <Setter Property="TextColor" Value="Red" />
        </Style>
    </ContentPage.Resources>

    <Entry VerticalOptions="Center" Margin="32, 0">
        <Entry.Behaviors>
            <xct:RequiredStringValidationBehavior InvalidStyle="{StaticResource invalidEntryStyle}"
                                                  RequiredString="hoge" />
        </Entry.Behaviors>
    </Entry>
</ContentPage>

TextValidationBehavior

文字列の長さや、正規表現によるバリデーションを行うビヘイビアです。MinimumLengthで最小の長さ、MaximumLength最大の長さ、RegexPatternで正規表現のパターンを設定できます。また、DecorationFlagsを設定することで、文字列を加工した後にバリデーションを行うことが可能です。DecorationFlagsは以下のものが用意されています。

  • TrimStart （先頭の空白文字を削除）
  • TrimEnd （末尾の空白文字を削除）
  • Trim （先頭と末尾の空白文字を削除）
  • NullToEmpty （nullを空文字に変換）
  • ReduceWhiteSpaces （空白文字を削除）

ちなみに、CharactersValidationBehavior、EmailValidationBehavior、UriValidationBehaviorは、TextValidationBehaviorのサブクラスです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.TextValidationBehaviorPage"
             Title="TextValidationBehavior">
    <ContentPage.Resources>
        <Style x:Key="invalidEntryStyle" TargetType="Entry">
            <Setter Property="TextColor" Value="Red" />
        </Style>
    </ContentPage.Resources>

    <Entry VerticalOptions="Center" Margin="32, 0">
        <Entry.Behaviors>
            <xct:TextValidationBehavior InvalidStyle="{StaticResource invalidEntryStyle}"
                                        MinimumLength="4"
                                        MaximumLength="8"
                                        DecorationFlags="Trim"
                                        RegexPattern="^\w+$" />
        </Entry.Behaviors>
    </Entry>
</ContentPage>

UriValidationBehavior

URIのフォーマットであるかどうかのバリデーションを行うビヘイビアです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.UriValidationBehaviorPage"
             Title="UriValidationBehavior">
    <ContentPage.Resources>
        <Style x:Key="invalidEntryStyle" TargetType="Entry">
            <Setter Property="TextColor" Value="Red" />
        </Style>
    </ContentPage.Resources>

    <Entry VerticalOptions="Center" Margin="32, 0">
        <Entry.Behaviors>
            <xct:UriValidationBehavior InvalidStyle="{StaticResource invalidEntryStyle}" />
        </Entry.Behaviors>
    </Entry>
</ContentPage>

コンバーター

BoolToObjectConverter

bool値を任意の値に変換するコンバーターです。TrueObjectにはtrueの時の値、FalseObjectにはfalseの時の値を設定します。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.BoolToObjectConverterPage"
             Title="BoolToObjectConverter">
    <ContentPage.Resources>
        <xct:BoolToObjectConverter x:Key="boolToObjectConverter"
                                   x:TypeArguments="x:String"
                                   TrueObject="真"
                                   FalseObject="偽"/>
        <x:Boolean x:Key="value">true</x:Boolean>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource boolToObjectConverter}}" />
</ContentPage>

ByteArrayToImageSourceConverter

byte配列をImageSourceに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.ByteArrayToImageSourceConverterPage"
             Title="ByteArrayToImageSourceConverter">
    <ContentPage.Resources>
        <xct:ByteArrayToImageSourceConverter x:Key="byteArrayToImageSourceConverter" />
    </ContentPage.Resources>

    <Image VerticalOptions="Center" HorizontalOptions="Center"
           Source="{Binding ImageBytes,
                    Converter={StaticResource byteArrayToImageSourceConverter}}" />
</ContentPage>

DateTimeOffsetConverter

DateTimeOffsetをDateTimeに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             x:Class="XamarinCommunityToolkitCatalog.Views.DateTimeOffsetConverterPage"
             Title="DateTimeOffsetConverter">
    <ContentPage.Resources>
        <xct:DateTimeOffsetConverter x:Key="dateTimeOffsetConverter" />
        <sys:DateTimeOffset x:Key="value">
            <x:Arguments>
                <x:Int32>2020</x:Int32>
                <x:Int32>12</x:Int32>
                <x:Int32>16</x:Int32>
                <x:Int32>0</x:Int32>
                <x:Int32>0</x:Int32>
                <x:Int32>0</x:Int32>
                <x:TimeSpan />
            </x:Arguments>
        </sys:DateTimeOffset>
    </ContentPage.Resources>

    <DatePicker VerticalOptions="Center" HorizontalOptions="Center"
                Date="{Binding ., Source={StaticResource value},
                       Converter={StaticResource dateTimeOffsetConverter}}" />
</ContentPage>

DoubleToIntConverter

doubleをintに変換するコンバーターです。Math.Roundで丸められます。パラメーターで、乗数を指定することもできます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.DoubleToIntConverterPage"
             Title="DoubleToIntConverter">
    <ContentPage.Resources>
        <xct:DoubleToIntConverter x:Key="doubleToIntConverter" />
        <x:Double x:Key="value">1.25</x:Double>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource doubleToIntConverter},
                  ConverterParameter=10}" />
</ContentPage>

EqualConverter

パラメーターの値と等しければtrue、違っていればfalseに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.EqualConverterPage"
             Title="EqualConverter">
    <ContentPage.Resources>
        <xct:EqualConverter x:Key="equalConverter" />
        <x:String x:Key="value">value</x:String>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource equalConverter},
                  ConverterParameter=value}" />
</ContentPage>

IndexToArrayItemConverter

パラメーターに設定したArrayのインデックスの値に変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.IndexToArrayItemConverterPage"
             Title="IndexToArrayItemConverter">
    <ContentPage.Resources>
        <xct:IndexToArrayItemConverter x:Key="indexToArrayItemConverter" />
        <x:Int32 x:Key="value">1</x:Int32>
        <x:Array x:Key="array" Type="{x:Type x:String}">
            <x:String>value0</x:String>
            <x:String>value1</x:String>
            <x:String>value2</x:String>
        </x:Array>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource indexToArrayItemConverter},
                  ConverterParameter={StaticResource array}}" />
</ContentPage>

IntToBoolConverter

0ならfalse、0以外ならtrueに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.IntToBoolConverterPage"
             Title="IntToBoolConverter">
    <ContentPage.Resources>
        <xct:IntToBoolConverter x:Key="intToBoolConverter" />
        <x:Int32 x:Key="value">0</x:Int32>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource intToBoolConverter}}" />
</ContentPage>

InvertedBoolConverter

trueならfalse、falseならtrueに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.InvertedBoolConverterPage"
             Title="InvertedBoolConverter">
    <ContentPage.Resources>
        <xct:InvertedBoolConverter x:Key="invertedBoolConverter" />
        <x:Boolean x:Key="value">true</x:Boolean>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource invertedBoolConverter}}" />
</ContentPage>

IsNotNullOrEmptyConverter

null、空文字、空白文字のみではない場合はtrue、それ以外はfalseに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.IsNotNullOrEmptyConverterPage"
             Title="IsNotNullOrEmptyConverter">
    <ContentPage.Resources>
        <xct:IsNotNullOrEmptyConverter x:Key="isNotNullOrEmptyConverter" />
        <x:String x:Key="value">　</x:String>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource isNotNullOrEmptyConverter}}" />
</ContentPage>

IsNullOrEmptyConverter

null、空文字、空白文字のみである場合はtrue、それ以外はfalseに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.IsNullOrEmptyConverterPage"
             Title="IsNullOrEmptyConverter">
    <ContentPage.Resources>
        <xct:IsNullOrEmptyConverter x:Key="isNullOrEmptyConverter" />
        <x:String x:Key="value">　</x:String>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource isNullOrEmptyConverter}}" />
</ContentPage>

ItemSelectedEventArgsConverter

ListViewのItemSelectedイベントの引数であるSelectedItemChangedEventArgsを、そのプロパティであるSelectedItemの値に変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.ItemSelectedEventArgsConverterPage"
             Title="ItemSelectedEventArgsConverter">
    <ContentPage.Resources>
        <xct:ItemSelectedEventArgsConverter x:Key="itemSelectedEventArgsConverter" />
    </ContentPage.Resources>

    <ListView>
        <ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>value0</x:String>
                <x:String>value1</x:String>
                <x:String>value2</x:String>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.Behaviors>
            <xct:EventToCommandBehavior EventName="ItemSelected"
                                        Command="{Binding ItemSelectedCommand}"
                                        EventArgsConverter="{StaticResource itemSelectedEventArgsConverter}" />
        </ListView.Behaviors>
    </ListView>
</ContentPage>

ItemTappedEventArgsConverter

ListViewのItemTappedイベントの引数であるItemTappedEventArgsを、そのプロパティであるItemの値に変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.ItemTappedEventArgsConverterPage"
             Title="ItemTappedEventArgsConverter">
    <ContentPage.Resources>
        <xct:ItemTappedEventArgsConverter x:Key="itemTappedEventArgsConverter" />
    </ContentPage.Resources>

    <ListView>
        <ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>value0</x:String>
                <x:String>value1</x:String>
                <x:String>value2</x:String>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.Behaviors>
            <xct:EventToCommandBehavior EventName="ItemTapped"
                                        Command="{Binding ItemTappedCommand}"
                                        EventArgsConverter="{StaticResource itemTappedEventArgsConverter}" />
        </ListView.Behaviors>
    </ListView>
</ContentPage>

ListIsNotNullOrEmptyConverter

nullではない、もしくは、IEnumerableが空ではない場合はtrue、それ以外はfalseに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:scg="clr-namespace:System.Collections.Generic;assembly=mscorlib"
             x:Class="XamarinCommunityToolkitCatalog.Views.ListIsNotNullOrEmptyConverterPage"
             Title="ListIsNotNullOrEmptyConverter">
    <ContentPage.Resources>
        <xct:ListIsNotNullOrEmptyConverter x:Key="listIsNotNullOrEmptyConverter" />
        <scg:List x:Key="value" x:TypeArguments="x:Int32">
            <x:Int32>0</x:Int32>
        </scg:List>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource listIsNotNullOrEmptyConverter}}" />
</ContentPage>

ListIsNullOrEmptyConverter

null、もしくは、IEnumerableが空である場合はtrue、それ以外はfalseに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:scg="clr-namespace:System.Collections.Generic;assembly=mscorlib"
             x:Class="XamarinCommunityToolkitCatalog.Views.ListIsNullOrEmptyConverterPage"
             Title="ListIsNullOrEmptyConverter">
    <ContentPage.Resources>
        <xct:ListIsNullOrEmptyConverter x:Key="listIsNullOrEmptyConverter" />
        <scg:List x:Key="value" x:TypeArguments="x:Int32">
            <x:Int32>0</x:Int32>
        </scg:List>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource listIsNullOrEmptyConverter}}" />
</ContentPage>

ListToStringConverter

IEnumerableの各値を文字列にして、Separatorもしくはパラメーターで指定した区切り文字を使用して連結した文字列に変換するコンバーターです。区切り文字は、パラメーターで指定した方が優先されます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:scg="clr-namespace:System.Collections.Generic;assembly=mscorlib"
             x:Class="XamarinCommunityToolkitCatalog.Views.ListToStringConverterPage"
             Title="ListToStringConverter">
    <ContentPage.Resources>
        <xct:ListToStringConverter x:Key="listToStringConverter"
                                   Separator=", " />
        <scg:List x:Key="value" x:TypeArguments="x:String">
            <x:String>value0</x:String>
            <x:String>value1</x:String>
            <x:String>value2</x:String>
        </scg:List>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource listToStringConverter}}" />
</ContentPage>

MultiConverter

複数のコンバーターを順番に適用して変換するコンバーターです。MultiConverterParameterで、適用するコンバーター毎にパラメーターを設定することができます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.MultiConverterPage"
             Title="MultiConverter">
    <ContentPage.Resources>
        <xct:MultiConverter x:Key="multiConverter" >
            <xct:EqualConverter />
            <xct:BoolToObjectConverter x:TypeArguments="x:String"
                                       TrueObject="同じ"
                                       FalseObject="違う" />
        </xct:MultiConverter>
        <x:Array x:Key="multiParams"
                 Type="{x:Type xct:MultiConverterParameter}" >
            <xct:MultiConverterParameter
                ConverterType="{x:Type xct:EqualConverter}"
                Value="value" />
        </x:Array>
        <x:String x:Key="value">value</x:String>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource multiConverter},
                  ConverterParameter={StaticResource multiParams}}" />
</ContentPage>

NotEqualConverter

パラメーターの値と違っていたらtrue、等しければfalseに変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.NotEqualConverterPage"
             Title="NotEqualConverter">
    <ContentPage.Resources>
        <xct:NotEqualConverter x:Key="notEqualConverter" />
        <x:String x:Key="value">value</x:String>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource notEqualConverter},
                  ConverterParameter=value}" />
</ContentPage>

StateToBooleanConverter

StateToCompareや、パラメーターで指定したLayoutStateと等しければtrue、違っていればfalseに変換するコンバーターです。StateToCompareとパラメーター両方指定した場合は、パラメーターが優先されます。LayoutStateは、Xamarin Community Toolkitの機能であるStateLayoutで使用されます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.StateToBooleanConverterPage"
             Title="StateToBooleanConverter">
    <ContentPage.Resources>
        <xct:StateToBooleanConverter x:Key="stateToBooleanConverter"
                                     StateToCompare="Success" />
        <x:Static x:Key="value" Member="xct:LayoutState.Error" />
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource stateToBooleanConverter}}" />
</ContentPage>

TextCaseConverter

文字列を大文字や小文字に変換するコンバーターです。Typeまたは、パラメーターで、大文字にする場合はUpper、小文字にする場合はLowerと指定します。Typeとパラメーター両方指定した場合は、パラメーターが優先されます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkitCatalog.Views.TextCaseConverterPage"
             Title="TextCaseConverter">
    <ContentPage.Resources>
        <xct:TextCaseConverter x:Key="textCaseConverter"
                               Type="Upper" />
        <x:String x:Key="value">Value</x:String>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource textCaseConverter}}" />
</ContentPage>

TimeSpanToDoubleConverter

TimeSpanをそれが表す秒数の合計（TotalSeconds）に変換するコンバーターです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             x:Class="XamarinCommunityToolkitCatalog.Views.TimeSpanToDoubleConverterPage"
             Title="TimeSpanToDoubleConverter">
    <ContentPage.Resources>
        <xct:TimeSpanToDoubleConverter x:Key="timeSpanToDoubleConverter" />
        <sys:TimeSpan x:Key="value">
            <x:Arguments>
                <x:Int32>12</x:Int32>
                <x:Int32>30</x:Int32>
                <x:Int32>10</x:Int32>
            </x:Arguments>
        </sys:TimeSpan>
    </ContentPage.Resources>

    <Label VerticalOptions="Center" HorizontalOptions="Center"
           Text="{Binding ., Source={StaticResource value},
                  Converter={StaticResource timeSpanToDoubleConverter}}" />
</ContentPage>

おわりに

Xamarin Community Toolkitのビヘイビア、コンバーターを紹介しました。自分で書こうと思えば簡単に書けるものも多いですが、あるものは積極的に使っていけばいいと思います。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
1