Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fluent UI BlazorのDataGridの使い方

tomokusaba
October 27, 2023

Fluent UI BlazorのDataGridの使い方

.NETラボ勉強会2023年10月
Fluent UI BlazorのDataGridの使い方
https://dotnetlab.connpass.com/event/296773/

tomokusaba

October 27, 2023
Tweet

More Decks by tomokusaba

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 本題の前に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に移行が推奨

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Fluent UIのすすめ
    • Fluent UIにはデザインシステムとしての設計ガイドラインがある
    • アクセシビリティの配慮、レウアウトの方法、色の使用法などUIコ
    ンポーネントを使用してそれらを配置する方法について語られて

    • これらを遵守することでシステム間をまたがった同等の操作性が
    実現

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    • 2点でどの行をのボタンが押されたかを識別する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. ??タイトルが長文になるのを折り返した

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. おしまい
    おしまい

    View full-size slide