Fluent UI BlazorのDataGridの使い方

Fluent UI Blazorの DataGridの使い方株式会社SAKURUG プロダクトDiv 草場友光 .NETラボ 2023年10月

自己紹介 • 普段は主にシステムをAzureにモダナイズする仕事をしています。 • コミュニティ活動を通じて知識をアップデートしています。 • 2022/08-2024 Microsoft
MVP (Developer Technologies) • tomo_kusaba

宣伝【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。

注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • FluentUIBlazor3.2.2の内容に基づいています。 • #dotnetlabでtweetすると左側に表示されます

今日の目的 • Fluent UI Blazor 3がリリースされました。 • 先月はコンポーネントの外観について見てみましたが今月は一番よく使うと思われるDataGridに着目して見てましょう •
前提：Blazorの基本的な知識

本題の前にASP.NET Core in .NET8 RC2 • Blazor WebAssembly template update
• これまで.NETラボで何回か紹介してきたBlazor WASM Hostedのテンプレート廃止 • 認証のドキュメントも.NET8よりBlazor WASM Hostedについての記述削除 • Blazor WASMはGithub PagesやAzure static Web Appsにホストするためのソリューション • Blazor WASM HostedはASP.NET Coreサーバが必要のためBlazor Appsに移行が推奨

Fluent UIとは • Microsoftが提唱するUIデザインシステム • W3C準拠 • Fast上に構築されている • このFluent
UIの実装をするために用意されたMicrosoft 公式のBlazorUIコンポーネントが Microsoft.Fast.Components.FluentUI • すべての主要なブラウザで動作する

なぜ、Fluent UI • Fluent UIには哲学がある！ • コンポーネントを提供するのみならずその使用方法、配置方法、設計原則が厳格に決められている。 • 他のデザインシステムでもコンポーネントの配置方法やデザインの
指針などは決められているが、その上位の指針までは余り見たことがない。

Fluent UIのすすめ • Fluent UIにはデザインシステムとしての設計ガイドラインがある • アクセシビリティの配慮、レウアウトの方法、色の使用法などUIコンポーネントを使用してそれらを配置する方法について語られてる •
これらを遵守することでシステム間をまたがった同等の操作性が実現

Fluent UI設計原則 • 参考にしましょう →https://fluent2.microsoft.design/design- principles

Fluent UI Blazor 4について • 現在、Preview.1中 • 名前空間が Microsoft.FluentUI.AspNetCore.Componentsに変更 •
.NET 8以降のサポート • FASTプロジェクトから一旦独立

DataGrid • 内部的にはQuickGridのコードを流用して作成されている • 表形式のデータを表示するために使用される

DataGridの基本 • IQueryable<T>のデータ型を用意しよう • Itemsプロパティに指定 • カラムはPropertyColumnで

？？セルにボタンを作りたい！！ • PropertyColumnに代わりTemplateColumnを使う！ • ポイント1 行を識別するキー情報をDataGridのItemsに入れておく。必ずしも表示する必要はない。 • ポイント2 OnClickイベントでキー情報をメソッドに渡してあげ
る • 2点でどの行をのボタンが押されたかを識別する

？？条件によって色をつけたい • FluentDataGridのRowStyleプロパティまたはRowClass プロパティを使用する • TGridItemで指定した型（行の型）を引数としてstringを戻り値として持つメソッドを定義してRowStyleまたはRowClassプロパティに設定する • それぞれ、スタイルを変更する条件によって異なるスタイルシート
文字列またはクラス名を返すようにする

？？条件によってセルの内容を変えたい • TemplateColumnを使用します。 • TemplateColumnの中は自由に条件式などを記述できるので if文などを記述し思いのままに。。。

？？セルの内容が長文になるのを折り返したい • Classにmultiline-textを設定する • （本当は用意した当初はTemplateColumnでdiv要素を使ってスタイル設定するネタでしたが簡単にできる手段が用意されました👏）

？？タイトルが長文になるのを折り返したい • TemplateColumn内のHeaderCellItemTempleteを使用する • いままで、Titleプロパティで設定されていたものが HeaderCellItemTempleteがある場合テンプレートに代わり HeaderCellItemTemplete内に記述されたものがそのままタイトルに出る
• div要素でスタイル設定すればよい→単なるスタイルシートの知識があればあとはいける！！

まとめ • HTMLやスタイルシート書きたくないよって思ってUIコンポーネント使っているはずが細かいことやり出すとどうしてもHTMLやスタイルシートが顔を出す！！ • やっぱり、知識としてはHTMLやスタイルシートを憶えておいて損はないけどもUIコンポーネントでこれをいかに局所化できるかが勝負

参考文献 • Welcome to the Fluent UI Blazor components library
• Microsoft Fluent UI Blazor components

おしまいおしまい

Fluent UI BlazorのDataGridの使い方

Fluent UI BlazorのDataGridの使い方

tomokusaba

More Decks by tomokusaba

Other Decks in Programming

Featured

Transcript