[.NET MAUI][Entry] Entryに数値が入力されている場合はボタンを押せるようにする

.NET MAUI

2023.11.27

概要
画面のデザイン
Entryのテキスト変更イベントを作成する

概要

[.NET MAUI][Entry] Entry の基本使用方法の記事に、Entryに数値が入力されている場合にボタンを押せるようにするには、どうすればよいかという質問がありましたのでサンプルコードを作成してみました。

画面のデザイン

画面には EntryとButtonを1つずつ配置します。

アプリ起動時はテキストが入力されていないので、Buttonは非活性(IsEnabled = false)にしておきます。

XAMLのコード例

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiSampleApp.MainPage">

    <ScrollView>
        <VerticalStackLayout Padding="30,0" Spacing="25">
            
            <Entry x:Name="myEntry" TextChanged="myEntry_TextChanged"/>
            <Button x:Name="myButton" Text="Button" IsEnabled="False" 
                    Clicked="myButton_Clicked"/>
            
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

画面デザインの例

Entryのテキスト変更イベントを作成する

「Entryに数値が入力されたか」を実現するには、そもそも「テキストが変更されたのか」を検知する必要があります。ですので、Entry の TextChangedイベントを作成します。

TextChangedイベントの中では、「Entryに入力されている文字数が0より大きいか(1文字以上か）」と「入力されている文字が数値か」を判断するif文を作成します。

数値かどうかを判断するのに、double.TryParseを使用しています。これにより整数だけではなく、小数が入力された場合も「数値が入力された」ことを判断することができます。

この条件が成り立ったときに Buttonを使用可能にすればよいことになりますので、コードは以下のようになります。

private void myEntry_TextChanged(object sender, TextChangedEventArgs e)
{
    // ボタンを非活性にしておく
    myButton.IsEnabled = false;

    // 入力されている文字数が0より大きい かつ 数値が入力されているか？
    if (myEntry.Text.Length > 0 && double.TryParse(myEntry.Text, out _))
    {
        myButton.IsEnabled = true;
    }
}