在Blazor使用Fluent UI元件-3

 作者：許薰尹  精誠資訊/恆逸教育訓練中心資深講師

在本站《在Blazor使用Fluent UI元件 - 1》與《在Blazor使用Fluent UI元件 - 2》一文介紹如何在現有的Blazor專案中，手動加入Fluent UI元件的功能。在這一篇文章中，我們將介紹延續這系列文章的情境，介紹Fluent UI套件中「FluentDataGrid」元件的功能。

在Blazor使用Fluent UI元件-2

 作者：許薰尹  精誠資訊/恆逸教育訓練中心資深講師

Fluent UI 是 Microsoft 提供的一套 UI 框架，提供了許多預先設計好的元件，如按鈕、輸入方塊、下拉式選單等，讓開發者不需從無到有，可以快速地建立出具有一致性、豐富又美觀的使用者介面。

在本站《在Blazor使用Fluent UI元件 - 1》一文中介紹如何使用Fluent UI Blazor官方提供的專案範本來建立應用程式。在這一篇文章中，我們將介紹如何在現有的Blazor專案中，手動加入Fluent UI元件的功能。

建立Blazor專案

首先使用Visual Studio 2022開發工具建立一個Blazor專案開始，建立步驟如下：啟動Visual Studio 2022開發環境，從「開始」視窗選取「Create a new project」選項。從Visual Studio 2022開發工具的「Create a new project」對話盒中，選取 使用C# 語法的「Blazor Web App 」項目，然後按一下「Next」按鈕，請參考下圖所示：

圖 1：使用「Blazor Web App 」項目建立專案。

在Blazor使用Fluent UI元件 - 1

作者：許薰尹  精誠資訊/恆逸教育訓練中心資深講師

Fluent UI Blazor 是一個由微軟開發的開源元件庫，可以讓程式開發人員在 Blazor 應用程式中使用 Fluent UI 來設計系統。Fluent UI 是一種設計套件，可幫助開發人員建立美觀、一致且易於使用的使用者介面。

 
Fluent UI Blazor 元件庫目前包含了超過 40 幾個元件，涵蓋了應用程式或網站中常見的使用者介面元素，例如按鈕、文字方塊、下拉式選單、表格、圖表等等。這些元件經過精心設計，可與 Fluent UI 設計系統的其餘部分無縫整合。

 
Fluent UI Blazor 元件庫的主要功能包括：
• 豐富的元件庫：包含超過 40 幾個常用元件，可滿足各種使用者介面需求。
• 易於使用：元件採用簡單易懂的 API，可快速上手，學習曲線短。
• 允許客製化：元件可根據需要進行客製化，以符合特定的設計的要求。
• 無障礙性：元件遵循無障礙性最佳做法，可供所有人使用。

 
Fluent UI Blazor 元件庫適用於以下場景：
• 建立新的 Blazor 應用程式。
• 將 Fluent UI 設計系統到用到現有的 Blazor 應用程式之中。
• 加速 Blazor 應用程式的使用者介面設計動作。

 
使用 Fluent UI Blazor 元件庫的優點包括：
• 可提高開發效率：使用現成的元件可節省開發時間和精力。
• 提升使用者體驗：Fluent UI 設計系統可幫助建立美觀、一致且易於使用的使用者介面。
• 降低維護成本：元件經過良好測試和維護，可降低應用程式的維護成本。

在這一篇文章中，我們將介紹一些適用於.NET 8，可在Blazor應用程式使用的Fluent UI元件基本功能。

安裝 Microsoft.FluentUI.AspNetCore.Templates套件
想要在Blazor應用程式之中開始使用 Fluent UI Blazor 元件進行設計的最簡單方法，就是利用官方提供的專案範本。專案範本可從以下網址下載：

https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates 

請參考下圖所示：

 

【恆逸達人學習故事】蔡晉錄：十幾年來堅持選擇恆逸，因為授課講師的高品質，讓我回到工作上面對各種問題都能迎刃而解，是我最為推崇的！

    

▍ 恆逸達人學習故事  ▍

資訊技術不斷推陳出新，想讓IT職涯發展更順遂需要不斷的精進技能
但是各種不同的技術課程與學習資源，該如何選擇最適合自己的呢？

本專欄分享來自各行各業IT人在恆逸的學習故事
從初入社會的新鮮人、到專業IT工程師、一路到技術主管或管理職
在職涯的不同階段，仍持續回到恆逸不斷累積他們的技術能量
從他們的經驗分享中，體會他們走過的職涯軌跡、及技術轉變上的心路歷程
看他們如何一步步規劃IT進修藍圖，為職涯做好準備！