UWP(ユニバーサルWindowsプラットフォーム)アプリのHello World的なもの(ボタンを押すと”こんにちは!”って表示される)を作ってみた。
Visual Studio 2015を立ち上げる。
ファイル - 新規作成 - プロジェクトで
空白のアプリ(ユニバーサルWindows)を選んでプロジェクト名をHelloWorldとする。
プラットフォームのバージョンを選択する画面が出るけどデフォルトでいいかな。
これでアプリの雛形が作成される。
ソリューションエクスプローラでMainPage.xamlをダブルクリックしてデザイナーを開く。
ラベル(TextBlock)とボタンを適当に配置するw
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の設定を選ぶ。
DataContextの種類でDesignInstanceを選んでMainPageViewModelを選択。IsDesignTimeCreatableにチェックを入れる。
TextBlockを選択してプロパティでTextの右にある四角いやつ(なんて言うんだ)をクリックする。
ポップアップメニューが出るのでデータバインドの作成を選択する。
データバインディックを作成画面でMessageを選択する。
これで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の横のボタンを押してデータバインドの作成を選ぶ。
データバインディングを作成画面でButtonCommandを選択する。
これで完了。
実行してButtonを押すと"こんにちは!"って表示される。
コメント