Visual Studioの入手

Visual Studio Community 2022 (無料)もしくはEnterpriseも利用できる.

https://visualstudio.microsoft.com/ja/downloads/

Enterpriseは電大生の場合,Azure Portalに学籍メールでログインすることで取得可能

https://portal.azure.com/

一番上の検索欄「Education」を入力→検索結果からEducationページを開く→左メニュー「ソフトウェア」→Education資格があるか確認後→ソフトウェア一覧から「Visual Studio Enterprise 2019」 を選択しキーを取得

Windows10or11のバージョン

Windows Updateにより,Windows10を最新のバージョンにしておくことが好ましい,

現在(2021/4/25時点)「20H2」.

Visual Studioのインストール

Visual Studioインストール時,「ワークロード」で本講義に必要な「ユニバーサル Windows プラットフォーム開発」にチェックを入れること.

vsuwp.png

開発者モード

VisualStudioで作成したUWPアプリをローカルPCへのインストール,実行を可能とするため,Windows10の「開発者モード」を有効にする.(Visual Studioからも実行時,開発者モードが有効でない場合,有効にするか問われる)

developermode.png

UWP導入

UWP(Universal Windows Platform)はMicrosoftが提供する様々な環境下で動作するアプリを開発可能な共通プラットフォームと呼べるものである.

使用言語

UWPでは複数のプログラミング言語,UIをサポートするが,ここでは

での実装を行う.開発環境は,

を使用していく.

Visual Studioのフォルダ,ファイル構成

Visual Studioでは,複数のソースコードをプロジェクトが束ね,複数のプロジェクトを束ねるものがソリューションと呼ばれる.

簡単なアプリケーションを作成する場合は,1つのソリューション内に1つのプロジェクト,という構成になることが多い.

solution.png

プログラムテンプレート

以下のテンプレートプログラムを用いて,簡易なスケッチ入力アプリを実装する.

https://github.com/tomoakimoriya/Kisozemi

Gitが分かるものはClone,もしくはZipでダウンロードし展開すること.

最初に行うこと

.slnファイルを開くと,デフォルトでソリューションプラットフォームがARMとなっているため,x86へ変更しておく.

changeplatform.png

ビルド・実行

ビルド,実行は上部の再生ボタンを押せばよい.もしくは[デバッグ]-[デバッグの開始]または,F5キー.

build.png

次に行っておくこと

一回,ビルド,実行し,必要なモジュールファイルを復元しておく(インターネットへの接続が可能な状態にしておくこと).

ソリューションエクスプローラー

ソリューション内のプロジェクト,プロジェクト内のファイル一覧はソリューションエクスプローラーで参照できる.

表示されていない場合は,[表示]-[ソリューションエクスプローラー]で表示.

explorer.png

XAML

ウインドウ(GUI)の設計は,ソリューションエクスプローラーからMainPage.xamlを開く.

xaml.png

XAML(Extensible Application Markup Language)では,XMLのようにタグを記述することでUI部品を配置していく.

イベント

GUIを持つアプリケーションではイベントが起きた際の処理を記述していくことが中心となる.

簡単な例を実装していく.

テンプレートととなるプログラムでは,ウインドウ上に出し入れできるバー(ナビゲーションバーのようなもの)を実現できる,SplitViewが配置されている.

デフォルトでは常に表示されているが,左上のハンバーガーボタン(「三」のボタン)を押して,バーの表示,非表示を切り替えるようにする.

XAMLの編集画面から「ToggleButton」を選択し,右下のプロパティから雷マークをクリック,そこから,Clickの欄をダブルクリックする.

buttonevent.png

コード記述画面に移動するので,以下を書く.

       private void ToggleButton_Click(object sender, RoutedEventArgs e)
       {
           Splitter.IsPaneOpen = !Splitter.IsPaneOpen; //追加
       }

これで,ボタンを押すとバーの表示,非表示が切り替えできる.

Pointer

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);

課題

クリックするごとに直線を引けるようにせよ. 上記の「線を描く」を使って,クリックされたら決まった場所に線を引く,をMainCanvasのPointerReleasedイベントに実装できればOK.

kadai1.gif

課題提出方法

招待されているBoxアップロードフォルダ「情報メディア基礎ゼミ(森谷)」,「第1回」へ,完成させた課題のソリューションフォルダをZIP圧縮し,ファイルを以下の名前でアップロードしてください.

ファイル名:XXFIXXX_1st.zip(例:18FI999_1st.zip)

提出締め切り:6月10日(金) 23:59

BOXアップロードフォルダの招待メールが来ていない方は森谷までメール連絡ください.


添付ファイル: filedevelopermode.png 308件 [詳細] filevsuwp.png 316件 [詳細] filekadai1.gif 817件 [詳細] filebuttonevent.png 865件 [詳細] filexaml.png 840件 [詳細] fileexplorer.png 783件 [詳細] filebuild.png 781件 [詳細] filesolution.png 790件 [詳細] filechangeplatform.png 796件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-06-06 (月) 11:55:51