今回は .NET 8に対応したFluent UI Blazorを利用してBlazorアプリケーションを作成する方法ついてお届けします。
「Fluent UI Blazor」はFluentデザインを採用したWebコンポーネント「Fluent UI Web Component」をBlazor用にラップしたライブラリです。
先週に開催されたイベント「.NET Conf 2023」にあわせて .NET 8がリリースされています。また、Fluent UI Blazorも更新 .NET 8に対応したバージョン「4.0.0」をリリースしています。
4.0.0については、「This is the demo and documentation site for version 4.0.0 of the library. This version supports .NET 8 only」と記載されており .NET 8にのみ対応しています。
新しいプロジェクトテンプレート
4.0.0では、以前のプロジェクトテンプレートとは別の、.NET 8に対応している新しいプロジェクトテンプレートを追加することができます。
上部の2つは古い方のテンプレート「Microsoft.Fast.Templates.FluentUI」で、下部の赤枠部分2つが新しいテンプレート「Microsoft.FluentUI.AspNetCore.Templates」になります。
以前とは名称が変更されていますがインストール方法は同じです。WindowsやVisual Studioのターミナルを起動して以下のコマンドを入力すれば、Fluent UI Blazorのプロジェクトテンプレートをインストールできます。
dotnet new install Microsoft.FluentUI.AspNetCore.Templates::4.0.0今回のプロジェクトテンプレートでは、「FluentUI Blazor Web App」と「FluentUI Blazor WebAssembly スタンドアロン アプリ」が追加されますが、本記事では「FluentUI Blazor Web App」を試してみます。
「FluentUI Blazor Web App」は、.NET 8で使用できるようになったBlazorのプロジェクトテンプレート「Blazor Web App」と同じように、「Interactive render mode」と「Interactivity location」の設定があります。
プロジェクトテンプレートで追加される内容
作成したプロジェクトに含まれる内容を確認してみます。_Imports.razorでは以下のようにusingステートメントでFluent UI BlazorのコンポーネントMicrosoft.FluentUI.AspNetCore.Componentsが追加されています。（追加されるコンポーネントの名称も以前のMicrosoft.Fast.Components.FluentUIから変更されています）
Program.csでは以下のようにusing Microsoft.FluentUI.AspNetCore.Componentsとbuilder.Services.AddFluentUIComponentsが追加されています。
App.razorでは以下のように_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.jsへの参照が追加されています。
また、App.razorから参照しているapp.cssでは以下のように_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.cssをインポートしています。
Blazorのプロジェクトテンプレート「Blazor Web App」などでFluent UI Blazorを使う場合には、これらの設定を手動で追加しなければなりませんが、テンプレートを使うことでその手間を省けるようになっています。
レイアウトで使用されているFluent UI Blazorコンポーネント
MainLayout.razor
MainLayout.razorでは、レイアウト用のコンポーネントとしてFluentLayout、FluentHeader、FluentStack、FluentBodyContent、FluentFooterが追加されています。
<FluentLayout>
<FluentHeader>
FluentUiBlazorApp1
</FluentHeader>
<FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
<NavMenu />
<FluentBodyContent>
<div class="content">
@Body
</div>
</FluentBodyContent>
</FluentStack>
<FluentFooter>
<div class="link1">
<a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
</div>
<div class="link2">
<a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
</div>
</FluentFooter>
</FluentLayout>NavMenu.razor
NavMenu.razorでは、メニュー用のコンポーネントとしてFluentNavMenuとFluentNavLinkが追加されています。
<FluentNavMenu Width="250" Collapsible="true" Title="Custom navigation menu">
<FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icon.FromImageUrl("/images/home.svg")" IconColor="Color.Accent">Home</FluentNavLink>
<FluentNavLink Href="counter" Icon="@Icon.FromImageUrl("/images/counter.svg")" IconColor="Color.Accent">Counter</FluentNavLink>
<FluentNavLink Href="weather" Icon="@Icon.FromImageUrl("/images/weather.svg")" IconColor="Color.Accent">Weather</FluentNavLink>
</FluentNavMenu>アプリケーションを実行すると以下のように、ヘッダー、フッター、メニュー、コンテンツで構成されたレイアウトが表示されます。
各ページで使用されているFluent UI Blazorコンポーネント
Counter.razor
Counter.razorでは、FluentBadgeとFluentButtonコンポーネントが追加されています。
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: <FluentBadge Appearance="Appearance.Neutral">@currentCount</FluentBadge></p>
<FluentButton Appearance="Appearance.Accent" @onclick="IncrementCount">Click me</FluentButton>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Weather.razor
Weather.razorではFluentDataGridが追加されています。
@page "/weather"
@attribute [StreamRendering]
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<FluentDataGrid Id="weathergrid" Items=@forecasts GridTemplateColumns="1fr 1fr 1fr 2fr" TGridItem=WeatherForecast>
<PropertyColumn Title="Date" Property="@(c => c!.Date)" Sortable="true" Align=Align.Start/>
<PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Sortable="true" Align=Align.Center/>
<PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Sortable="true" Align=Align.Center/>
<PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Sortable="true" Align=Align.End/>
</FluentDataGrid>
}
@code {
private IQueryable<WeatherForecast>? forecasts;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).AsQueryable();
}
private class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}
さいごに
今回は .NET 8に対応したFluent UI Blazorのプロジェクトテンプレートを使用してBlazor WebAssemblyアプリケーションを作成する方法を確認してみました。以前のプロジェクトテンプレートから、参照しているコンポーネントや構成が若干変更されていますが使い勝手はとくに変わらなそうに思います。
グレープシティが提供する「ComponentOne for Blazor」では、Fluent UI Blazorでは対応していないチャートや高機能なデータグリッドなどを用意しています。「どのような機能が使えるの？」と気になった方はこちらもご覧いただければと思います。