#author("2019-05-11T11:52:24+09:00","default:kyo-in","kyo-in")
*UWP導入 [#u31adc50]
#author("2019-05-11T14:29:40+09:00","default:kyo-in","kyo-in")
**UWP導入 [#u31adc50]
UWP(Universal Windows Platform)はMicrosoftが提供する様々な環境下で動作するアプリを開発可能な共通プラットフォームと呼べるものである.

-ユニバーサル Windows プラットフォーム (UWP) アプリとは - Windows UWP applications | Microsoft Docs~
https://docs.microsoft.com/ja-jp/windows/uwp/get-started/universal-application-platform-guide

*使用言語 [#xfcd9581]
**使用言語 [#xfcd9581]
UWPでは複数のプログラミング言語,UIをサポートするが,ここでは

・XAML UI
・C#
-XAML UI
-C#

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

-Visual Studio 2019

を使用していく.

**Visual Studioのフォルダ,ファイル構成 [#c4a0afc0]
Visual Studioでは,複数のソースコードをプロジェクトが束ね,複数のプロジェクトを束ねるものがソリューションと呼ばれる.

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

#ref(./solution.png,50%);


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

https://github.com/tomoakimoriya/Kisozemi

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

**最初に行うこと [#u26fbc2b]
.slnファイルを開くと,デフォルトでソリューションプラットフォームがARMとなっているため,x86へ変更しておく.

#ref(./changeplatform.png);

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

#ref(./build.png);

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

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

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

#ref(./explorer.png,50%);

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

#ref(./xaml.png,25%);

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

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

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

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

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

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

#ref(./buttonevent.png,25%);

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

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

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


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS