[.NET MAUI][Editor] Editor の基本使用方法

本記事の概要

Editor 複数行のテキスト入力や編集をすることができるコントロールです。似たようなコントロールには Entry があります。

この記事では Editor の基本使用方法について説明をします。

公式サイト情報はコチラを参照してください。

Editor の基本使用例

Editor の基本使用方法

Editor は複数行のテキスト入力および編集をするためのコントロールで、 XAML では <Editor> を使用します。

入力されたテキストは Text プロパティで参照することができます。また、あらかじめ Text プロパティに文字列を代入しておくことで、その文字列を表示させることもできます。

以下は、Editor に「ABCDEFG 改行 HIJKLMN」 を表示する例です。

以下は、[テキストを取得] ボタンをクリックすると、入力されているテキストを取得して、ラベルに表示します。

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="MauiAppSample.MainPage">

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Editor x:Name="myEditor" Text="ABCDEFG\nHIJKLMN" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

C# の例

public MainPage()
{
    InitializeComponent();

    myEditor.Text = "ABCDEFG\nHIJKLMN";
}

Editor の基本使用例

入力されているテキストを取得する例

以下は、Editor に入力されたテキストを取得する例です。

画面には、Editor、Label、Button の３つのコントロールを配置しており、Button をクリックすると、Editor に入力されている テキストを取得して Label に表示します。
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="MauiAppSample.MainPage">

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Editor x:Name="myEditor" />
            <Button Text="テキストを取得" Clicked="Button_Clicked"/>
            <Label x:Name="myLabel" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

C# の例

private void Button_Clicked(object sender, EventArgs e)
{
    myLabel.Text = myEditor.Text;
}

テキストを取得する例

.NET MAUI Tips

本サイトでまとめている .NET MAUI Tips の一覧はこちらから確認できます。

Please follow and like us: