XamarinのXAMLで条件分岐を行う方法

Programming
目次

概要

Xamarinでは、XAMLという形式を使ってラベルやテキストボックス、画像などの要素を配置することができます。

ここでは、そのXAMLを使って、条件分岐を行い表示を変更する方法について紹介します。

環境

  • Xamarin.Forms
  • Visual Studio 2019 for Mac

条件分岐

XAMLで表示する内容は、直接XAMLに書くこともできますが、データバインディングによって変数と紐付けてその変数の内容を表示するということができます。

今回の条件分岐では、その変数の内容に応じて表示を変更するということについて説明します。

例として、Labelを表示するかしないかをIsDisplayというプロパティの内容で変える例を示します。

<Label
    Text="{Binding LabelText}">
    <Label.Triggers>
        <DataTrigger
            TargetType="Label"
            Binding="{Binding IsDisplay}"
            Value="false">
            <Setter Property="IsEnabled" Value="False" />
            <Setter Property="IsVisible" Value="False" />
        </DataTrigger>
    </Label.Triggers>
</Label>

この例では、IsDisplayがfalseの際に、IsEnabledとIsVisibleをFalseとします。つまり、IsDisplayがfalseの際に、このラベルは表示されなくなります。

やり方はそれほど難しくありません。

タグ名.Triggersというタグを記述し、その中にDataTriggerタグを記述します。DataTriggerタグでは、TargetTypeに操作するタグの名前を記述して、Bindingにデータバインディングしたい変数名、Valueに次のSetterタグの内容を適用する際の値を指定します。Setterタグでは、Bindingした変数の値とValueの値が同じ場合に適用される内容をPropertyとValueで記述します。

今回、DataTriggerを一つだけ記述しましたが、複数並べて記述することができ、条件分岐を重ねることができます。

もし、ANDのようなことをしたい場合は、次のようにします。

<Label
    Text="{Binding LabelText}">
    <Label.Triggers>
        <DataTrigger
            TargetType="Label"
            Binding="{Binding IsDisplay}"
            Value="false">
            <Setter Property="IsEnabled" Value="False" />
            <Setter Property="IsVisible" Value="False" />
        </DataTrigger>

        <MultiTrigger TargetType="Label">
            <MultiTrigger.Conditions>
                <BindingCondition
                    Binding="{IsDisplay}"
                    Value="True" />
                <BindingCondition
                    Binding="{Binding LabelText, Path=Text.Length}"
                    Value="0" />
            </MultiTrigger.Conditions>
            <Setter Property="IsEnabled" Value="False" />
            <Setter Property="IsVisible" Value="False" />
        </MultiTrigger>
    </Label.Triggers>
</Label>

この例では、MultiTriggerというものを使って、IsDisplayがTrueの場合であっても、LabelTextの文字数が0の場合はラベルを表示しません。

使い方としては、DataTriggerと似たような使い方となっています。

このようなトリガー(Trigger)と呼ばれるものを使って、Xamlでは条件分岐を行うことができます。

さいごに

私の感覚ですが、XAMLを使うとコードよりも楽にデザインができるように感じています。

また、条件分岐はコードの方でもできますが、今回紹介したトリガーを使わない時には、要素を探したりする必要があり、少々面倒です。

XAMLを使って、なるべく楽にコーディングできるようにしていきましょう。