rksoftware

Visual Studio とか C# とかが好きです

Blazor Hybrid (Windows フォーム) プロジェクトの作り方

Blazor には 7 つのプロジェクト タイプがあります。

今回は少し複雑なな Blazor Hybrid (Windows フォーム) プロジェクトを作ってみたいと思います。

参考

docs.microsoft.com

■ dotnet command

コマンドで作成すると手ばやいです。

> dotnet new winforms -o BlazorWinFormsSample
> cd .\BlazorWinFormsSample\

□ .csproj ファイルの編集

少し複雑なので .csproj ファイルを編集します。
テキストエディタで .csproj ファイルを開きます (ここではメモ帳で開いています)。

> notepad .\BlazorWinFormsSample.csproj

開いたファイルは次のようになっています。

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWindowsForms>true</UseWindowsForms>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

</Project>

この先頭の Sdk 部分を Microsoft.NET.Sdk.Razor と変更します。

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWindowsForms>true</UseWindowsForms>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

</Project>

□ Blazor ソースファイルを作成

プロジェクト内に Blazor 部分となる 4 つのソースファイルを追加します。

mkdir wwwroot
mkdir wwwroot\css
"@using Microsoft.AspNetCore.Components.Web"  | Out-File -Encoding utf8 _Imports.razor
"<!DOCTYPE html>`n<html lang=`"en`">`n<head>`n    <meta charset=`"utf-8`" />`n    <meta name=`"viewport`" content=`"width=device-width, initial-scale=1.0`" />`n    <title>WinFormsBlazor</title>`n    <base href=`"/`" />`n    <link href=`"css/app.css`" rel=`"stylesheet`" />`n    <link href=`"WinFormsBlazor.styles.css`" rel=`"stylesheet`" />`n</head>`n`n<body>`n`n    <div id=`"app`">Loading...</div>`n`n    <div id=`"blazor-error-ui`">`n        An unhandled error has occurred.`n        <a href=`"`" class=`"reload`">Reload</a>`n        <a class=`"dismiss`">🗙</a>`n    </div>`n`n    <script src=`"_framework/blazor.webview.js`"></script>`n`n</body>`n`n</html>" | Out-File -Encoding utf8 wwwroot/index.html
"html, body {`n    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;`n}`n`n.valid.modified:not([type=checkbox]) {`n    outline: 1px solid #26b050;`n}`n`n.invalid {`n    outline: 1px solid red;`n}`n`n.validation-message {`n    color: red;`n}`n`n#blazor-error-ui {`n    background: lightyellow;`n    bottom: 0;`n    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);`n    display: none;`n    left: 0;`n    padding: 0.6rem 1.25rem 0.7rem 1.25rem;`n    position: fixed;`n    width: 100%;`n    z-index: 1000;`n}`n`n    #blazor-error-ui .dismiss {`n        cursor: pointer;`n        position: absolute;`n        right: 0.75rem;`n        top: 0.5rem;`n    }"  | Out-File -Encoding utf8 wwwroot/css/app.css
"<h1>Counter</h1>`n`n<p>Current count: @currentCount</p>`n`n<button class=`"btn btn-primary`" @onclick=`"IncrementCount`">Click me</button>`n`n@code {`n    private int currentCount = 0;`n`n    private void IncrementCount()`n    {`n        currentCount++;`n    }`n}"  | Out-File -Encoding utf8 Counter.razor

次の 4 ファイルが作れているはずです。
ここで行っているファイル作成方法については次の記事に。

rksoftware.hatenablog.com

□ 出来上がったファイル

_Imports.razor

@using Microsoft.AspNetCore.Components.Web

wwwroot/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WinFormsBlazor.styles.css" rel="stylesheet" />
</head>

<body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js"></script>

</body>

</html>

wwwroot/css/app.css

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

Counter.razor

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

□ 画面のコードを編集

画面のコードを開きます。

> notepad .\Form1.cs

開いたファイルの先頭に 2 つの using を追加します。

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

一つの読み取り専用プロパティを追加します。

BlazorWebView blazorWebView1 { get; };

コンストラクタにコントロールの追加とコントロールへの設定を追加します。Windows フォームのコントロールはシンプルなのでコードだけで UI が作りやすくて直感的ですね。

this.Controls.Add(blazorWebView1 = new BlazorWebView{
    Dock = DockStyle.Fill
});

var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");

ファイルはこんな感じになります。

Form1.cs

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

namespace BlazorWinFormsSample;

public partial class Form1 : Form
{
    BlazorWebView blazorWebView1 { get; }

    public Form1()
    {
       InitializeComponent();

        this.Controls.Add(blazorWebView1 = new BlazorWebView{
            Dock = DockStyle.Fill
        });

        var services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        blazorWebView1.HostPage = "wwwroot\\index.html";
        blazorWebView1.Services = services.BuildServiceProvider();
        blazorWebView1.RootComponents.Add<Counter>("#app");
    }
}

□ NuGet パッケージのインストール

prerelease 版の NuGet パッケージをインストールします。

> dotnet add package Microsoft.AspNetCore.Components.WebView.WindowsForms --prerelease

□ 実行

実行はプロジェクト ファイル (.csproj) のある場所で dotnet run

> dotnet run

Windows フォームアプリの中で Blazor が動きました。

これで Blazor Hybrid (Windows フォーム) のプロジェクトを作成して実行することができました。

■ Visual Studio

ワークロード .NET デスクトップ開発 が必要です。

Visual Studio の場合はプロジェクトの作成から。



プロジェクト (ソリューション) が作成され、Visual Studio で開かれます。

プロジェクトファイルを編集します。



コマンドラインの時と同様に Blazor の 4 ファイルを追加します。

フォームのソースも同様に編集します。



NuGet パッケージを追加します。プレリリースを含める のチェックを忘れないでください。

デバッグ実行で Windows フォームアプリの中で Blazor が動きました。

■ 簡単ですね

簡単ですね。

Blazor Hybrid (WPF) プロジェクトの作り方

Blazor には 7 つのプロジェクト タイプがあります。

今回は少し複雑な Blazor Hybrid (WPF) プロジェクトを作ってみたいと思います。

参考

docs.microsoft.com

■ dotnet command

コマンドで作成すると手ばやいです。

> dotnet new wpf -o BlazorWpfSample
> cd .\BlazorWpfSample\

□ .csproj ファイルの編集

少し複雑なので .csproj ファイルを編集します。
テキストエディタで .csproj ファイルを開きます (ここではメモ帳で開いています)。

> notepad .\BlazorWpfSample.csproj

開いたファイルは次のようになっています。

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

</Project>

この先頭の Sdk 部分を Microsoft.NET.Sdk.Razor と変更します。

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

</Project>

□ Blazor ソースファイルを作成

プロジェクト内に Blazor 部分となる 4 つのソースファイルを追加します。

mkdir wwwroot
mkdir wwwroot\css
"@using Microsoft.AspNetCore.Components.Web"  | Out-File -Encoding utf8 _Imports.razor
"<!DOCTYPE html>`n<html lang=`"en`">`n<head>`n    <meta charset=`"utf-8`" />`n    <meta name=`"viewport`" content=`"width=device-width, initial-scale=1.0`" />`n    <title>WinFormsBlazor</title>`n    <base href=`"/`" />`n    <link href=`"css/app.css`" rel=`"stylesheet`" />`n    <link href=`"WinFormsBlazor.styles.css`" rel=`"stylesheet`" />`n</head>`n`n<body>`n`n    <div id=`"app`">Loading...</div>`n`n    <div id=`"blazor-error-ui`">`n        An unhandled error has occurred.`n        <a href=`"`" class=`"reload`">Reload</a>`n        <a class=`"dismiss`">🗙</a>`n    </div>`n`n    <script src=`"_framework/blazor.webview.js`"></script>`n`n</body>`n`n</html>" | Out-File -Encoding utf8 wwwroot/index.html
"html, body {`n    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;`n}`n`n.valid.modified:not([type=checkbox]) {`n    outline: 1px solid #26b050;`n}`n`n.invalid {`n    outline: 1px solid red;`n}`n`n.validation-message {`n    color: red;`n}`n`n#blazor-error-ui {`n    background: lightyellow;`n    bottom: 0;`n    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);`n    display: none;`n    left: 0;`n    padding: 0.6rem 1.25rem 0.7rem 1.25rem;`n    position: fixed;`n    width: 100%;`n    z-index: 1000;`n}`n`n    #blazor-error-ui .dismiss {`n        cursor: pointer;`n        position: absolute;`n        right: 0.75rem;`n        top: 0.5rem;`n    }"  | Out-File -Encoding utf8 wwwroot/css/app.css
"<h1>Counter</h1>`n`n<p>Current count: @currentCount</p>`n`n<button class=`"btn btn-primary`" @onclick=`"IncrementCount`">Click me</button>`n`n@code {`n    private int currentCount = 0;`n`n    private void IncrementCount()`n    {`n        currentCount++;`n    }`n}"  | Out-File -Encoding utf8 Counter.razor

次の 4 ファイルが作れているはずです。
ここで行っているファイル作成方法については次の記事に。

rksoftware.hatenablog.com

□ 出来上がったファイル

_Imports.razor

@using Microsoft.AspNetCore.Components.Web

wwwroot/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WinFormsBlazor.styles.css" rel="stylesheet" />
</head>

<body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js"></script>

</body>

</html>

wwwroot/css/app.css

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

Counter.razor

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

□ 画面のコードを編集

画面の UI 定義を開きます。

> notepad MainWindow.xaml

開いたファイルはこんな感じになっているはずです。

<Window x:Class="BlazorWpfSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BlazorWpfSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

このファイルに次の名前空間と要素を追加します。

xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
<blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
    <blazor:BlazorWebView.RootComponents>
        <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
    </blazor:BlazorWebView.RootComponents>
</blazor:BlazorWebView>

ファイルはこんな感じになります。

MainWindow.xaml

<Window x:Class="BlazorWpfSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        xmlns:local="clr-namespace:BlazorWpfSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </Grid>
</Window>

画面のビハインドコードを開きます。

> notepad MainWindow.xaml.cs

開いたファイルはこんな感じになっているはずです。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BlazorWpfSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

このファイルに using を追加します。

using Microsoft.Extensions.DependencyInjection;

コンストラクタの先頭に次の設定を行うコードを追加します。

var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());

ファイルはこんな感じになります。

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Extensions.DependencyInjection;

namespace BlazorWpfSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            var serviceCollection = new ServiceCollection();
            serviceCollection.AddWpfBlazorWebView();
            Resources.Add("services", serviceCollection.BuildServiceProvider());

            InitializeComponent();
        }
    }
}

□ NuGet パッケージのインストール

prerelease 版の NuGet パッケージをインストールします。

> dotnet add package Microsoft.AspNetCore.Components.WebView.Wpf --prerelease

□ 実行

実行はプロジェクト ファイル (.csproj) のある場所で dotnet run

> dotnet run

WPF アプリの中で Blazor が動きました。

これで Blazor Hybrid (WPF) のプロジェクトを作成して実行することができました。

■ Visual Studio

ワークロード .NET デスクトップ開発 が必要です。

Visual Studio の場合はプロジェクトの作成から。



プロジェクト (ソリューション) が作成され、Visual Studio で開かれます。

プロジェクトファイルを編集します。



コマンドラインの時と同様に Blazor の 4 ファイルを追加します。
画面のソースも同様に編集します。




NuGet パッケージを追加します。プレリリースを含める のチェックを忘れないでください。


デバッグ実行で Windows フォームアプリの中で Blazor が動きました。

■ 簡単ですね

簡単ですね。

PowerShell でコマンドでファイルを作る

PowerShell でコマンドでテキストファイルを作る場合、文字列をファイルにリダイレクトしてしまえばファイルを作ることができます。
しかしこの方法でプログラムのソースコードファイルを作るとうまくいかないことがあります。

こんな感じでリダイレクトでファイルは作れます。

"a" > a.txt

しかし、こうするとあまり文字コードがうれしくない感じに。次のようにすると、使いやすい良い感じの文字コードになります。

"a" | Out-File -Encoding utf8 b.txt

ファイルを比較するとこんな感じ。

参考

PowerShellでリダイレクトするとUnicodeになるし、変な感じに改行される問題への対策 - インフラエンジニア生存戦略

Mobile Blazor Bindings (Hybrid) プロジェクトの作り方

Blazor には 7 つのプロジェクト タイプがあります。

今回は少し複雑な Mobile Blazor Bindings (Hybrid) プロジェクトを作ってみたいと思います。

参考

docs.microsoft.com

■ 準備

□ Visual Sudio

Visual Studio をインストールします。 ワークロード ASP.NET と Web 開発.NET によるモバイル開発 が必要です。

□ プロジェクトテンプレート

プロジェクトテンプレートは次のコマンドで探せます。

> dotnet new blazorhybrid --search

実行結果

テンプレートを探しています...
テンプレートソースからの一致: NuGet.org
これらのテンプレートは、入力: 'blazorhybrid' と一致しました

テンプレート名                    短い名前      作成       言語  パッケージ                                ダウンロード
--------------------------------  ------------  ---------  ----  ----------------------------------------  ------------
Experimental Mobile Blazor Bi...  blazorhybrid  Microsoft  [C#]  Microsoft.MobileBlazorBindings.Templates           16k


テンプレートを使用するには、次のコマンドを実行してパッケージをインストールします。
   dotnet new --install <PACKAGE_ID>
例:
   dotnet new --install Microsoft.MobileBlazorBindings.Templates

ただし今回は プレビュー バージョンのパッケージが必要なので少し手を加える必要があります。具体的には次のコマンドになります。

dotnet new --install Microsoft.MobileBlazorBindings.Templates::0.5.50-preview

■ dotnet command

コマンドで作成すると手ばやいです。

> dotnet new blazorhybrid -o SampleBlazorHybrid

実行は Visual Studio で行います。

> &"C:\Program Files\Microsoft Visual Studio\2022\Preview\Common7\IDE\devenv.exe" .\SampleBlazorHybrid\SampleBlazorHybrid.sln

参考

rksoftware.hatenablog.com

■ Visual Studio

プロジェクト (ソリューション) が Visual Studio で開かれます。

プロジェクトがモバイルとデスクトップの両方のものが作られていることがわかります。

□ Android

まずは Android プロジェクトを実行してみます。

デバッグ実行で Android エミュレーターが起動し、アプリが開きます。

□ Windows

続いて Windows のデスクトップを実行してみます。

ここでエラーが出ることがあります。

---------------------------
SampleBlazorHybrid.Windows.exe
---------------------------
To run this application, you must install .NET Core.

Would you like to download it now?
---------------------------
はい(Y)   いいえ(N)   
---------------------------

対策

.NET Core 3.1 をインストールします。そうするとインストール後に Android プロジェクトがビルドに失敗するようになるので、ひとまずアンロードしておきます。
rksoftware.hatenablog.com

改めて Windows のデスクトップを実行してみます。

起動しました。しかし Blazor 部分がエラーになってしまっています。

申し訳ございません。このページに到達できません
http://0.0.0.0 の Web ページに問題が発生しているか、新しい Web ページに完全に移動された可能性があります。
ERR_ADDRESS_INVALID 

対策

NuGet パッケージの更新と追加を行います。

  • Xamarin.Forms を最新に更新
  • WebView2 をインストール

rksoftware.hatenablog.com

再度実行します。

実行できました。

■ 簡単ですね

簡単ですね。

Mobile Blazor Bindings プロジェクトの作り方

Blazor には 7 つのプロジェクト タイプがあります。

今回は少し複雑な Mobile Blazor Bindings プロジェクトを作ってみたいと思います。

参考

docs.microsoft.com

■ 準備

□ Visual Sudio

Visual Studio をインストールします。 ワークロード ASP.NET と Web 開発.NET によるモバイル開発 が必要です。

□ プロジェクトテンプレート

プロジェクトテンプレートは次のコマンドで探せます。

> dotnet new mobileblazorbindings --search

実行結果

テンプレートを探しています...
テンプレートソースからの一致: NuGet.org
これらのテンプレートは、入力: 'mobileblazorbindings' と一致しました

テンプレート名            短い名前              作成       言語  パッケージ                                ダウンロード
------------------------  --------------------  ---------  ----  ----------------------------------------  ------------
Experimental Mobile B...  mobileblazorbindings  Microsoft  [C#]  Microsoft.MobileBlazorBindings.Templates           16k


テンプレートを使用するには、次のコマンドを実行してパッケージをインストールします。
   dotnet new --install <PACKAGE_ID>
例:
   dotnet new --install Microsoft.MobileBlazorBindings.Templates

ただし今回は プレビュー バージョンのパッケージが必要なので少し手を加える必要があります。具体的には次のコマンドになります。

dotnet new --install Microsoft.MobileBlazorBindings.Templates::0.5.50-preview

■ dotnet command

コマンドで作成すると手ばやいです。

> dotnet new mobileblazorbindings -o SampleMobileBlazorBindingsApp

実行は Visual Studio で行います。 。

> &"C:\Program Files\Microsoft Visual Studio\2022\Preview\Common7\IDE\devenv.exe" .\SampleMobileBlazorBindingsApp\SampleMobileBlazorBindingsApp.sln

参考

rksoftware.hatenablog.com

■ Visual Studio

プロジェクト (ソリューション) が Visual Studio で開かれます。

デバッグ実行で Android エミュレーターが起動し、アプリが開きます。

■ 簡単ですね

簡単ですね。

Blazor Hybrid (.NET MAUI) プロジェクトの作り方

Blazor には 7 つのプロジェクト タイプがあります。

今回はわりとシンプルな Blazor Hybrid (.NET MAUI プロジェクトを作ってみたいと思います。

■ dotnet command

今回はビルドや実行には Visual Studio が便利なのでコマンドでは作成せず Visual Studio でやっていきたいと思います。

■ Visual Studio

参考 docs.microsoft.com 正直なところ、ここに書いてあることで十分なので特に補足することはないのですが、やっていきたいと思います。

準備

Visual Studio のプレビュー版をインストールします。
ワークロード .NET によるモバイル開発 が必要です。

プロジェクト (ソリューション) 作成

Visual Studio のプロジェクトの作成から。



プロジェクト (ソリューション) が作成され、Visual Studio で開かれます。

実行

デバッグ実行で Android エミュレーターが起動し、アプリが開きます。

Windows でも実行してみたいと思います。


特に何事もなく実行できました。

■ 簡単ですね

簡単ですね。

Mobile Blazor Bindings (Hybrid) でエラーで Windows アプリが実行されない

Mobile Blazor Bindings (Hybrid) の Windows アプリでエラーでプロジェクトテンプレートから作ったばかりのプロジェクトを Windows をターゲットに実行しようとすると、実行されないことがありました。
こんな画面でエラーになります。

To run this application, you must install .NET Core.

Would you like to download it now?

■ 対策

Visual Studio のソリューション エクスプローラのところにこんな表示があったので、言われるがままに .NET Core 3.1 をインストールします。

さらに対策

ここまでの手順で、Android プロジェクトがビルドできなくなってしまいました。Windows アプリを動かすだけなら Android プロジェクトがビルドに失敗する状況でも構わないのでひとまず Android プロジェクトをアンロードしてみます。

■ 実行

これで実行できるようになりました。

ただし、今後は MAUI に移行するとのことなので、あまりこの知識を活用する機会はそう長くないかもしれません。