ユニバーサルアプリでボタンのクリック時に処理を実行する - ボタンのonclickイベントの実装 - UWP

ユニバーサルアプリでボタンのクリック時に処理を実行するコードの記述について紹介します。

概要

ユニバーサルアプリでボタンがクリックされたときに処理を実行するには、ボタンコントロールのClickイベントに処理を実装します。

プログラム例1

空のユニバーサルアプリを作成します。ソリューションエクスプローラで MainPage.xaml ファイルを開きます。下図のフォームデザイナが表示されます。


ツールボックスから[Button]コントロールをクリックして選択し、フォームデザイナにドラッグ&ドロップします。フォーム上にボタンコントロールが配置されます。


続いて、ツールボックスから[TextBlock]コントロールをクリックして選択し、フォームデザイナにドラッグ&ドロップします。フォーム上にTextBlockコントロールが配置されます。


フォームデザイナのボタンコントロールをクリックして選択し、プロパティウィンドウを表示します。デフォルトの設定では右下にプロパティウィンドウが表示されます。


プロパティウィンドウの上部の右上の[稲妻]のアイコンをクリックします。


プロパティウィンドウの表示がイベントの表示に切り替わります。イベントの一番上に表示されている"Click"イベントの右側のテキストボックスでダブルクリックします。


ボタンコントロールのClickイベントハンドラが作成され、コード編集画面が表示されます。

コード

下記のコードを記述します。実際に記述する部分は "void button_Click" メソッド部分になります。
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 を参照してください

namespace LabelAndButton
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

    private void button_Click(object sender, RoutedEventArgs e)
    {
      textBlock.Text = "ボタンがクリックされました。";
    }
  }
}

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。


[Button]をクリックします。TextBlockにメッセージが表示されます。

プログラム例2

空のユニバーサルアプリを作成します。ソリューションエクスプローラで MainPage.xaml ファイルを開きます。下図のフォームデザイナが表示されます。


ツールボックスから[Button]コントロールをクリックして選択し、フォームデザイナにドラッグ&ドロップします。フォーム上にボタンコントロールが配置されます。


フォームデザイナのボタンコントロールをクリックして選択し、プロパティウィンドウを表示します。デフォルトの設定では右下にプロパティウィンドウが表示されます。


プロパティウィンドウの上部の右上の[稲妻]のアイコンをクリックします。


プロパティウィンドウの表示がイベントの表示に切り替わります。イベントの一番上に表示されている"Click"イベントの右側のテキストボックスでダブルクリックします。


ボタンコントロールのClickイベントハンドラが作成され、コード編集画面が表示されます。

コード

下記のコードを記述します。実際に記述する部分は "void button_Click" メソッド部分になります。

注意

イベントハンドラのメソッド部分に async を追加で記述します。記述し忘れないようにしてください。(記述しない場合ビルドエラーになります。)
private void button_Click(object sender, RoutedEventArgs e)
private async void button_Click(object sender, RoutedEventArgs e)

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Popups;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 を参照してください

namespace MessageDialogDemo
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

    private async void button_Click(object sender, RoutedEventArgs e)
    {
      MessageDialog md = new MessageDialog("ボタンがクリックされました。");
      await md.ShowAsync();
    }
  }
}

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。


[Button]をクリックします。下図のダイアログボックスが表示されます。


ボタンクリックにより、処理をするプログラムを作成できました。

著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2017-09-09
作成日: 2016-04-25
iPentec all rights reserverd.