takataka430’s blog

Xamarin.Formsを中心に勉強したことのまとめを書きます

【Xamarin.Forms】Behaviorを使って入力値検証(その1:文字列の色を変える)

Xamarin.FormsでEntryに文字列を入力する時に入力した値によって色を変えたり下にあるボタンを有効化・無効化するという動きを実現したいと思い、方法を調べました。今回の記事は「条件によってEntryの文字列の色を変える」というのをやってみたいと思います。

やり方

これを実現するにはXamarin.FormsのBehaviorという機能を使えばできるようです。

docs.microsoft.com

早速実装してみましょう。

まずはBehaviorクラスを継承したUrlValidationBehaviorクラスを作ります。

using System;
using Xamarin.Forms;

namespace XF_EntryCheck
{
    public class UrlValidationBehavior : Behavior<Entry>
    {
       //ビヘイビアを追加
        protected override void OnAttachedTo(Entry bindable)
        {
            bindable.TextChanged += OnEntryTextChanged;
            base.OnAttachedTo(bindable);
        }

        //ビヘイビアを削除
        protected override void OnDetachingFrom(Entry bindable)
        {
            bindable.TextChanged -= OnEntryTextChanged;
            base.OnDetachingFrom(bindable);
        }

        //Entryに入力された値が変わった時の動作
        void OnEntryTextChanged(object sender, TextChangedEventArgs args)
        {
            //「https://」で始まる文字列かどうかを判定
            var m = args.NewTextValue.StartsWith("https://", StringComparison.Ordinal);

            //mがtrueなら文字はデフォルトの色、falseなら赤色に変更
            ((Entry)sender).TextColor = m ? Color.Default : Color.Red;
        }
    }
}

コメントにあるように、Entryに入力した文字列が「https://」で始まっていれば文字の色が黒に、そうでない場合は赤に変更する動きになります。

次に画面を作ります。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:XF_EntryCheck" 
             x:Class="XF_EntryCheck.MainPage">
    <StackLayout VerticalOptions="Center">
        <Entry x:Name="entry">

            <!-- このEntryに「UrlValidationBehavior」をアタッチする -->
            <Entry.Behaviors>
                <local:UrlValidationBehavior />
            </Entry.Behaviors>

        </Entry>
    </StackLayout>
</ContentPage>

これでEntryに入力した値は先ほど作ったUrlValidationBehaviorクラスで定義した通り、「https://」で始まっているかどうかによって文字の色が変わります。

動作確認

f:id:takataka430:20190214205151p:plain:w250    f:id:takataka430:20190214205148p:plain:w250

ちゃんと色が変わっていますね!

次にButtonと連携して、条件を満たしている場合のみButtonが有効化されるようにしたいと思います。・・・が、続きは次回にしたいと思います。 (以下、次回のリンクです)

takataka430.hatenablog.com

参考ページ

Xamarin.Forms のビヘイビアー - Xamarin | Microsoft Docs
Xamarin.Formsでビヘイビアーを使用するには? - Build Insider