MBP(はてな)

MacBook Pro,iPhone Xs,React

.NET MAUI

.NET MAUI とは
.NET MAUI とは - .NET MAUI | Microsoft Learn

.NET マルチプラットフォーム アプリ UI のドキュメント
.NET マルチプラットフォーム アプリ UI のドキュメント - .NET MAUI | Microsoft Learn

コントロール
コントロール - .NET MAUI | Microsoft Learn

レイアウト
レイアウト - .NET MAUI | Microsoft Learn

ContentPage(NavigationPage)
ContentPage - .NET MAUI | Microsoft Learn

XAML を使用してアプリをスタイル設定する
XAML を使用してアプリをスタイル設定する - .NET MAUI | Microsoft Learn

Visual Studio 2022 をインストールし、.NET MAUI を使用してクロス プラットフォーム アプリを開発する - .NET MAUI | Microsoft Learn
Visual Studio 2022 for Macをインストール(Version 17.6.9 (build 415))
Thank You for Downloading Visual Studio for Mac

Runtime .NET 7.0.3
NuGet 6.4.0.117
Visual Studioを起動して、Microsoftアカウントでログイン

初めての .NET MAUI アプリをビルドする - .NET MAUI | Microsoft Learn
Newをクリックして、
Multiplatform Appの.NET MAUI Appを選択して、Continue
.NET 7.0を選択して、Continue
Project name:をmaui_my_appとして、Create
Debugの右のTargetをPixel 5に変更して、実行ボタンを押して、しばらく待つと、Android Emulator pixel 5で画面に「Hello, World!」が表示されます。

Debugの右のTargetをiPhone 15 iOS 17.2に変更して、実行ボタンを押して、しばらく待つと、iPhone 15シミュレータの画面に「Hello, World!」が表示されます。

iPhone実機で実行しようとしたが、provisioning profilesを追加できなかった。
Visual Studioのsetting-Publishing-Apple Developer AccountでAdd-Enterprise Accountでユーザー名とパスワードを入力した時にエラー
再度開くとAccountsが追加されていたが、エラーが出て実機にインストールできなかった。
ipad - Could not find any available provisioning profiles for iOS - Stack Overflow

GitHub - hiroyuki12/maui_my_app

ホットリロード
MainPage.xamlのHello, World!をHello, World2!に変更して保存すると、画面の表示が更新されます。

チュートリアル Noteアプリを作成する
チュートリアル: .NET MAUI アプリを作成する - .NET MAUI | Microsoft Learn
画像ファイルをFinderでImageフォルダに移動するとビルド時にエラーが出るので、
Visual StudioでImageフォルダを右クリックして、Addで追加する

ステップ 5/5まで完了
チュートリアル: .NET MAUI アプリを作成する - .NET MAUI | Microsoft Learn

XAML
XAML - .NET MAUI | Microsoft Learn

画面遷移 Shell.Current.GoToAsync (Shell利用時の単純なページ移動)
.NET MAUI (いろんな画面遷移) #.NET - Qiita

Buttonクラス
Button クラス (Microsoft.Maui.Controls) | Microsoft Learn

Checkbox Class
CheckBox Class (Microsoft.Maui.Controls) | Microsoft Learn

DatePicker Class
DatePicker Class (Microsoft.Maui.Controls) | Microsoft Learn

ListView Class
ListView Class (Microsoft.Maui.Controls) | Microsoft Learn

Switch Class
Switch Class (Microsoft.Maui.Controls) | Microsoft Learn


テキスト入力
入力 - .NET MAUI | Microsoft Learn

Entryクラス
Entry Class (Microsoft.Maui.Controls) | Microsoft Learn

縦にボタン2つ並べる時に、ボタン間にスペースを入れるには、
VerticalStackLayoutに、Spacing="25"を追加する

VerticalStackLayout Class
VerticalStackLayout - .NET MAUI | Microsoft Learn

HorizontalStackLayout Class
HorizontalStackLayout Class (Microsoft.Maui.Controls) | Microsoft Learn

テキストの読み書き
[.NET MAUI] 設定ファイルの読み書き

File.WriteAllText メソッド(.NET 8)
File.WriteAllText メソッド (System.IO) | Microsoft Learn

File.ReadAllText メソッド
File.ReadAllText メソッド (System.IO) | Microsoft Learn

ファイル システム ヘルパー
ファイル システム ヘルパー - .NET MAUI | Microsoft Learn

SQL Server接続
System.Data.SqlClientのライブラリを使って接続します。
NuGet で Microsoft.Data.SqlClient をインストールするとできるっぽい。
.NETMAUIでSQLServerに接続する方法ってあるんでしょ... - Yahoo!知恵袋

画像ファイルは、Resources/Imagesにpngファイルやsvgファイルに置く
MainPage.xamlのImageタグのSourceにファイル名を入力すると表示できる

Colors.xamlとStyles.xamlはResources/Stylesにある
App.xamlにResourceDictionaryが定義されている

コマンド ラインを使用して Android アプリを発行する
コマンド ラインを使用して Android アプリを発行する - .NET MAUI | Microsoft Learn








Xamarin.Formsで作成する場合は、
Newをクリックして、
Multiplatform AppのBlank Appを選択して、Continue
App name:をmaui-my-appとして、
Target platforms:はAndroidiOSにチェックして、Continue
保存先を指定して、Continue
実行ボタンを押して、しばらく待つと、Android Emulator pixel 5で画面に「Welcome to Xamarin.Forms!」が表示されます。

ホットリロード
Welcome をWelcome2にして保存すると、エミュレータの画面も更新される

.NET MAUIで遊そぼう

.NET 6 SDK インストール - MBP(はてな)



.Visual Studio Code

Install Visual Studio 2022 to develop cross-platform apps using .NET MAUI - .NET MAUI | Microsoft Learn
Visual Studio Codeをインストールします。(Ver 1.85.2)
EXTENSIONSの.NET MAUI, .NET Install Tool, C#, C# Dev Kit, InteliCode for C# Dev Kitをインストールします。Vimもあります。
$ sudo dotnet workload install maui

アプリを作成する
Command + shift + pして、.NET: new projectしても表示されないので、
~/project/maui-my-appフォルダを作成して、
$ cd ~/projects/maui-my-app

$ dotnet build -t:InstallAndroidDependencies -f:net8.0-android -p:AndroidSdkDirectory="" -p:JavaSdkDirectory="" -p:AcceptAndroidSDKLicenses=True
Install Visual Studio 2022 to develop cross-platform apps using .NET MAUI - .NET MAUI | Microsoft Learn

$ dotnet new maui

Visual Studio Codeでmaui-my-appフォルダを開いて、
Run - Start Debbugingを選択すると画面が表示されます。(Mac App)

App.xaml.csを開いて、右下の{}をクリックして、Debug Targetを選択して、pixel 5を選択して、
Run - Start Debbugingを選択すると、エラーが出るので、OUTPUTの内容を確認して、
$ ./sdkmanager "platforms;android-34" "build-tools;34.0.0" "platform-tools" "cmdline-tools;11.0"
$ ./sdkmanager --licenses --verbose
再度、Run - Start Debbugingを選択すると、Android Emulator pixel 5で.NETが表示されます。
再度、Run - Start Debbugingを選択すると、Android EmulatorでHello, World!の画面が表示されます。