takataka430’s blog

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

【Xamarin.Forms】Behaviorを使って入力値検証(その2:ボタンと連動させる)

前回の記事ではEntryの文字の色を変えるところまでやりました。今回はそれに加えてボタンと連携し、条件を満たす文字列の場合にのみボタンが有効になるようにしてみます。
  
目標は「Entryに入力した文字列がhttps://で始まれば文字は黒、ボタンは有効化される。そうでない場合は文字は赤、ボタンは有効化されない」です。
  
これを実現するため、Xamarin.FormsのMessagingCenterという機能を使いました。

docs.microsoft.com

MessagingCenterとは、簡単に言いますとメッセージの送受信ができる機能です。Sendでメッセージを送信し、Subscribeでメッセージを受信して処理を行います。

では実際にどのようにコードを書いたのか見てみましょう。(前回の記事からの変更部分のみコメントをしています)   
  
UrlValidationBehavior.cs

using System;
using Xamarin.Forms;

namespace XF_EntryCheck
{
    public class UrlValidationBehavior : Behavior<Entry>
    {
        //設定した条件を満たすかどうか判定
        public bool IsValid { get; set; }

        protected override void OnAttachedTo(Entry bindable)
        {
            bindable.TextChanged += OnEntryTextChanged;
            base.OnAttachedTo(bindable);
        }

        protected override void OnDetachingFrom(Entry bindable)
        {
            bindable.TextChanged -= OnEntryTextChanged;
            base.OnDetachingFrom(bindable);
        }

        void OnEntryTextChanged(object sender, TextChangedEventArgs args)
        {
            var m = args.NewTextValue.StartsWith("https://", StringComparison.Ordinal);

            ((Entry)sender).TextColor = m ? Color.Default : Color.Red;

            //判定結果を代入
            IsValid = m;

            //メッセージの送信
            MessagingCenter.Send(this, "IsValid");
        }
    }
}

  

MainPage.xaml

<?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"
               Placeholder="Entry">
            <Entry.Behaviors>
                <local:UrlValidationBehavior x:Name="urlValidationBehavior"/>
            </Entry.Behaviors>
        </Entry>
        
        <!-- ボタンを追加 -->
        <Button x:Name="button"    
                Text="Button"
                HorizontalOptions="Center" />
        
    </StackLayout>
</ContentPage>

  
MainPage.xaml.cs

using Xamarin.Forms;

namespace XF_EntryCheck
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            //メッセージの受信
            MessagingCenter.Subscribe<UrlValidationBehavior>(this, "IsValid", (sender) =>
            {
                EntryChanged();
            });
        }

        //ボタンの有効・無効を判定
        void EntryChanged()
        {
            button.IsEnabled = urlValidationBehavior.IsValid;
        }
    }
}

UrlValidationBehavior.csOnEntryTextChangedイベントが実行された時にメッセージを送信し、MainPageクラスがメッセージを受信後、EntryChanged()を実行するという動きになっています。

それでは早速動かしてみましょう。
目標は「Entryに入力した文字列がhttps://で始まれば文字は黒、ボタンは有効化される。そうでない場合は文字は赤、ボタンは有効化されない」です。

f:id:takataka430:20190216203054g:plain:w250

実現したかった動作は出来ていますね!

参考にしたページ

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