UWP(Universal Windows Platform)はMicrosoftが提供する様々な環境下で動作するアプリを開発可能な共通プラットフォームと呼べるものである.
UWPでは複数のプログラミング言語,UIをサポートするが,ここでは
での実装を行う.開発環境は,
を使用していく.
Visual Studioでは,複数のソースコードをプロジェクトが束ね,複数のプロジェクトを束ねるものがソリューションと呼ばれる.
簡単なアプリケーションを作成する場合は,1つのソリューション内に1つのプロジェクト,という構成になることが多い.
以下のテンプレートプログラムを用いて,簡易なスケッチ入力アプリを実装する.
https://github.com/tomoakimoriya/Kisozemi
Gitが分かるものはClone,もしくはZipでダウンロードし展開すること.
.slnファイルを開くと,デフォルトでソリューションプラットフォームがARMとなっているため,x86へ変更しておく.
ビルド,実行は上部の再生ボタンを押せばよい.もしくは[デバッグ]-[デバッグの開始]または,F5キー.
一回,ビルド,実行し,必要なモジュールファイルを復元しておく(インターネットへの接続が可能な状態にしておくこと).
ソリューション内のプロジェクト,プロジェクト内のファイル一覧はソリューションエクスプローラーで参照できる.
表示されていない場合は,[表示]-[ソリューションエクスプローラー]で表示.
ウインドウ(GUI)の設計は,ソリューションエクスプローラーからMainPage.xamlを開く.
XAML(Extensible Application Markup Language)では,XMLのようにタグを記述することでUI部品を配置していく.
GUIを持つアプリケーションではイベントが起きた際の処理を記述していくことが中心となる.
簡単な例を実装していく.
テンプレートととなるプログラムでは,ウインドウ上に出し入れできるバー(ナビゲーションバーのようなもの)を実現できる,SplitViewが配置されている.
デフォルトでは常に表示されているが,左上のハンバーガーボタン(「三」のボタン)を押して,バーの表示,非表示を切り替えるようにする.
XAMLの編集画面から「ToggleButton」を選択し,右下のプロパティから雷マークをクリック,そこから,Clickの欄をダブルクリックする.
コード記述画面に移動するので,以下を書く.
private void ToggleButton_Click(object sender, RoutedEventArgs e) { Splitter.IsPaneOpen = !Splitter.IsPaneOpen; //追加 }
これで,ボタンを押すとバーの表示,非表示が切り替えできる.
UWPでは,様々な環境で動作するアプリケーションを想定しているため,PCにおけるマウス入力はPointer( Pressed, Released, etc.)〜と名付けられているイベントで,タッチなども含めて情報を取得できる.
Pointer関連のイベントでは,引数にPointerPointerRoutedEventArgs型のインスタンスがシステムから渡されてくるので,そこから各種情報を取得できる.
例えば,カーソルやタッチされた位置の座標は,GetCurrentPointメソッドで取得できる.
var p = e.GetCurrentPoint(MainCanvas); //引数に座標の基準となるコントロールを指定する //p.PositionがPointer(マウス,タッチ)の座標となる.
各情報の取得例:
以下は,今回のテンプレートプログラム用に直したコード:
//プログラム上部の //using System.IO; をコメントアウト //using Windows.UI; を追加 //using Windows.UI.Xaml.Shapes; を追加 PathFigure myPathFigure = new PathFigure(); myPathFigure.StartPoint = new Point(10, 50); LineSegment myLineSegment = new LineSegment(); myLineSegment.Point = new Point(200, 70); PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection(); myPathSegmentCollection.Add(myLineSegment); myPathFigure.Segments = myPathSegmentCollection; PathFigureCollection myPathFigureCollection = new PathFigureCollection(); myPathFigureCollection.Add(myPathFigure); PathGeometry myPathGeometry = new PathGeometry(); myPathGeometry.Figures = myPathFigureCollection; Path myPath = new Path(); myPath.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0)); myPath.StrokeThickness = 1; myPath.Data = myPathGeometry; MainCanvas.Children.Add(myPath);
クリックするごとに直線を引けるようにせよ.