MAUIGraphicsNamespace.pptx

Profile
ブログ : http://blog.processtune.com
プロフィール : Facebook, Twitter or MVP
コミュニティ : .NETラボの運営スタッフ
Microsoft MVP : July 2010 ～ Jun 2022
Current expertise : MVP for Developer Technologies
システム構築のプロセス評価、改善、策定、開発フ
レームワークの設計、実装管理、プリセールスやプロ
ジェクトの立ち上げなど

Agenda
カラー
System.Drawing名前空間では、プログラムの描画は直接レンダリングエンジンに渡されていましたが、Microsoft.Maui.Graphicsでは、WPFのように描画プラット
フォームで描画データに変換されレンダリングエンジンに非同期に渡されます。このような描画の仕組みは Microsoft.Maui.Graphicsでも同様です。そのため、WPF
のSystem.Windows.Mediaと同じようなコーディングになります。 WPFアプリケーションやMAUIアプリケーションでは、System.Drawing名前空間を参照させてプロ
グラムを作成することもできますが、これはMAUIアプリケーションへの順次移行の段階でのみ有用なのかもしれませんので、 System.Drawing、 System.Window
s.Media、 Microsoft.Maui.Graphicsの関係を解説します。
ブラシ
ブラシを使う際はコーディング時に軽微な違いがありますので解説しておきます。
画面写真
System.Drawing名前空間では直接レンダリングエンジンに描画するので、画面のキャプチャを行うためにはシステムの値を利用したグラフィックスを再構成する必
要がありますが、System.Windows.Mediaでは描画プラットフォームの機能を使って画面に出力していたものをファイルに書き出すように命令をすることができ、コン
ポーネント単位でキャプチャすることができます。 Microsoft.Maui.Graphicsでも同じ仕組みを使ったコーディングができます。
.NET 7 で統合されたプラットフォームAPI
.NET7では、 System.Windows.Mediaで行っていたコーディングを使えますがWindows依存のアプリケーションになります。そのため新たに用意された.NET 7 MA
UI統合プラットフォームを使うことで、マルチプラットフォームのコーディングの差異を最小化することができます。「await Screenshot.CaptureAsync()」だけで画面写
真を撮れるので、パーミッションの設定やディレクティブを使わないプラットフォームごとの定義箇所、ディレクティブを使ったコーディングなどをあわせて解説します。

MAUI(Multi-platform App UI)アプリ開発の準備

MAUIアプリ開発の準備 - Graphics Architecture
C++/COM APIs
出典：Overview of the Windows Graphics Architecture: Microsoft Learn
DirectX
Microsoft.DirectX
Microsoft.DirectX.Direct3D
Microsoft.DirectX.Direct3DX
Microsoft.DirectX.DirectDraw
Microsoft.DirectX.DirectInput
Microsoft.DirectX.DirectPlay
Microsoft.DirectX.DirectSound
GDI+
System.Drawing.IDeviceContext
System.Drawing.Common
System.Drawing.Graphics
GDI+ 描画サーフェイスのカプセル化
System.Drawing
System.Drawing.Drawing2D
LinearGradientBrush
PathGradientBrush
HatchBrush
Blendなど
System.Drawing.Imaging
Bitmap
Metafileなど
System.Drawing.Text
FontCollectionなど
C# APIs

MAUIアプリ開発の準備 - Support
.NET MAUI apps
Android 5.0 (API 21) 以上
iOS 11以上, Xcodeの最新リリース
macOS 10.15以上（Mac Catalyst使用）
Windows 11 and Windows 10 version 1809以上
（ Windows UI Library 3: WinUI 3 使用）
.NET MAUI Blazor apps
Android 7.0 (API 24)以上
iOS 14以上
macOS 11以上（Mac Catalyst使用）

MAUIアプリ開発の準備 – Windows OS
MAUIアプリ
Blazor
ContentPage
Native
ContentPage
ContentView
MAUI名前空間を使ったアプリ
Blazor WASM
Razor chtml
Native(WPF、UWP)
XAML
Cross
platform
graphic
canvas
Android
Native
Android
Wear
iOS

MAUIアプリ開発の準備 – Windows OS

MAUIアプリ開発の準備 - 非標準のコントロールライブラリ
Visual Studioで作成
Visual Studio Codeで作成するのは困難
Blend for Visual Studio 2022でデザインはできない
名前空間を使ってテキストの色を変更する
グラデーション・ブラシを使う
画面写真を撮る
Blend for Visual Studio 2022（XAML designer extensibility migration：巻末リンク参照）
Surface isolation（.NET Framework プロセスでホストできないターゲットランタイムをサポートするためのアーキテクチャ）
現在.NET Core WPFとUWPをサポート
Blendの
テンプレート
Blendで
XAMLを開く

MAUIアプリ開発の準備-ColorをXAMLで確認
F12

MAUIアプリ開発の準備-Colorをコードで確認

MAUIアプリ開発の準備-System.Drawing

System.Windows.MediaとMicrosoft.Maui.Graphicsについて

MAUIアプリ-Gradient Blush
ブラシ
単色
SolidColorBrush
グラデーション
LinearGradientBrush RadialGradientBrush

MAUIアプリ-Gradient Blush
var brush = new RadialGradientBrush();
var gradientStops = new GradientStopCollection();
gradientStops.Add(new GradientStop(Colors.WhiteSmoke, 0.0f));
gradientStops.Add(new GradientStop(Colors.CornflowerBlue, 0.7f));
gradientStops.Add(new GradientStop(Colors.BlueViolet, 1.0f));
brush.GradientStops = gradientStops;
brush.Center = new Point(0.2, 0.2);
brush.Radius = 1.2d;
this.Background = brush;

System.Windows.MediaやSystem.Drawing時代の画面写真

System.DrawingからMicrosoft.Maui.Graphicsへ
MAUIアプリ
Blazor
ContentPage
Native
ContentPage
ContentView
MAUI名前空間を使ったアプリ
Blazor WASM
XAML
Cross
platform
graphic
canvas
Native(WPF、UWP)
XAML
Cross
platform
graphic
canvas
Android
Native
Android
Wear
iOS

WPFアプリ-Desktop Native
>dotnet new wpf
>dotnet run

画面写真 – System.Windows.Media名前空間

画面写真 – Legacy（System.Drawing名前空間）

マルチプラットフォーム開発 - Android

画面写真 - .NET7のPlatform API
エミュレーター
Windows
Arm64では動きません
Android
Mac（要実機）
シミュレーター
or デバイス
（ローカル/リモート）
Visual Studio
2022
Ver 17.4
.NET 7
Microsoft.Maui.Graphics.Media名前空間
Screenshotクラス
CaptureAsyncメソッド

画面写真 - .NET7 MAUIアプリの作成

画面写真 - .NET7 非マルチプラットフォーム

画面写真 – System.Environmentを使う場合
MainPage.xaml.csでSystem.Environmentを使う場合
Windowsの場合（#if WINDOWディレクティブを使う）
dirPath = Environment.GetEnvironmentVariable("OneDrive", EnvironmentVariableTarget.User);
dirPath = Environment.GetEnvironmentVariable("TMP", EnvironmentVariableTarget.User);
Androidの場合（#elif ANDROIDディレクティブを使う）
dirPath = Environment.GetEnvironmentVariable("TMPDIR");
しかしAndroidの場合、ユーザーが書き込めるのは
「storage/emulated/0/Android/data/com.companyname.mauiappnative/cache」などユーザーがマウントしたド
ライブであり、Environment.GetEnvironmentVariableが返すのは
「/data/user/0/Android/data/com.companyname.mauiappnative/cache」などユーザーのデータ領域のため、
dirPath = dirPath.Replace("/data/user/0/","/sdcard/android/data/");
などを行う必要がある。
MainPage.xaml.cs

画面写真 – 環境変数の差異

画面写真 – 各プラットフォーム→MauiProgram.cs構造

画面写真 –各プラットフォーム→MauiProgram.csコード
このような文字列が取得できる
/storage/emulated/0/Android/data/com.companyname.mauiappnative/cache
/storage/3730-3830/Android/data/com.companyname.mauiappnative/cache
マルチプラットフォームプログラムで利用→
プラットフォーム依存のJava.IO.File[]オブジェクトを取得
このコードではひとつしか値が返ってきませんが、マルチプラッ
トフォーム側のコードでWindows側が返してくる複数の値を
取得するコードを合わせたいのでListにしている。
MainApplication.cs
MauiProgram.cs

画面写真 – プラットフォーム依存の値を利用する
MainPage.xaml.cs

画面写真 – MainActivity.cs

画面写真 – App container
アプリケーションが使用するOSの機能の宣言ユーザーの許可を得ているかの確認確認の結果によってどのように挙動させたいか
AndroidManifest.xmlで宣言
MainActivity.csのOnCreateで
ユーザー同意の確認
MainActivity.csの
OnRequestPermissionsResult
のオーバーライドで確認結果別の挙動を制御

画面写真 – AndroidManifest.xml
AndroidManifest.xmlで宣言

MainActivity.csのOnCreateで
ユーザー同意の確認

MainActivity.csの
OnRequestPermissionsResult
のオーバーライドで確認結果別の挙動を制御

画面写真 - .NET7 FilePicker

画面写真 – 汎用ホストのサービス追加

Conclusion
カラー
描画の仕組みは Microsoft.Maui.GraphicsとWPFのSystem.Windows.Mediaは同じなので、同じようなコーディングになります。さほど工数はかからないので、今のうち
にMicrosoft.Maui.Graphicsを使うコードに更新しておくことをお勧めします。 System.Drawing、 System.Windows.Media、 Microsoft.Maui.Graphicsの描画の特
徴に合わせたプログラムを作成します。 System.Drawingは直接ディスプレイに描画する仕組みであり、モダンなアプリでは描画プラットフォームでデータ化された描画結果
をOSに渡すのでリスト表示などで描画遅延は軽減されます。しかしながら多くのアイテムを表示するリストが使いやすいのかどうかは考慮すべきです。アプリケーションでExc
elのような機能を作った際の操作感は、OneDrive上のExcelの操作感に劣るはずです。ユーザビリティを考慮したビジネスフロー全体の運用設計を行うことをお勧めします。
ブラシ
Microsoft.Maui.Graphics名前空間は、System.Drawing名前空間からSystem.Windows.Media名前空間に変更した時ぐらい軽微な作業です。 System.Drawin
gとSystem.Windows.Mediaは、そもそも描画の仕組みが違うのでコーディングはそれほど変わらなくとも、アプリケーションの挙動に影響するためアプリケーションの設計に
影響するケースもあると思います。一方Microsoft.Maui.GraphicsとSystem.Windows.Mediaは描画プラットフォームで描画データを生成するという点においてアプリケー
ションの挙動には影響しません。
画面写真
Microsoft.Maui.GraphicsでもSystem.Windows.Mediaと同じコーディングができますが非マルチプラットフォームなアプリケーションになりますので、マルチプラットフォームへ
の移行段階で採用できる手法です。
.NET 7 で統合されたプラットフォームAPI
.NET7では、新たに統合された.NET 7 プラットフォームAPIを使うことで、非常に容易にマルチプラットフォームのコーディングが可能です。統合された.NET 7 プラットフォームA
PIの使用では多くの作業は、各プラットフォームの軽微な差異の吸収になります。

Links1
Pexels
https://www.pexels.com/ja-jp/photo/7451932/
Overview of the Windows Graphics Architecture: Microsoft Learn
https://learn.microsoft.com/en-us/windows/win32/learnwin32/overview-of-the-windows-graphics-architecture
dotnet/Microsoft.Maui.Graphics: GitHub（追加シナリオ用）
https://github.com/dotnet/Microsoft.Maui.Graphics
dotnet/maui: GitHub（Microsoftサポート統合）
https://github.com/dotnet/maui
Android Open Source Project
https://source.android.com/
Android™️ 用 Windows サブシステム: Microsoft Learn
https://learn.microsoft.com/ja-jp/windows/android/wsa/
Android 用 Windows サブシステム ™️のリリースノート: Microsoft Learn
https://learn.microsoft.com/ja-jp/windows/android/wsa/release-notes
XAML designer extensibility migration: GitHub
https://github.com/microsoft/xaml-designer-extensibility/blob/main/documents/xaml-designer-extensibility-migration.md
XAML デザイナーを使用して UI を作成する: Microsoft Learn
https://learn.microsoft.com/ja-jp/visualstudio/xaml-tools/creating-a-ui-by-using-xaml-designer-in-visual-studio?view=vs-2022
ブラシ: Microsoft Learn
https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/brushes/
System.Drawing.Common: NuGet
https://www.nuget.org/packages/System.Drawing.Common/6.0.0

Links2
Make System.Drawing.Common only supported on Windows: GitHub
https://github.com/dotnet/designs/blob/main/accepted/2021/system-drawing-win-only/system-drawing-win-only.md
Method Draw
https://editor.method.ac/
Microsoft.Maui.Animations 名前空間: Microsoft Learn
https://github.com/dotnet/Microsoft.Maui.Graphics
Screenshot クラス: Microsoft Learn
https://learn.microsoft.com/ja-jp/dotnet/api/microsoft.maui.media.screenshot?view=net-maui-6.0
プラットフォームの統合: Microsoft Learn
https://learn.microsoft.com/ja-jp/dotnet/maui/platform-integration/?view=net-maui-7.0
SDK Platform-Tools リリースノート
https://developer.android.com/studio/releases/platform-tools
USBドライバー: Motorola Device Manager
https://motorola-global-portal-jp.custhelp.com/app/usb-drivers/
Manifest.permission: Google Developers Documentation
https://developer.android.com/reference/android/Manifest.permission
xamarin/Essentials/Xamarin.Essentials/Permissions/Permissions.android.cs: GitHub
https://github.com/xamarin/Essentials/blob/main/Xamarin.Essentials/Permissions/Permissions.android.cs
<uses-sdk>: developers documentation(What is API Level?: table of android API Level and Platform ver.)
https://developer.android.com/guide/topics/manifest/uses-sdk-element#ApiLevels
/APPCONTAINER: Microsoft Learn
https://learn.microsoft.com/ja-jp/cpp/build/reference/appcontainer?view=msvc-170

Links3
Android Debug Bridge（adb）: developers documentation
https://developer.android.com/studio/command-line/adb
Android 6.0 Marshmallow
https://www.android.com/intl/ja_jp/versions/marshmallow-6-0/features/
.NET での依存関係の挿入 - サービス登録メソッド: Microsoft Learn
https://learn.microsoft.com/ja-jp/dotnet/core/extensions/dependency-injection#constructor-injection-behavior
.NET 7 統合されたプラットフォームAPIのGitHubサンプル
https://github.com/TetsuroTakao/MauiNativeAppSample
Microsoft.Maui.Graphics名前空間を使用したWPFアプリのGitHubサンプル
https://github.com/TetsuroTakao/MAUIGraphicsNamespaceWPF

MAUIGraphicsNamespace.pptx

Recommended

Recommended

More Related Content

Similar to MAUIGraphicsNamespace.pptx

Similar to MAUIGraphicsNamespace.pptx (20)

More from Takao Tetsuro

More from Takao Tetsuro (20)

Recently uploaded

Recently uploaded (6)

MAUIGraphicsNamespace.pptx

Editor's Notes