UWP(ユニバーサルWindowsプラットフォーム)アプリのHello World的なもの(ボタンを押すと”こんにちは!”って表示される)を作ってみた。

Visual Studio 2015を立ち上げる。

ファイル - 新規作成 - プロジェクトで

001

空白のアプリ(ユニバーサルWindows)を選んでプロジェクト名をHelloWorldとする。

002

プラットフォームのバージョンを選択する画面が出るけどデフォルトでいいかな。
これでアプリの雛形が作成される。

ソリューションエクスプローラでMainPage.xamlをダブルクリックしてデザイナーを開く。
ラベル(TextBlock)とボタンを適当に配置するw

003

MainPageViewModel.csを追加する。このクラスにTextBlockに表示する文字列を入れとくメンバとButtonをクリックしたときに実行するメソッドを追加する。
データバインディングでTextBlockと接続するようにするので、MainPageViewModelクラスはINotifyPropertyChangedインターフェースを実装する。

        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged([CallerMemberName]string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public MainPageViewModel()
        {
            Message = "ボタンを押して!";
        }

        // 表示するメッセージ
        private string message;
        public string Message
        {
            get { return message; }
            set
            {
                if(message == value)
                {
                    return;
                }
                message = value;
                NotifyPropertyChanged();
            }
        }

こんなふうに実装する。で、いったんビルド。
とりあえず、TextBlockとMessageをバインドしてみる。
MainPage.xamlを開いて、ドキュメントアウトラインでPageを選んで、メニューの書式 - デザイン時のDataContextの設定を選ぶ。

004

DataContextの種類でDesignInstanceを選んでMainPageViewModelを選択。IsDesignTimeCreatableにチェックを入れる。

005

TextBlockを選択してプロパティでTextの右にある四角いやつ(なんて言うんだ)をクリックする。

006

ポップアップメニューが出るのでデータバインドの作成を選択する。
データバインディックを作成画面でMessageを選択する。

007

これでTextBlockのTextプロパティとMainPageViewModelのMessageプロパティが接続される。
MainPage.xaml.csのMainPageクラスでMainPageViewModelのインスタンスを作成してDataContextにセットしてやる。

    public sealed partial class MainPage : Page
    {
        private MainPageViewModel viewModel = new MainPageViewModel();

        public MainPage()
        {
            this.InitializeComponent();

            DataContext = viewModel;
        }
    }

これで実行すると、”ボタンをおして!”とボタンが表示される。

次にボタンを押した時の処理を追加する。
ICommandインターフェースを実装したクラスを作成し、そこに処理を書くことになる。ICommandのメンバは、

  • Executeメソッド コマンドの実行する。
  • CanExecuteメソッド コマンドが実行できるどうかを返す。
  • CanExecuteChangedイベント コマンドが実行できるかどうかが変化したときに呼び出す。
を実装することになる。

だが、コマンドごとにクラスを作るのはメンドーなので(ここでは1コしか作らなくていいんだけど)DelegateCommandクラスというのを作る。

    class DelegateCommand : ICommand
    {
        public Func<object, bool> CanExecuteHandler { get; set; }
        public Action<object> ExecuteHandler { get; set; }

        public event EventHandler CanExecuteChanged;

        public DelegateCommand(Action<object> execute, Func<object, bool> canExecute = null)
        {
            CanExecuteHandler = canExecute;
            ExecuteHandler = execute;
        }

        public bool CanExecute(object parameter)
        {
            var handler = CanExecuteHandler;
            if(handler != null)
            {
                return handler(parameter);
            }
            return true;
        }

        public void Execute(object parameter)
        {
            var handler = ExecuteHandler;
            if(handler != null)
            {
                handler(parameter);
            }
        }

        public void RaiseCanExecuteChanged()
        {
            var handler = CanExecuteChanged;
            if(handler != null)
            {
                handler(this, null);
            }
        }
    }

MainPageViewModelクラスをこんなふうにする。

    class MainPageViewModel : INotifyPropertyChanged
    {
	・・・省略
	
        public MainPageViewModel()
        {
            Message = "ボタンを押して!";
            ButtonCommand = new DelegateCommand(ButtonExecute);
        }

	・・・省略

        private void ButtonExecute(object param)
        {
            Message = "こんにちは!";
        }

        public ICommand ButtonCommand { get; set; }
    }

MainPage.xamlを開いて、ボタンを選択する。プロパティのCommandの横のボタンを押してデータバインドの作成を選ぶ。

008

データバインディングを作成画面でButtonCommandを選択する。

009

これで完了。
実行してButtonを押すと"こんにちは!"って表示される。