Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fluent UI BlazorのDataGridの使い方
Search
tomokusaba
October 27, 2023
Programming
0
1.6k
Fluent UI BlazorのDataGridの使い方
.NETラボ勉強会2023年10月
Fluent UI BlazorのDataGridの使い方
https://dotnetlab.connpass.com/event/296773/
tomokusaba
October 27, 2023
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
GitHub Copilot の概要
tomokusaba
1
160
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
490
Azure AI Foundry Agent Serviceを使用してコードファースト アプリを構築する
tomokusaba
1
300
Part1 GitHubってなんだろう?その1
tomokusaba
3
960
Part1 GitHubってなんだろう?その2
tomokusaba
2
930
Part2 GitHub Copilotってなんだろう
tomokusaba
2
1.1k
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
930
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
340
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
270
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
950
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
970
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
AIともっと楽するE2Eテスト
myohei
8
3k
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
450
Why Our Code Smells
bkeepers
PRO
337
57k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Transcript
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
おしまい おしまい