あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

Xamarin.Forms入門 キホンのキ - イベント

イベント

Xamarin.Forms でコントロールのイベントが起きた時の記述方法は、XAML 側にイベントとコードビハインドのメソッド名を記述します。そして、コードビハインド側でイベントの記述をしていきます。

言葉で説明されてもピンとこないと思いますので、具体例を見ていきましょう。

ボタンのクリックイベント

以下の 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:HelloWorld2" 
             x:Class="HelloWorld2.MainPage">
    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">         
        <Label x:Name="label"
               Text="Welcome to Xamarin Form" />
        
        <Button Text="Click" Clicked="Handle_Clicked" />
    </StackLayout>
</ContentPage>

コードビハインドのメソッドは、以下のようになっています。

    void Handle_Clicked(object sender, System.EventArgs e)
    {
        label.Text = "Button was clicked!";
    }

ボタンをクリックした時に、Handle_Clicked が実行されるようになっています。

では、実行してみましょう。

以下は、ボタンクリック前の画面です。

ボタンをクリック後の画面は以下のようになり、正しくラベルの文字が書き換わっています。

スライダーの変更イベント

イベントの記述方法は先ほどの例の通りなのですが、もう少し具体例を見てみましょう。

今度はスライダーを操作した時にラベルの文字を変更するものになります。

<?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:HelloWorld2" 
             x:Class="HelloWorld2.MainPage">
    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">         
        <Label x:Name="label"
               Text="Welcome to Xamarin Form" />
        
        <Slider ValueChanged="Handle_ValueChanged" />
    </StackLayout>
</ContentPage>

コードビハインドのメソッドは以下のようになります。

    void Handle_ValueChanged(object sender, Xamarin.Forms.ValueChangedEventArgs e)
    {
        label.Text = string.Format("Values is {0:F2}", e.NewValue);
    }

スライダーの値は、e.NewValue に double 型で入ってくるので、string.Format で整形しています。

では、実行してみましょう。

以下は、スライダー操作前の画面です。

スライダー操作後の画面は以下のようになり、想定通りですね。

連載目次