情報メディア基礎ゼミ/2019/第1回
をテンプレートにして作成
開始行:
**Visual Studioの入手 [#zdba52d5]
Visual Studio Community 2022 (無料)もしくはEnterpriseも...
https://visualstudio.microsoft.com/ja/downloads/
Enterpriseは電大生の場合,Azure Portalに学籍メールでログ...
https://portal.azure.com/
一番上の検索欄「Education」を入力→検索結果からEducationペ...
**Windows10(11)のバージョン [#f6ace720]
Windows Updateにより,Windows10(11)を最新のバージョンにし...
**Visual Studioのインストール [#df298e34]
Visual Studioインストール時,「ワークロード」で本講義に必...
#ref(./vsuwp.png);
**開発者モード [#s79f1c55]
VisualStudioで作成したUWPアプリをローカルPCへのインストー...
#ref(./developermode.png);
**UWP導入 [#u31adc50]
UWP(Universal Windows Platform)はMicrosoftが提供する様々...
-ユニバーサル Windows プラットフォーム (UWP) アプリとは -...
https://docs.microsoft.com/ja-jp/windows/uwp/get-started/...
**使用言語 [#xfcd9581]
UWPでは複数のプログラミング言語,UIをサポートするが,ここ...
-XAML UI
-C#
での実装を行う.開発環境は,
-Visual Studio 2022
を使用していく.
**Visual Studioのフォルダ,ファイル構成 [#c4a0afc0]
Visual Studioでは,複数のソースコードをプロジェクトが束ね...
簡単なアプリケーションを作成する場合は,1つのソリューショ...
#ref(./solution.png,50%);
**プログラムテンプレート [#rae71759]
以下のテンプレートプログラムを用いて,簡易なスケッチ入力...
https://github.com/tomoakimoriya/Kisozemi
Gitが分かるものはClone,もしくはZipでダウンロードし展開す...
**最初に行うこと [#u26fbc2b]
.slnファイルを開くと,デフォルトでソリューションプラット...
#ref(./changeplatform.png);
**ビルド・実行 [#o5ede78c]
ビルド,実行は上部の再生ボタンを押せばよい.もしくは[デバ...
#ref(./build.png);
**次に行っておくこと [#m7d6c9e8]
一回,ビルド,実行し,必要なモジュールファイルを復元して...
**ソリューションエクスプローラー [#n65222dd]
ソリューション内のプロジェクト,プロジェクト内のファイル...
表示されていない場合は,[表示]-[ソリューションエクスプロ...
#ref(./explorer.png,50%);
**XAML [#j403e0ad]
ウインドウ(GUI)の設計は,ソリューションエクスプローラー...
#ref(./xaml.png,25%);
XAML(Extensible Application Markup Language)では,XMLのよ...
**イベント [#k2a534ad]
GUIを持つアプリケーションではイベントが起きた際の処理を記...
簡単な例を実装していく.
テンプレートととなるプログラムでは,ウインドウ上に出し入...
デフォルトでは常に表示されているが,左上のハンバーガーボ...
XAMLの編集画面から「ToggleButton」を選択し,右下のプロパ...
#ref(./buttonevent.png,25%);
コード記述画面に移動するので,以下を書く.
private void ToggleButton_Click(object sender, Ro...
{
Splitter.IsPaneOpen = !Splitter.IsPaneOpen; /...
}
これで,ボタンを押すとバーの表示,非表示が切り替えできる.
**Pointer [#s3d7d625]
UWPでは,様々な環境で動作するアプリケーションを想定してい...
-ポインター入力の処理 - Windows UWP applications~
https://docs.microsoft.com/ja-jp/windows/uwp/design/input...
Pointer関連のイベントでは,引数にPointerPointerRoutedEven...
例えば,カーソルやタッチされた位置の座標は,GetCurrentPoi...
var p = e.GetCurrentPoint(MainCanvas); //引数に座標の基...
//p.PositionがPointer(マウス,タッチ)の座標となる.
-PointerRoutedEventArgs.GetCurrentPoint(UIElement) Method...
https://docs.microsoft.com/ja-jp/uwp/api/windows.ui.xaml....
各情報の取得例:
-PointerPoint Class (Windows.UI.Input) - Windows UWP appl...
https://docs.microsoft.com/ja-jp/uwp/api/windows.ui.input...
**線を書く [#g874bbef]
-方法: PathGeometry で LineSegment を作成する~
https://docs.microsoft.com/ja-jp/dotnet/framework/wpf/gra...
以下は,今回のテンプレートプログラム用に直したコード:
//プログラム上部の
//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...
myPathSegmentCollection.Add(myLineSegment);
myPathFigure.Segments = myPathSegmentCollecti...
PathFigureCollection myPathFigureCollection =...
myPathFigureCollection.Add(myPathFigure);
PathGeometry myPathGeometry = new PathGeometr...
myPathGeometry.Figures = myPathFigureCollecti...
Path myPath = new Path();
myPath.Stroke = new SolidColorBrush(Color.Fro...
myPath.StrokeThickness = 1;
myPath.Data = myPathGeometry;
MainCanvas.Children.Add(myPath);
**課題 [#l13e233f]
クリックするごとに直線を引けるようにせよ.
#ref(./kadai1.gif);
**ヒント [#rc66f7a0]
1回目がクリックされたらその場所を記録しておく→Point型のメ...
1回目がクリックされたことを記録しておく→bool型のメンバ変...
1回目はクリックされた位置の記録と,フラグをtrueにしてretu...
フラグをチェックし,2回目のクリックだった場合上記のコード...
**課題提出方法 [#r54a0cd6]
招待されているBoxアップロードフォルダ「情報メディア基礎ゼ...
ファイル名:XXFIXXX_1st.zip(例:18FI999_1st.zip)
''提出締め切り:5月3日(金) 23:59''
BOXアップロードフォルダの招待メールが来ていない方は森谷ま...
終了行:
**Visual Studioの入手 [#zdba52d5]
Visual Studio Community 2022 (無料)もしくはEnterpriseも...
https://visualstudio.microsoft.com/ja/downloads/
Enterpriseは電大生の場合,Azure Portalに学籍メールでログ...
https://portal.azure.com/
一番上の検索欄「Education」を入力→検索結果からEducationペ...
**Windows10(11)のバージョン [#f6ace720]
Windows Updateにより,Windows10(11)を最新のバージョンにし...
**Visual Studioのインストール [#df298e34]
Visual Studioインストール時,「ワークロード」で本講義に必...
#ref(./vsuwp.png);
**開発者モード [#s79f1c55]
VisualStudioで作成したUWPアプリをローカルPCへのインストー...
#ref(./developermode.png);
**UWP導入 [#u31adc50]
UWP(Universal Windows Platform)はMicrosoftが提供する様々...
-ユニバーサル Windows プラットフォーム (UWP) アプリとは -...
https://docs.microsoft.com/ja-jp/windows/uwp/get-started/...
**使用言語 [#xfcd9581]
UWPでは複数のプログラミング言語,UIをサポートするが,ここ...
-XAML UI
-C#
での実装を行う.開発環境は,
-Visual Studio 2022
を使用していく.
**Visual Studioのフォルダ,ファイル構成 [#c4a0afc0]
Visual Studioでは,複数のソースコードをプロジェクトが束ね...
簡単なアプリケーションを作成する場合は,1つのソリューショ...
#ref(./solution.png,50%);
**プログラムテンプレート [#rae71759]
以下のテンプレートプログラムを用いて,簡易なスケッチ入力...
https://github.com/tomoakimoriya/Kisozemi
Gitが分かるものはClone,もしくはZipでダウンロードし展開す...
**最初に行うこと [#u26fbc2b]
.slnファイルを開くと,デフォルトでソリューションプラット...
#ref(./changeplatform.png);
**ビルド・実行 [#o5ede78c]
ビルド,実行は上部の再生ボタンを押せばよい.もしくは[デバ...
#ref(./build.png);
**次に行っておくこと [#m7d6c9e8]
一回,ビルド,実行し,必要なモジュールファイルを復元して...
**ソリューションエクスプローラー [#n65222dd]
ソリューション内のプロジェクト,プロジェクト内のファイル...
表示されていない場合は,[表示]-[ソリューションエクスプロ...
#ref(./explorer.png,50%);
**XAML [#j403e0ad]
ウインドウ(GUI)の設計は,ソリューションエクスプローラー...
#ref(./xaml.png,25%);
XAML(Extensible Application Markup Language)では,XMLのよ...
**イベント [#k2a534ad]
GUIを持つアプリケーションではイベントが起きた際の処理を記...
簡単な例を実装していく.
テンプレートととなるプログラムでは,ウインドウ上に出し入...
デフォルトでは常に表示されているが,左上のハンバーガーボ...
XAMLの編集画面から「ToggleButton」を選択し,右下のプロパ...
#ref(./buttonevent.png,25%);
コード記述画面に移動するので,以下を書く.
private void ToggleButton_Click(object sender, Ro...
{
Splitter.IsPaneOpen = !Splitter.IsPaneOpen; /...
}
これで,ボタンを押すとバーの表示,非表示が切り替えできる.
**Pointer [#s3d7d625]
UWPでは,様々な環境で動作するアプリケーションを想定してい...
-ポインター入力の処理 - Windows UWP applications~
https://docs.microsoft.com/ja-jp/windows/uwp/design/input...
Pointer関連のイベントでは,引数にPointerPointerRoutedEven...
例えば,カーソルやタッチされた位置の座標は,GetCurrentPoi...
var p = e.GetCurrentPoint(MainCanvas); //引数に座標の基...
//p.PositionがPointer(マウス,タッチ)の座標となる.
-PointerRoutedEventArgs.GetCurrentPoint(UIElement) Method...
https://docs.microsoft.com/ja-jp/uwp/api/windows.ui.xaml....
各情報の取得例:
-PointerPoint Class (Windows.UI.Input) - Windows UWP appl...
https://docs.microsoft.com/ja-jp/uwp/api/windows.ui.input...
**線を書く [#g874bbef]
-方法: PathGeometry で LineSegment を作成する~
https://docs.microsoft.com/ja-jp/dotnet/framework/wpf/gra...
以下は,今回のテンプレートプログラム用に直したコード:
//プログラム上部の
//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...
myPathSegmentCollection.Add(myLineSegment);
myPathFigure.Segments = myPathSegmentCollecti...
PathFigureCollection myPathFigureCollection =...
myPathFigureCollection.Add(myPathFigure);
PathGeometry myPathGeometry = new PathGeometr...
myPathGeometry.Figures = myPathFigureCollecti...
Path myPath = new Path();
myPath.Stroke = new SolidColorBrush(Color.Fro...
myPath.StrokeThickness = 1;
myPath.Data = myPathGeometry;
MainCanvas.Children.Add(myPath);
**課題 [#l13e233f]
クリックするごとに直線を引けるようにせよ.
#ref(./kadai1.gif);
**ヒント [#rc66f7a0]
1回目がクリックされたらその場所を記録しておく→Point型のメ...
1回目がクリックされたことを記録しておく→bool型のメンバ変...
1回目はクリックされた位置の記録と,フラグをtrueにしてretu...
フラグをチェックし,2回目のクリックだった場合上記のコード...
**課題提出方法 [#r54a0cd6]
招待されているBoxアップロードフォルダ「情報メディア基礎ゼ...
ファイル名:XXFIXXX_1st.zip(例:18FI999_1st.zip)
''提出締め切り:5月3日(金) 23:59''
BOXアップロードフォルダの招待メールが来ていない方は森谷ま...
ページ名: