Baaijte

What's new for the Microsoft Fluent UI Blazor library 5.0 RC1

2026-02-19T14:38:32Z

Today we are thrilled to publish the first Release Candidate of the Fluent UI Blazor library v5! This major release marks a significant evolution for the library, bringing a new foundation built on top of the latest Fluent UI Web Components, powerful new components, a game-changing Default Values system, and first-class Localization support.

A New Foundation: Fluent UI Web Components 3

V5 represents a fundamental shift in the underlying rendering layer. The library has moved away from the previous FAST-based web components and now uses the new Fluent UI Web Components v3 — the very same components that power Microsoft’s own products like Microsoft 365, Teams, and Windows 11.

What does this mean for you?

Pixel-perfect Fluent 2 design. Your Blazor components now render with the exact same look and feel as Microsoft’s own products. No more subtle visual discrepancies.
Better performance. The new web components are lighter and more efficient. The reduced JavaScript footprint leads to faster initial load times and smoother interactions.
Improved accessibility. Accessibility is a first-class citizen in the new web component layer, delivering WCAG 2.1 AA compliance out of the box.
Reduced bundle size. By removing the legacy FAST dependency, the overall package size has been significantly trimmed.

What changes in your code?

For most existing components, the migration is quite seamless. Your Blazor markup stays the same. The library still exposes the same FluentButton, FluentSelect, and other components you already know. Under the hood, these components now render using the new Fluent UI Web Components.

However, because the web components are now aligned to the Fluent UI React components with regards to attribute names, we needed to make significant changes a lot of our components as well. We created a lot of documentation to help you migrate.

In addition, we are also providing a MCP Server for this version of the library. This will be your helpful assistant for migration and development on a daily basis.

No additional JavaScript or CSS file references are required. The library handles everything automatically. The web component scripts are included and loaded automatically by the library.

Getting started

Install the NuGet packages:

dotnet add package Microsoft.FluentUI.AspNetCore.Components --prerelease
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

Add the namespace to your _Imports.razor:

@using Microsoft.FluentUI.AspNetCore.Components
@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons

builder.Services.AddFluentUIComponents();

And add the provider component at the end of your MainLayout.razor:

@* Add all FluentUI Blazor Providers *@
<FluentProviders />

That’s it. You are now ready to start building your applications with the Fluent UI Blazor library v5.

The New `FluentLayout` Component

V5 introduces a completely redesigned FluentLayout component that serves as the structural backbone for your application. Rather than manually composing CSS Grid or Flexbox layouts, FluentLayout provides a declarative, area-based system for building full-page layouts with a fixed header, navigation panel, content area, and footer.

Area-based layout

The key concept is a FluentLayoutItem with a LayoutArea. You declare where each piece of content should go, and the layout engine handles the rest:

@inherits LayoutComponentBase

<FluentLayout>

    <!-- Header -->
    <FluentLayoutItem Area="@LayoutArea.Header">
        <FluentStack VerticalAlignment="VerticalAlignment.Center">
            <FluentLayoutHamburger />
            <FluentText Weight="TextWeight.Bold"
                        Size="TextSize.Size400">
                My Application
            </FluentText>
            <FluentSpacer />
        </FluentStack>
    </FluentLayoutItem>

    <!-- Navigation -->
    <FluentLayoutItem Area="@LayoutArea.Navigation"
                      Width="250px">
        <NavMenu />
    </FluentLayoutItem>

    <!-- Content -->
    <FluentLayoutItem Area="@LayoutArea.Content"
                      Padding="@Padding.All3">
        @Body
    </FluentLayoutItem>

    <!-- Footer -->
    <FluentLayoutItem Area="@LayoutArea.Footer">
        Powered by Microsoft Fluent UI Blazor
    </FluentLayoutItem>

</FluentLayout>

<FluentProviders />

Notice the FluentLayoutHamburger component in the header. This renders a hamburger button that automatically toggles the navigation panel. Complete with smooth animations and responsive behavior. No extra JavaScript needed.

Why this matters

Consistent structure. Every page in your application follows the same layout contract. No more layout drift.
Responsive by design. The navigation panel collapses automatically on smaller screens.
Typed areas. Using LayoutArea.Header, LayoutArea.Navigation, LayoutArea.Content, and LayoutArea.Footer ensures you can’t misplace content.
Customizable sizing. Control the width of the navigation panel, padding of content areas, and more through simple parameters.

For more layout examples, visit the FluentLayout documentation.

Default Values

One of the most important and eagerly awaited features in v5 is the Default Values system. This powerful mechanism lets you define global default parameter values for any Fluent UI component — once — and have them applied everywhere in your application.

The problem it solves

In earlier versions, if you wanted all your buttons to use a specific appearance, you had to set it on every single instance:

<FluentButton Appearance="ButtonAppearance.Primary">Save</FluentButton>
<FluentButton Appearance="ButtonAppearance.Primary">Submit</FluentButton>
<FluentButton Appearance="ButtonAppearance.Primary">Confirm</FluentButton>

This was tedious, error-prone, and a maintenance nightmare. Making a design change meant touching potentially hundreds of files.

The solution

With v5, you can configure default values globally in your Program.cs as follows:

builder.Services.AddFluentUIComponents(config =>
{
    // Set default values for FluentButton component
    config.DefaultValues.For<FluentButton>()
          .Set(p => p.Appearance, ButtonAppearance.Primary);
    config.DefaultValues.For<FluentButton>()
          .Set(p => p.Shape, ButtonShape.Circular);
});

Now every FluentButton in your application automatically uses the Primary appearance and Circular shape. Unless you explicitly override it on a specific instance:

<!-- Uses global defaults (Primary + Circular) -->
<FluentButton>Save</FluentButton>

<!-- Override just the appearance for this instance -->
<FluentButton Appearance="ButtonAppearance.Outline">Cancel</FluentButton>

Key benefits

Single source of truth. Define your design decisions once, apply them everywhere.
Easy branding. Switch your entire application’s look by changing a few lines in Program.cs.
Explicit overrides. Any component instance can still override defaults with a local parameter.
Strongly typed. The API uses lambda expressions — full IntelliSense, no magic strings.
Maintainable. Changing a design decision no longer requires a massive find-and-replace.

This feature is particularly powerful for organizations that need consistent component styling across large applications or shared design systems.

Localization Support

V5 introduces a built-in Localization system that makes it easy to translate all component-internal strings — button labels, ARIA attributes, accessibility texts, and more — into any language.

How it works

The library ships with English strings by default. To localize components, implement the IFluentLocalizer interface:

using Microsoft.FluentUI.AspNetCore.Components;

public class CustomFluentLocalizer : IFluentLocalizer
{
    public string this[string key, params object[] arguments]
    {
        get
        {
            return key switch
            {
                "SomeKey" => "Your Custom Translation",
                "AnotherKey" => string.Format("Another Translation {0}", arguments),

                // Fallback to English if no translation is found
                _ => IFluentLocalizer.GetDefault(key, arguments),
            };
        }
    }
}

builder.Services.AddFluentUIComponents(config =>
    config.Localizer = new CustomFluentLocalizer());

You can also use your embedded resources (.resx) for multilingual support. Everything is documented on our website. The component documentation pages give an overview of the strings that can be localized. The earlier mentioned MCP server can be of help there as well.

Try It Now

Resource	Link
Package available on Nuget	`Microsoft.FluentUI.AspNetCore.Components --prerelease`
Documentation	https://fluentui-blazor-v5.azurewebsites.net
GitHub (v5 branch)	https://github.com/microsoft/fluentui-blazor/tree/dev-v5
Migration guide	Migration to v5

Final remarks

This is our first Release Candidate. The API surface is fairly stabilized.

We are counting on the community to help us identify any remaining issues! Please file issue reports on GitHub (with ready-to-run reproduction code), and don’t hesitate to contribute.

Several components are still missing. We are currently working on those nd they will come with the next RC's. See the dev-v5 - TODO List for an overview

A big 'thank you' to everyone who has already contributed, tested, and provided feedback throughout the (long) v5 development cycle. We’re incredibly excited about this release and can’t wait to see what you build with it!

What's new for the Microsoft Fluent UI Blazor library 4.14

2026-02-12T19:14:51Z

Although we are now fully focused on delivering you a great v5 version of the library in the near future, we did manage to get an update for v4 out the door. This includes one highly demanded feature that warranted the jump to a new minor by itself.

That feature we've added is the possibility to use hierarchical data in the DataGrid (we are way past just adding a row click event ??)! I'll tell a bit more about that below.

Other notable things we did in this release are:

The usual document and demo site updates
Update the icons library to the latest Fluent UI System Icons release (1.1.318)
Fix 3 other DataGrid issues
Update, extend and fix issues in 5 other components

The complete overview can be seen on the site at the What's New page

But what about 4.12 and 4.13?

Yeah, sorry about that. We did have add some very nice additions and new capabilities in those versions as well. I was too busy however with starting a new job (outside of Microsoft) and working on the v5 version that writing these release Blog posts fell too far down (or actually off) the ToDo-list.

Now, I won't go into too much detail on the changes in those versions here, but I'll provide a short summary. For the full details see the page I linked to in the previous section.

Highlights

Added support for .NET 10 (both in offering a compiled version in our package as well as full template support)
DataGrid enhancements for async loading, for the SelectColumn and a full column resize handle
Menu fixes for dispose errors
AutoComplete: new feature and overrides
Dialog: Return focus to initiator when dialog is closed and offer a way to specify header typography
And much more...

In total 34 components have seen changes,fixes and or enhancements in these 2 minor version releases. Important to re-iterate again: not all changes were made by us. We say a heartfelt "thank you!" to a (still growing) group of contributors.

The hierarchical DataGrid

The Aspire team has had expendable/collapsible rows in their Resources page in the Dashboard for a while already. It was however a custom coded implementation that was geared specifically towards being used in Aspire. With some help from my Copilot friends, Claude and Gemini, I was able to provide a generic solution that can work for and with any type of row data, as long as both the parent and the child rows have the same properties (i.e. show the same columns).

The functionality is powered by the IHierarchicalGridItem interface, which allows developers to transform a flat list of data into a navigable tree structure within the grid.

How IHierarchicalGridItem Works

The IHierarchicalGridItem interface acts as a contract for your data model, providing the metadata necessary for the grid to manage parent-child relationships and display states. It includes four key properties:

Depth: Defines the level of an item (starting at 0 for root items).
HasChildren: A boolean that tells the grid whether to render an expand/collapse toggle for that specific row.
IsCollapsed: Manages the visibility state of the item's descendants.
IsHidden: Indicates if the row should be rendered at all (e.g., when a parent higher up the tree is collapsed).

Enabling Hierarchy in FluentDataGrid

To implement hierarchical data, a TGridItem must implement this interface. The FluentDataGrid then uses this metadata to automate the complex parts of tree-view rendering:

Visual Indentation: The grid automatically calculates and applies margin-inline-start based on the Depth property, ensuring clear visual separation between levels.
State Management: When a user clicks the expand/collapse button, the grid invokes ToggleExpandedAsync(TGridItem). This internal method flips the IsCollapsed state and triggers a data refresh.
Flat-to-Hierarchical UI: While the underlying Items or ItemsProvider usually provides a flattened list of items, the grid uses the interface properties to decide which rows to show and how to style them.
Custom Logic: The OnToggle event callback allows you to perform additional actions, such as lazy-loading child items from a database only when a node is expanded.

By leveraging IHierarchicalGridItem, you can build sophisticated, performant tree-grids that maintain the same familiar API as the standard FluentDataGrid.

Both 2-level and multi-level examples have been added to the demo site. See the DataGrid - Hierarchical data page. And yes, the hierarchical functionality works together with the resize functionality perfectly well.

What's next

We are currently focusing almost exclusively on getting the v5 version ready. There are only a few components left that we want to tackle before the final release. I think we will have a near feature complete release candidate in the coming weeks. In the mean time, check out the v5 demo site to see how far we are already. Trust me, you won't be disappointed by the speed and quality of these new components!

What's next: the Fluent UI Blazor library v5

2025-02-22T13:28:01Z

Web Components v3

As you might know, our current Fluent UI Blazor library v4 uses and wraps the Fluent UI Web Components v2 release for a lot of the Blazor components. The team developing the Fluent UI Web Components is now hard at work on creating the v3 version of the Fluent UI Web Components. Beta versions of v3 are available and an RC is expected soon. Because of that work, there are no updates coming anymore for v2.

A lot of changes are being made to property and attribute names, enumeration values, etc., to align with the Fluent UI Web Components more closely with the Fluent UI React v9 and vNext components.

Feature parity

The number of Web Components available with v3 will be less than what we have now with v2. It is expected that incremental releases adding new components will become available after the first 'GA' release of v3.

Recap

If you are new to all of this, here is a short recap of what the Fluent UI Web Components are:

Microsoft's Fluent UI Web Components is designed to help you build web apps using Web Components styled with the Fluent design language.

Each component is designed to adhere to the following standards:

Customizable: Fluent-styled components by default, but easy to integrate your own brand and theme
Performance: Optimized for performance
Bundle size: Refactored and slimmed down components that allow you to include the packages and dependencies you need
Interoperability: Works with any modern JavaScript framework
Accessibility: WCAG 2.1 compliant and tested by trusted testers
Design to Code: Stay up to date with Fluent Design Language changes via Design Tokens

What are Web Components?

"Web Components" is an umbrella term that refers to a collection of web standards focused on enabling the creation of custom HTML elements. Some of the standards that are under the umbrella include the ability to define new HTML tags, plug into a standard component lifecycle, encapsulate HTML rendering and CSS, parameterize CSS, skin components, and more. Each of these platform features is defined by the W3C and has shipped in every major browser today.

How does Fluent UI Web Components leverage Web Components?

Fluent UI Web Components is built directly on the W3C Web Component standards, and does not create its own component model. This allows our components to function the same as built-in, native HTML elements. You do not need a framework to use Fluent UI components but you can use them in combination with any framework or library of your choice. Here we are focusing on the Fluent UI Blazor library.

Fluent UI Blazor Library v4

This is the version we currently have and support*. It is not tied to the .NET 8 release and support policy officially, but we aim to follow that. This means v4 will stay supported until November 2026. It does not mean we will keep adding new functionality to that version until Nov 2026 as well.

Once our next major version (v5) reaches a level of maturity where we are confident it can be used as a replacement for v4, the latter will enter a phase of being 'on life support'. New releases will be made available soon after .NET 8 patches are released. But bug fixing will be minimal and no new functionality will be added in that period. Just to re-iterate the current situation:

*This is a pure open-soure project. The library is not an official part of ASP.NET Core. This means the packages are not officially supported and we are not committed to shipping updates as part of any official .NET updates. It is built and maintained by Microsoft employees (and external contributors) and offers support, like most other open-source projects, on a best effort base through the GitHub repository only. No support is offered through any of Microsoft's official support channels.

Fluent UI Blazor Library v5

For our next major version, v5, we are using the new v3 Fluent UI Web Components. We have started work on this already and progress can be followed in the dev-v5 branch in our repo. We are trying to see if we can make preview packages available as well.

With the big changes made on the Web Components side for the v3 release, a lot of changes are necessary on our side as well. This implies the will be a number of breaking changes when you want to move your v4 based code to v5. Where possible, we are aiming to provide helpers and/or utility methods to make incorporating those changes in your code base easier. We are also putting a lot off effort into migration documentation.

Not a simple drop-in replacement

We want tot position v5 not as a direct replacement or upgrade from v4 in a traditional sense but rather as a new and improved version with different, better and more modern implementations, both from the Web Components as from a pure code perspective.

By making these major changes, we're also taking advantage of the experience gained, and feedback gathered from users, over the last 3.5 years. We are considerably improving performance and usability of a number of components. As an example, the FluentDialog will be simpler, more complete and will use the standard HTML <dialog> tag, offering greater scope for customization.

With the support model we have in mind, you can continue to use the library in a safe and secure way until, at least, November 2026. We don't think there is an immediate need to upgrade to the v5 version once that is released. For new projects, we do think it makes sense to use v5 from the start.

We are not waiting with releasing v5 till the Fluent UI Web Component v3 collection is on par what is available with v2. There is a very real chance that won't ever happen at all, as not all v2 components are destined to come to v3. In some cases we will provide Blazor components for things that the v3 Web Components won't provide. As an example of that, we have altered the DataGrid to not depend on Web Components anymore but use HTML table elements for rendering its UI components.

Because of the differences in the sets of Fluent UI Web Components and the changes within those components, upgrading a project that currently uses the Fluent UI Blazor library v4 will not just be a matter of installing the new package(s). We would have loved to be able to make it like that but circumstances beyond our control make that impossible unfortunately. And we certainly do not want to make promises we can't keep.

As mentioned, we think we will offer a great new version of the Fluent UI Blazor library with v5. We look forward to working together with the community to make it a success!

What's new for the Microsoft Fluent UI Blazor library 4.11

2025-01-15T09:39:57Z

Just before the end of year holiday period, we are bringing you a new version. Before you start upgrading though, please go through the post here and the notes on the site first. We have made some breaking changes. Don't let them catch you by surprise and ruin that wonderful Christmas spirit.

Although the number of PRs that went into this release is not that big, the changes those PRs brought were pretty big. In total we had well over 30 PRs merged. As always, first the highlights and then the extended descriptions.

V3 out of support
Templates: 2 updated and 2 new templates
DataGrid: HTML table, rendering, ODATA adapter and (experimental) saving paging state in the URL
MessageBox: Allow HTML markup in message
Rating: improved a11y support
TextField: support for additional field types

For a complete overview of all the changes, please see the What's New page on our demo and documentation site.

Again, please also see the What's new? and Upgrade Guide pages for important information about breaking changes

V3 out of support

With the release of .NET 9 on November 12th, .NET 7 officially went out of support. With that, our support for v3 of the library (which used the Microsoft.Fast.Components.FluentUI namespace) came to an end as well. With well over 1.1 million downloads of just the core v3 package, we can safely say it laid the groundwork for the success the library has now.

Both .NET 6 and ,NET 7 won't get any security updates anymore. We also don't plan to release any updates to our v3 packages anymore and strongly advise you to move to one of the newer .NET versions (and our v4 packages). That being said, it is of course not that the v3 components suddenly don't work anymore. Just be aware of the danger involved and do not open new issues in our repo anymore. We won't be spending any time on them.

Templates: 2 updates and 2 new additions

The Microsoft.FluentUI.AspNetCore.Templates package already contained (fully equivalent code and functionality) copies of the Blazor Web App and Blazor WebAssembly Standalone App templates. With this release these templates have been updated to the latest versions. This means you now have the choice to create a new Fluent Blazor application that targets either .NET 8 or .NET 9 with everything already set up for you.

Fluent .NET Aspire Starter App

We are happy to report that the new version of the template package now also support creating a Fluent-ready version of the Aspire Starter App. Just like with the other templates, this one also completely mirrors the functionality from the standard version and comes with Fluent set up and ready to run. We might be biased, but we think this accompanies the Dashboard perfectly ??.

Fluent .NET MAUI Blazor Hybrid and Web App

With this release we also bring the new combined Blazor Hybrid and Blazor Web app template (new for .NET 9) available in a Fluent-ready version. We took care of setting everything up already (and even removed Bootstrap for you).

See the Learn article for details on what the template (and subsequently our version as well) offers

How to use the templates

After you've installed the templates package, you can create a new project in Visual Studio. Just search for 'Fluent' in the 'Create a new project' dialog or select one of the applicable project types from the drop-down to find the Fluent templates.

If you rather work from the command line, that is fully supported as well. Just put 'fluent' in front of any of the 4 short names (i.e. blazor --> fluentblazor) to start creating your Fluent apps.

DataGrid: Rendering, ODATA Adapter and saving paging state

Rendering

We are currently working on a new major version of the library. You can read more about that at the end of this article. Because of that work and also because of performance reasons, we have decided to 'swap out' the web components based rendering of the DataGrid to an HTML table elements based rendering. We took great care to make the transition as smooth as possible but we also did make quite a few changes to class names and styling.

If you were overriding/changing DataGrid rendering in previous versions, chances are that these will break with this release.

Resizing columns, presenting column filtering and sorting options have been made more accessible and by using parameters you can now choose how to present these to the end users. See the example in the demo site for which options are available and how you can use these.

Besides the rendering of the DataGrid, the following (breaking) changes have been made

If you have rows in a table with content that needs to span multiple lines, you now need to use and set the new MultiLine (bool) parameter of the FluentDataGrid. Previously this could be done by setting a RowClass on a column but that does not work anymore.
The parameter ResizeLabel has been removed in favor of 3 new parameters that make changing strings in the DataGrid UI easier. We now have ColumnOptionLabels, ColumnResizeLabels and ColumnSortLabels where each parameter is a record that contains properties for the strings that that specific piece of UI is using. There is a default implementation provided for each record. You can override the values like this:

private ColumnResizeLabels _resizeLabels = ColumnResizeLabels.Default;
private ColumnSortLabels _sortLabels = ColumnSortLabels.Default;
:
:
 protected override async Task OnInitializedAsync()
 {
     _resizeLabels = ColumnResizeLabels.Default with
     {
         ExactLabel = "...",
         ResizeMenu = "..."

     };
     _sortLabels = ColumnSortLabels.Default with
     {
         SortMenu = "...",
         SortMenuAscendingLabel = "..."
         SortMenuDescendingLabel = "..."

     };
:
:

You only need to override the values that you actually want to change.

A couple of our users (and we ourselves) have tested these changes extensively and are confident the breaking changes won't be that hard to fix. If you are running into issues, please let us know, as always, in the repo

OData Adapter

Through a community contribution, we now have a new adapter package available which adds an Implementation of an OData IAsyncQueryExecutor. Use this package if the data you want to display in the FluentDataGrid that comes from Microsoft.OData.Client.

Microsoft OData Client library's DataServiceContext gives you a DataServiceQuery property for each resource in your OData service endpoint. Simply supply this as the grid's Items parameter:

@inject DataServiceContext MyServiceContext

<FluentDataGrid RowsData="@MyServiceContext.People">
    ...
</FluentDataGrid>

You may also use any DataServiceQuery-supported LINQ operator to filter the data before passing it:

@inject DataServiceContext MyServiceContext

<FluentDataGrid RowsData="@MyServiceContext.Documents.Where(d => d.CategoryId == currentCategoryId)">
    ...
</FluentDataGrid>

To use this adapter, install the package and add the required code to your Program.cs:

builder.Services.AddDataGridODataAdapter();

Experimental: Save paging state in the URL

Also added through a community contribution, it is now possible to save the paging state of a DataGrid in the URL of the page. THis opt-in functionality is available by adding a parameter to your DataGrid: SaveStateInUrl="true". When using multiple grids on a page, you can also specify a SaveStatePrefix like this SaveStatePrefix="g1"

This will result in

This is still an experimental feature, which might cause unwanted jumping in the page when you change something in the grid.

MessageBox: HTML Markup in the message

The MessageBox always had an option to display markup in the message shown. That was however only possible to achieve if you used the ShowMessageBox \ ShowMessageBoxAsync methods. With this release you can now also supply markup text through our convenience methods like ShowConfirmationAsync. The code looks like this:

private async Task ShowConfirmationAsync()
{
    var dialog = await DialogService.ShowConfirmationAsync("Are you <strong>sure</strong> you want to delete this item? <br /><br />This will also remove any linked items");
    var result = await dialog.Result;
    canceled = result.Cancelled;
}

which would then render like:

TextField: Additional field types

With another great community contribution, we now support more types for the TextField. The Color, Search and Number options have been added to the TextFieldType and can be used in your applications now.

And much more...

There are many, many more PRs that got merged for this release. We can not discuss all of them here. As always, please see the What's new page on the docs site or the releases page on GitHub for a complete overview.

Special thanks

Besides all our appreciated existing contributors, we would especially like to thank our new contributors @bejulian, @svrooij, @maNobly and @adamint!

What's next?

I'd like to point you to What's next: the Fluent UI Blazor library v5 here on this site and the GitHub discussion about that article. We value your opinion and would love to hear your thoughts! If you're celebrating, have a great holiday!

What's new for the Microsoft Fluent UI Blazor library 4.10

2024-09-09T15:01:09Z

Hi. Hope you had a great summer break. I know I did!

(Bonus points if you can guess where this picture was taken)

Now that we are back at it, it is time for a new release. We have in total 30 PRs merged for this release (besides some smaller, not PR based, changes) and I won't of course go into all of those here. As always, the complete list is available at the What's New page on our demo and documentation site. If you want to see all the source code changes since the last release, you can go to our GitHub releases page.

In this blog I'll highlight the following changes and (new) features :

Added .NET 9.0 support
Several DataGrid enhancements
Use double click to quickly select a date in the DatePicker
New FluentMenuProvider component

Not really new, but bears repeating

Preview packages feed available

.NET 9 support

Now that we are almost at the RC phase of the .NET 9 development cycle, we've added this version to the frameworks we are building against! This means our packages will now include both .NET 8 and .NET 9 DLLs and you can profit from the standard Blazor enhancements like faster WASM startup time and improved Server re-connection logic in your library based applications as well.

DataGrid enhancements

The DataGrid remains one of the most used components and it is therefore only logical this received most changes in this release. In summary:

Add AutoFit feature to size columns automatically as good as possible
Add parameter to provide labels to resize UI
Don't use hover effect on header rows
Fix pagination when using itemprovider
Fix resizing to initial column widths
Improve data refresh logic
Add a new way to render column actions
Trigger OnRowClick on keyboard enter in DataGrid row (a11y)

There is quite a bit to unpack here, so let's go into some details

AutoFit

This (community contributed!) feature in short uses an algorithm that follows the following pattern:

Get the available width for the grid
Loop through the columns and find (flatMap) the biggest width of each cell of the column
Add up those values to see how much room the cell widths exceed the overall available width
Calculate the ratio and apply said ratio to each column width while building the grid-template-columns string

In general this works really well, but YMMV. It is an optional behavior and you can decide for yourself if you want to use this or not. One caveat is that this does not work when your grid is using virtualization (as we can't go through all the rows then). See before and after screenshots below to see the difference.

Resizing to initial column widths

When you use Shift+r on a page with multiple DataGrids, the results were not always what you expected. Sometimes all grid columns would reset to just one single configuration.. We have now changed this so the configuration will be restored per grid.

Improve data refresh logic

Another (!) great community contribution improves the data refresh logic in the FluentDataGrid component. It now handles state changes, particularly those related to pagination, much better. It also addresses potential inconsistencies that could occur during rapid state changes or when other events trigger state updates.

Provide new way to render column actions

Inspired by Aspire, I've added a new way to render column actions (sort, resize and options (filter)) by using a menu shown when clicking on a column header:

As can be seen in the image, the current sort direction is displayed on the menu item. The sort direction and filter state are shown on the header with icons.

Which items are displayed on a menu is dependent on the parameters you set on the columns in the grid. When a column is not sortable, its menu won't show the 'Sort' menu item. If there is also no column options/filter specified, it will directly show the Resize UI (in this case because ResizeType.Discrete has been set on the grid):

When a DataGrid is not resizable and a column does not have any options ui (no filter) applied, the header button still functions as a sort button directly:

The 'Bronze' column is not sortable and therefore shows a disabled cursor (not shown in the screengrab)

Inspired by anthor PR mentioned above which makes it possible to supply labels to the grid's UI, there a now records for resize, sort and column options. The records supply default values when a developer does not make any changes.

For now, this new column action behavior is 'opt-in' and can be enabled by adding HeaderCellAsButtonWithMenu="true" (who says naming is hard?) in your data grid component tag. For the next minor release (4.11), I have some more DataGrid changes lined up and this behavior will then become the only way to work with column actions. This is done not just because of code maintenance but also to greatly improve accessibility.

Use double click to quickly select a date in the DatePicker

A requirement for a date picker is to be able to quickly select a certain data (for example the current date or the first of the month). With this community contribution we have added just that. You set the DoubleClickToDate parameter to a specific daet and then a double click sets the component to that date.

New `FluentMenuProvider`

We've updated the FluentMenu component to use the new FluentMenuProvider.

This `FluentMenuProvider is a new component that needs to be placed at the bottom of your layout (like the other Providers). It will then render all menus to this location in the HTML which allows menus to be drawn on top of other components.

You can disable this begavior by adding the UseMenuService="false" parameter to the menu component tag. In that case, a menu will render at the location of where your component tag is placed in the HTML code.

Example

The example below shows both behaviors. When UseMenuService="false", the menu is rendered where it is declared. This can pose encapsulation problems, depending on the container used (in this case, a FluentCard).

The second example uses the FluentMenuProvider to display the menu. In this case, the menu is generated at the end of the HTML page and attached to the button using the Anchor tag. To link the two elements, it's mandatory to use an Id identifier on the clickable element and an identical Anchor value on the menu.

By default, all FluentMenus will use this new behavior.

Preview packages NuGet feed

Every time a commit is pushed to our dev branch, the core library NuGet package gets published to a special NuGet preview feed.

To consume this preview package in your project, for testing purposes only, you need to add this feed to your project or development environment. An example of how to do this from the CLI is shown below:

dotnet nuget add source --name dotnet8
https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet8/nuget/v3/index.json

As the feed address shows, our packages are now created in the .NET Core Engineering environment (dnceng). A big step forward for the security, stability and longevity of the library!

The code will add the feed to your nuget.config file. See How to configure NuGet behavior? to learn more.

Alternatively, if you use Visual Studio, you can Install and manage packages in Visual Studio and add the https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet8/nuget/v3/index.json feed.

This NuGet is a preliminary version and is not intended for production use. It is only intended to be used to test the latest features and bug fixes and provide feedback to us on those.

The official published packages can be found on the public NuGet.org site like usual.

And more...

As mentioned, 30 PRs have been merged into this release. A complete overview can be found on the What’s new page on the documentation site or to the GitHub release page (including links to issues and change requests ).

A special thanks go out to @macel94, @danielpastoor, @RickyLin and @cduluCNB for making their first contributions!

And, of course, we are also grateful for the continued support of all our other contributors.

What's new for the Microsoft Fluent UI Blazor library 4.9

2024-07-04T07:33:00Z

Okay, I did not expect us to publish another new version before the summer holiday, but yet here we are. The amount of changes, additions, enhancements and fixes was too big to leave it lying around till later. Read on to find out about the most prominent highlights of this release. And enjoy the summer. I know I will!

New Rating component
DataGrid enhancements
CssBuilder- Add ValidateClassNames configuration
Select component - Better PlaceHolder support
DialogService - Add UpdateDialogAsync to refresh parameters and content while dialog is on screen
And more...

New Rating component

We’ve added a new FluentRating component that lets users assign a rating to a particular element. By default, the rating can be set to between 0 and 5 stars, but both the values and icon used can be customized. The current version does not support 0.5 increments/decrements yet.

This component is made accessible by adding the option to use the arrow keys to increase (→/↑) or decrease (←/↓) the value. Pressing Shift + {arrow} sets the value to either 0 or the configured maximum.

The component is derived from our base input component and can be bound and used in forms

Example code

<FluentRating Max="10" Value="2" Label="Test" />

DataGrid

We've made some significant changes in the DataGrid (and related components). In short:

Better WCAG 2.2 support - one-click column resizing
Added OnCellClick and SelectColumn.SelectFromEntireRow
Have Display attribute in enumerations shown in column values

Better WCAG 2.2 support - One-click column resizing.

To better comply with the accessibility WCAG 2.2 standard, we’ve added 2 ways to resize columns with a single click in addition to dragging the resize bar in the header. We are using the already available column options facility for displaying the user interface for this.

To enable this new functionality, a new ResizeType parameter has been added to the FluentDataGrid. You set its value to either DataGridResizeType.Discrete to resize the column the option is shown for in steps of -10 or +10 pixels as shown in the image below or DataGridResizeType.Exact to resize the column the option is shown for to the pixel value typed in.

If the parameter is not supplied, the resize options will not be shown. Obviously, the Resize parameter needs to be set to true for this as well. Both options also present a 'reset' option to go back to the orgiginal column sizes.

Add `SelectFromEntireRow` and `OnCellClick`

In response to user requests, we’ve added a SelectFromEntireRow parameter to the SelectColumn. Setting its value to false the user can not click anywhere on the grid row to select it, but only the radio button or check box can be used for that.

The default value for this new parameter is set to true maintain the existing current behavior.

We’ve also added an OnCellClick event to capture clicking on a specific cell.

Example code (simplified)

<FluentDataGrid Items="@People" TGridItem="Person">
    <SelectColumn TGridItem="Person"
                  SelectMode="..."
                  SelectFromEntireRow="@SelectFromEntireRow"
                  @bind-SelectedItems="@SelectedItems" />
    <PropertyColumn Width="100px" Property="@(p => p.PersonId)" />
    <PropertyColumn Width="300px" Property="@(p => p.Name)" />
    <PropertyColumn Width="150px" Property="@(p => p.BirthDate)" />
</FluentDataGrid>

Have Display attribute in enumerations shown in column values

When a PropertyColumn column in a DataGrid defines an expression, it always returns a string value. In the case of the value being an enumeration, it simply returns the string representation of that value. By using a DisplayAttribute, it is now possible to define a user-friendly name for this value.

Example code

public enum Positions
{
    employee,

    [Display(Name = "HR Manager (DA)")]    
    HRManager,

    [Display(Name = "Project Manager (DA)")]
    ProjectManager,

    [Display(Name = "Administrator (DA)")]
    Administrator
}

CssBuilder - Add a `ValidateClassNames` configuration option.

All styles used by the Fluent UI Blazor library are included in the package. You don’t need to do anything to include these in your project.

Of course you can always add your own styles too by using the Class and/or Style parameters on components. By default, classes are organized and verified by the component itself (specifically by checking that class names are valid).

Some frameworks, such as Tailwind, add class names which are invalidated by our verification process. For example, in Tailwind you'll see square brackets in class names , like min-h-[16px] or bg-[#ff0000]. We had some discussions on the repository whether such names are valid and/or following standards or not. Regardless of that, we do not want to break integration with Tailwind or other frameworks, so we have put an option in place to disable class name validation. This can be done by adding following code to the library service configuration in your Program.cs file:

Example code

builder.Services.AddFluentUIComponents(options =>
{
    options.ValidateClassNames = false;
});

Select component - Better `PlaceHolder` support.

The FluentSelect component can now correctly display a placeholder text. Initially a parameter for this was not present for this component. As a 'workaround' you can now add a 'fake' first option. This option will be displayed only when the user opens the component for the first time. The option disappears when the user selects another option for the list shown and will not be presented in the list on subsequent views.

Example code

<FluentSelect TOption="Person"
              Label="Select a person"
              Placeholder="Make a selection..."
              ... />

DialogService - Add `UpdateDialogAsync` to refresh parameters and content while dialog is on screen

The UpdateDialogAsync method is added to the DialogService to enable updating all dialog box data (Parameters and Content) while the dialog is being shown.

Example code (simplified)

var dialog = await dialogService.ShowDialogAsync<TestDialogHeaderFooter>(myUser, parameters);

parameters.Title = "My new title";
parameters.PrimaryAction = "Oh yes";
parameters.Content = new() { Id = 2, Name = "Denis" };

await dialogService.UpdateDialogAsync(dialog.Id, parameters);

NuGet package preview feed

Every time a commit is pushed to our dev branch, the main library NuGet package gets published on a special NuGet preview feed.

To consume this package in your project (for testing purposes only), you need to add tghis feed to your project or development environment. An example of how to do this from the CLI is shown below:

dotnet nuget add source --name dotnet8 https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet8/nuget/v3/index.json

As the feed address shows, our packages are now created in the .NET Core Engineering environment (dnceng). A big step forward for the security, stability and longevity of the library!

The code will add the feed to your nuget.config file. See How to configure NuGet behavior? to learn more.

Alternatively, if you use Visual Studio, you can Install and manage packages in Visual Studio and add the https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet8/nuget/v3/index.json feed.

?? This NuGet is a preliminary version and is not intended for production use. It is intended to be used to test the latest features and bug fixes.

If you only want the use the official published packages, you can find these on the public NuGet.org site.

And more...

Well, quite a few PR's have been merged in in this version again. Please see the What’s new page on the documentation site or to the GitHub release page for a complete overview (including links to issues and change requests on GitHub).

A special thanks go out to @mobinseven, @Christo262 and @franklupo (Daniele Corsini, did most of the work on the Rating component) for their first contributions!

And, of course, we are also grateful for the continued support of all other contributors.

What's new for the Microsoft Fluent UI Blazor library 4.8

2024-06-15T12:44:21Z

Before we can all go out and enjoy our well deserved summer break, we are happy to bring you a new version of the Fluent UI Blazor library. In this version, we've added some awesome new features to existing components, fixed quite some issues, made 1 (small) breaking change and worked hard to just make the library better overall.

The list of changes and additions is too long to describe all of them here. The full list can be found on our GitHub releases page or at the What's New page on our demo and documentation site. In this blog the following changes and (new) features will be highlighted:

Breaking change in Option<TType>-class
Calendar now offers date range selection
List components now inherit from FluentInputBase
Autocomplete can sets its height automatically
NavMenu now works better in mobile views
ProfileMenu adds StartTemplate and EndTemplate
TreeView now supports Items and LazyLoadItems parameters
Preview packages feed available

Breaking change in `Option<TType>`-class

The Option<TType>-type is a utility class that can be used to define list of options that are presented in a FluentSelect or any of the other list components. We have examples of showing how this work available on the demo site.

Originally, the Text property in this class was of type TType?. We've changed this in this release so that this property is now of type string?, which, we think, makes much more sense. (The Value property of this type remains as-is (TType?).)

If you are using this type, you'll most probably need to make some (small and simple) changes in your code after upgrading to this version.

Calendar now offers date range selection

Besides offering more ways of selecting dates in the FluentCalendar component, we have now also added date range selection capabilities.

Initially, this feature will only be available for the FluentCalendar with View=Days.

A new bindable property SelectedDates is added to retrieve the selected dates. We also added a SelectDatesHover method that returns a list of dates to be pre-selected on hover. The dates will be selected when the user clicks on this selection. This allows for enabling options such as selecting an entire week or work-week with a single click.

The @bind-SelectedDates:after command can be used to validate the content of selected dates, block or remove them if necessary, or even display an error message.

Code example

<FluentCalendar @bind-SelectedDates="@SelectedRangeCustomized"
                SelectDatesHover="@SelectOneWeek"
                SelectMode="CalendarSelectMode.Range" />

<FluentCalendar @bind-SelectedDates="@SelectedDaysCustomized"
                SelectDatesHover="@Select3Days"
                SelectMode="CalendarSelectMode.Multiple" />

@code
{
    private ICollection<DateTime> SelectedRangeCustomized = new List<DateTime>();
    private ICollection<DateTime> SelectedDaysCustomized = new List<DateTime>();

    private IEnumerable<DateTime> SelectOneWeek(DateTime date)
    {
        return new[] { date.StartOfWeek(), date.StartOfWeek().AddDays(6) };
    }

    private IEnumerable<DateTime> Select3Days(DateTime date)
    {
        return Enumerable.Range(0, 3).Select(i => date.AddDays(i));
    }
}

List components now inherit from `FluentInputBase`

The list components (FluentAutoComplete, FluentCombobox, FluentListbox and FluentSelect) now inherit from FluentInputBase instead of FluentComponentBase.

This allows for the components to partake in form validation and be marked as invalid.

Note: Marking a FluentAutocomplete component as invalid does not work yet.

Autocomplete can set its height automatically

We adding a new MaxAutoHeight parameter to the Autocomplete component. By using this, you can make the component use an auto-height with a maximum size. If a value is not set (or is null), the current behavior (a single line with horizontal scroll capabillity) is used.

<FluentAutocomplete MaxAutoHeight="60px" ... />

NavMenu now works better in mobile views

Both the demo site and template created sites now work the same when a NavMenu is shown in a mobile view. Clicking on either a NavGroup's expand/collapse button or the group itself will just expand/collapse that group (when no href set on the group). Clicking a NavLink wich has an href set, will now navigate to that link and subsequently close the menu.

With these change we get consistent behavior in both demo and template sites

Before:

After:

ProfileMenu adds `StartTemplate` and `EndTemplate`

We've added StartTemplate and EndTemplate parameters to make it possible to have custom code before/after the avatar inside the button. The CSS variable --fluent-profile-menu-hover can be used to defined the hover background color (overridable).

<FluentProfileMenu Initials="BG" Style="--fluent-profile-menu-hover: var(--neutral-stroke-focus); padding: 4px;">
    <StartTemplate>
        Bill Gates
    </StartTemplate>
   ...
</FluentProfileMenu>

TreeView now supports `Items` and `LazyLoadItems` parameters

Over time, we've received a number or requests for a TreeView component which would be able to display a large number of items. This capability is now added to the TreeView:

Add an Items parameter to bind a list of nodes and child nodes. Elements in the list need to implement ITreeViewItem. The included TreeViewItem class already implements this interface.
Add a LazyLoadItems attribute to render HTML only when nodes are expanded.
Add an ItemTemplate to allow complete customization of each element.
Add the bindable SelectedItem property to manage the selected ITreeViewItem.
Add the OnExpandedAsync method to enable dynamic loading of sub-items.

Example

For example, some code to display an "unlimited" tree view.

<FluentTreeView Items="@Items" @bind-SelectedItem="@SelectedItem" LazyLoadItems="true">
    <ItemTemplate>
        @context.Text
        <span style="color: var(--accent-fill-rest); margin: 0 4px;">
            @(context.Items == null ? "" : $"[{context.Items.Count()}]")
        </span>
    </ItemTemplate>
</FluentTreeView>

Which will be displayed as this:

Preview packages feed

By popular demand, we have re-created a preview packages feed. See https://dev.azure.com/dnceng/public/_artifacts/feed/dotnet8/NuGet/Microsoft.FluentUI.AspNetCore.Components/overview for details on how to connect your CLI or Visual Studio environments to this feed.

Note: As the preview packages are being created directly from the development branch in the repository, they will not always be stable.

As can be seen from the feed address, our packages are now being created in the .NET Core Engineering (dnceng) environment. A huge step forward for security, stability and longevity of the library!

Much, much more

As said in the beginning of this blog, the items discussed here are only a small part of the large number of changes made in this release. Please visit the What's New page on the demo and documentation site or the GitHub releases page for a complete overview.

Contributors

A very special thanks goes out to these new contributors:

@msb-incom, @ApacheTech, @StevenTCramer, @MarvinKlein1508, @chris-gander, @adospace and @ksbecker

And also a warm 'thank you' to everyone else that contributed.

Join the discussion

We have a new channel for 'near real-time' communication on the official .NET Discord server. Come join us at #fluentui-blazor @ DotNetEvolution. This means we will no longer be using (or monitoring) the #blazor channel on the FAST Discord server.

NuGet

The packages will be released on NuGet in the coming days.

What's new for the Microsoft Fluent UI Blazor library 4.7

2024-04-23T11:19:57Z

With this release we don't have any new components to present to you. We do however have a nice set of new features, new parameters and fixes. A complete overview can be found on the What’s new page in the demo and documentation site or in the repository on the Releases page.

Breaking change

Albeit a very small one, there is a breaking change in this release so please be aware.

To avoid conflicts with existing methods in other libraries, we've decided to place all our extension methods in an Extensions (sub)namespace.

This is a minor breaking change. If you run into this, you just need to add an new using statement for the new namespace to fix any errors. See the Upgrade Guide for more information.

New features and parameters

Calendar and DatePicker: corrected the way months and days are calculated, and added a View parameter to the FluentDatePicker components.
Grid: new AdaptiveRendering property.
Wizard: new StepSequence attribute.
DataGrid: Ability to clear the existing sorts; Addition of Width to Columns component; And improvement of SortBy.
MenuButton: Added ChildContent to improve content customization.
Popover: Added FixedPlacement to solve certain positioning problems.
PullToRefresh: Added DragThreshold to specify a threshold distance before showing a tip.

Calendar and DatePicker

We have completely overhauled the way months and days are calculated to be able to support many more “Cultures” (e.g. fa-IR) than we did before.

<FluentCalendar Culture="@(new CultureInfo("fa-IR"))"></FluentCalendar>

Using the above could result in something like: See the example in the demo site to try out many more cultures.

We also added the option to use the DatPicker as a month or year selector.

<FluentDatePicker View="CalendarViews.Months" />
<FluentDatePicker View="CalendarViews.Years" />

Which will give you:

Grid

We’ve added a new AdaptiveRendering parameter to the FluentGrid component.

AdaptiveRendering allows you to not generate the HTML code of the FluentGridItem based on the HiddenWhen parameter value. In other words, when AdaptiveRendering=false (default), the contents of a FluentGridItem is simply hidden by CSS styles, whereas if AdaptiveRendering=true, the content of the FluentGridItem is not rendered by Blazor. Obviously this need interactivity so his will not work when using SSR.

This addition helps to improve efficiency and performance by not sending/rendering content where constucting the content is expensive or time consuming.

<FluentGrid AdaptiveRendering="true">
   ...
</FluentGrid>

Wizard

We added a new StepSequence parameter to allow direct access to previous steps or to all steps in a FluentWizard component.

The possible values (enum) for this parameter are:

Linear : The user can only access the next/previous step using the Next/Previous buttons.
Any: The user can access all steps by clicking on an item.
Visited: The user can move on to the next step using the Next button, or go to any previous step already visited.

Of course, only non-deactivated steps are accessible.

We preserve the previous behavior by making the default mode Linear.

DataGrid

We enhanced the FluentDataGrid in a number of ways:

Added the option to clear a previously set column sort
Allow for Width to be specified on the column level
Allow SortBy to be specified on PropertyColumn's
Allow resizing columns by using the keyboard

Clear sort

Previously, when a sort was applied on a column (by clicking the header button), there was no option to remove the sort. It is now possible to right-click (or use Ctl+Enter) on the column header to delete the sort and restore the default situation. Obviously this can not be used to clear the default sort of a DataGrid

Column Width

It is now possible to define column widths using a new Width attribute when defining columns. When specifying widths on a column level, these values will be used to generate the DataGrid's GridTemplateColumns parameter. You can choose to use GridTemplateColumns OR Width to define column widths but not both.

Example:

<FluentDataGrid Items="@people">
    <PropertyColumn Width="100px" Property="@(p => p.PersonId)" />
    <PropertyColumn Width="50%"   Property="@(p => p.Name)" />
    <PropertyColumn Width="50%"   Property="@(p => p.BirthDate)" />
</FluentDataGrid>

SortBy

Previously, the PropertyColumn did not support the SortBy parameter. It is now possible to provide a default sorting configuration, adding the ability to define a custom implementation of SortBy. For more details see the PR in the repository

Resizing columns

To improve the accessibility of the DataGrid, we enabled resizing of columns through the keyboard. (Obviously, this only works for grids where the Resizable parameter has been set to true.)

You can use the + and - keys to resize the column the focused header belongs to. Incrementing and/or decrementing the width is done in steps of 10 pixels at a time. You can reset the grid to it's original initial column widths by pressing Shift + r.

MenuButton

A ChildContent parameter has been added to the FluentMenuButton component. This makes it possible to manually supply FluentMenuItem children and thus use all menu item's parameters (such as Disabled).

We’ve added a FixedPlacement attribute to the FluentPopover component to resolve certain positioning problems. This value indicates whether the region is positioned using position: fixed. or uses position : absolute. Fixed positioning allows the region to be independent of parent containers.

PullToRefresh Request

To avoid starting to display the “Tip” of the PullToRefresh component immediately, the new parameter DragThreshold hides the “Tip” until it has been pulled to at least DragThreshold's value in pixels.

Other fixes and changes

AppBar: Apply “role” requirements (a11y) #1871.
Input NotifyFieldChanged was called twice for all FluentInputBase derived components #1846
Paginator spelling issue in FluentPaginator.razor.cs #1829
Select Allow value to be set when component is disabled #1892
Slider Fixes thumb redraw issues #1873
Wizard Fix the Wizard bullet number style #1905

Icon updates

We updated to the Fluent UI System Icons release 1.1.237. This brings in the following additions and changes:

What's new (Name / Size(s) / Variant(s))

Book / 48 / Filled & Regular
Camera Arrow Up / 16, 20, 24 / Filled & Regular
Chat Settings / 16 / Filled & Regular
Circle Highlight / 20, 24 / Filled & Regular
Circle Hint / 24 / Filled & Regular
Circle Shadow / 20, 24 / Filled & Regular
Content View / 16 / Filled & Regular
Double Tap Swipe Down / 16 / Filled & Regular
Double Tap Swipe Up / 16 / Filled & Regular
Flash Sparkle / 16 / Filled & Regular
Location Ripple / 12 / Filled & Regular
Search Square / 16 / Filled & Regular
Settings Chat / 16 / Filled & Regular
Share Multiple / 16, 20, 24 / Filled & Regular
Slide Play / 20, 24 / Filled & Regular

What's updated (Name / Size(s) / Variant(s))

Book Add / 28 / Filled & Regular
Book Contacts / 20, 24, 28, 32 / Filled & Regular
Book / 28 / Filled & Regular

Previous version

We backported a bunch of these changes and additions to the previous version again as well. Please see the What's new? page on the v3 demo and documentation site. The v3.6.2 packages are available on NuGet

Thank you!

A special thanks goes out to these first-time contributors:

@kylejuliandev, @f4n0, @vrassouli and @StefanJansson

And, of course, we also thank all our other contributors for their fixes, changes, enhancements, comments and suggestions.

Let's keep working together to make this a great Blazor component library!

What's new for the Microsoft Fluent UI Blazor library 4.6

2024-03-29T14:00:21Z

This Easter you can hunt for new components and updated features instead of eggs. We are happy to present you version 4.6 of the library. In short, the additions:

PullToRefresh component
ProfileMenu component
Global key capture functionality
Wizard and edit form enhancement

As always, the complete set of changes can be found on the What's new? page on our demo and documentation site.

PullToRefresh

The new FluentPullToRefresh component is an interaction element commonly used in web and mobile applications. The touch gesture initiates an event callback that you subscribe to and implement to retrieve or refresh the data that is displayed inside the component.

The user initiates the gesture by sliding a finger down from the top of the component (or up from the bottom, depending on the setting of the Direction parameter). .

As can be seen from the image, icons are being used to give the user tips on the status of the pull action. These are all templated parameters that can be configured by the developer. In the image below, the icons have been replaced by text and are only shown once a pull action has been initiated.

The source code for this example:

<FluentPullToRefresh Direction="@PullDirection.Down"
                     OnRefreshAsync="OnRefreshAsync"
                     ShowStaticTip="false"
                     Style="height: 400px; width: 400px; ">
    <PullingTemplate>Pull to refresh</PullingTemplate>
    <ReleaseTemplate>Release to update</ReleaseTemplate>
    <CompletedTemplate>Update completed</CompletedTemplate>
    <ChildContent>
        <FluentListbox Height="300px" Items="@Enumerable.Range(1, ItemsCount).Select(i => $"Item {i}")" />
    </ChildContent>
</FluentPullToRefresh>


@code {
    int RefreshCount = 0;
    int ItemsCount = 2;

    public async Task<bool> OnRefreshAsync()
    {
        RefreshCount++;
        DemoLogger.WriteLine($"Pull down refresh count {RefreshCount}");
        await Task.Delay(1000);
        ItemsCount += 3;
        return true;
    }
}

Normally this functionality is used on touch screen devices, like a mobile phone. To enable the functionality on (most) desktop browsers on non-touch screen devices, an emulation script is included and automatically loaded by the component. The interaction is then initiated by a mouse click and drag. You can disable this emulation with the EmulateTouch parameter.

The OnRefreshAsync method is called when the user releases the pull tip at the correct moment (once a configurable distance has been covered). You can have the method return true to indicate there is more data to be fetched. If it returns false a “No more data available” tip can be displayed (which can be configured with the NoDataTemplate parameter).

The FluentProfileMenu is a component implementing functionality commonly found in the top-right corner of a page or site. It provides options related to the user's account. Within this menu, users can access features such as viewing their account details, adjusting settings, and logging out. It serves as a convenient hub for managing account-related actions.

The exact content can be tweaked by using the components' parameters:

<FluentProfileMenu  Image="@DataSource.SamplePicture"
                    Status="@PresenceStatus.Available"
                    HeaderLabel="Microsoft"
                    Initials="BG"
                    FullName="Bill Gates"
                    EMail="bill.gates@microsoft.com"
                    Style="min-width: 330px;" />

Global key capture

It is now possible to capture keystrokes globally on a page or component.

Examples of how this can be used are available at the documentation page.

Wizard and EditForm enhancement

We’ve added a new FluentEditForm component which inherits the standard EditForm component, but allows for correctly handling form validations within our Fluent components.

Throughout your project, you can use FluentEditForm instead of EditForm. For now we have updated the Wizard component to use this. We’ll be updating other components to handle forms in a similar way moving forward.

Example:

New and updated icons

We updated to the Fluent UI System Icons release 1.1.233

What's new (Name / Size(s) / Variant(s))

Classification / 32 / Filled & Regular
Document Target / 20, 24, 32 / Filled & Regular
Emoji Meme / 16, 20, 24 / Filled & Regular
Hand Point / 16, 20, 24, 28, 32, 48 / Filled & Regular
Mail Read Briefcase / 48 / Filled & Regular
People Subtract / 20, 24, 32 / Filled & Regular
Person Alert Off / 16, 20, 24, 32 / Filled & Regular
Shopping Bag Add / 16 / Filled & Regular
Spatula Spoon / 16, 20, 24, 28, 32, 48 / Filled & Regular
Accessibility Error / 20, 24 / Filled & Regular
Accessibility Question Mark / 20, 24 / Filled & Regular
Arrow Down Exclamation / 24 / Filled & Regular
Arrow Sort Up Lines / 16, 20, 24 / Filled & Regular
Arrow Up Exclamation / 16, 20, 24 / Filled & Regular
Bench / 20, 24 / Filled & Regular
Building Lighthouse / 28 / Filled & Regular
Clock Bill / 16, 20, 24, 32 / Filled & Regular
Data Usage Settings / 16, 24 / Filled & Regular
Data Usage / 16 / Filled & Regular
Edit Person / 20, 24 / Filled & Regular
Highway / 20, 24 / Filled & Regular
Laptop Person / 20, 24, 48 / Filled & Regular
Location Ripple / 16, 20, 24 / Filled & Regular
Mail Arrow Double Back / 32 / Filled & Regular
Mail Briefcase / 48 / Filled & Regular
People Add / 32 / Filled & Regular
Person Alert / 32 / Filled & Regular
Road / 20, 24 / Filled & Regular
Save / 32 / Filled & Regular
Tab Desktop Multiple Sparkle / 16, 20, 24 / Filled & Regular
Tab Desktop Multiple / 24 / Filled & Regular
Vehicle Tractor / 20, 24 / Filled & Regular

What's updated (Name / Size(s) / Variant(s))

Classification / 20, 24 / Filled & Regular
Emoji Add / 20 / Filled & Regular
Emoji Edit / 20 / Filled & Regular
Emoji Sparkle / 20 / Filled & Regular
Emoji / 20 / Filled & Regular
Accessibility Checkmark / 24 / Filled & Regular
Arrow Down Exclamation / 16, 20 / Filled & Regular
Arrow Sort Down Lines / 16, 20, 24 / Filled & Regular
Building Lighthouse / 48 / Filled & Regular
Calendar Video / 20, 24, 28 / Filled & Regular
Options / 16, 28, 32 / Filled & Regular
Person Alert / 16, 20, 24 / Filled & Regular
Tab Desktop Multiple Bottom / 24 / Filled

Other changes

FluentAccordion: the Expanded parameter of the Accordion element now supports 2-way binding (@bind-Expanded).
FluentAppBarItem: Added OnClick event to AppBarItems.
FluentButton: Fixed padding on the 'loading spinner' in case of no text being displayed.
FluentPaginator: Added the ability to disable pagination buttons with Disabled parameter.
FluentPersona: Can handle 'empty' names (Name="") now and added an OnClick event.

What's new for the Microsoft Fluent UI Blazor libraries 3.6 and 4.5

2024-03-08T11:07:33Z

We have new releases! Version 3.6 for .NET 6 and 7 and version 4.6 for .NET 8 are here. Happy to report that a huge number of issues has been fixed for both versions (both by us and by contributors). Let's dive into the details...

New: AppBar component (4.5 only)

Based on the work done by the .NET Aspire team (this library powers the .NET Aspire Dashboard!) a new FluentAppBar component has been added. The AppBar shows AppBarItems in a vertical fashion just like the one you'll find in Teams and the (new) Outlook. It automatically shows '...' in the bottom when the number of applications is larger then the available vertical space. You can control whether that popover shows a search bar or not.

Changes, updates and additions that apply to both versions

We are not listing all the changes in this post but just the most prominent ones. To see the full list changes, we have GitHub release pages:

Demo site: Search for components

With almost 70 components in the library, it can sometimes get a bit hard to find the right documentation and example page. To help you navigate the site, we've added a component search function to the header (in desktop view only).

Grid: Spacing and margins

The FluentGrid became wider when the value for the Spacing parameter was increased. This has been fixed.

Before:

After:

Both the Menu and Popover component internally use the AnchoredRegion component to 'attach' their output to antoher element. The AnchoredRegion component exposes the VerticalThershold and HorizontalThreshold parameters to set the minimum space needed to render the attachment in the preferred location. This allows to create an automatic 'reflow' in case there is not enough space available. The video below shows a Popover which is displayed below a button. It automatically switches to be shown above the button if it doesn't fit anymore when resizing the window. In the 'before' situation, it would remain in the smae location and would get cutoff on resizing.

With this change it is now possible to set the thresholds for both the Menu and Popover components. See the video below for the effect.

DataGrid: Add a Filtered property and visual indicator to PropertyColumn

When using multiple filters in a DataGrid, it was not easy to see if a filter was applied for a specific column. A FilterDismiss icon will now be shown when a filter is being applied on a column.

MenuButton: Added overlay and more appearance options

A FluentOverlay has been added so clicking outside the menu closes it
A ButtonAppearance parameter has been added to make changing the button appearance possible

Example have been added to the demo site to show this. Example of the overlay being used:

Card: Add a `MinimalStyle` parameter

By default the FluentCard component is a visual container and design system provider. Cards are snapshots of content that are typically used in a group to present collections of related information. Thus, by design, the FluentCard component includes all the styles required for a good representation of the other components included in it. This adds a large number of styles such as justify-content; align-items; gap; width; and over 80 other CSS variables. The amount of code generated can become quite important, especially if you use this component a lot of times, for example in a large list.

To prevent this, you can now use the MinimalStyle parameter. This will remove all the default styles from the FluentCard component. and apply a currated set of styles throug an isolated CSS. This will allow you to use the FluentCard component as a simple container with only the styles needed to draw the box-shadow (and some other required style rules).

Example usage

<FluentCard MinimalStyle="true">
    <p>Just some content in a card (with a button that does not do anything).</p>

    <FluentButton Appearance="Appearance.Accent">Hello</FluentButton>
    <p>No Width or Height has been specified.</p>
</FluentCard>

Code generated

<div class="fluent-card-minimal-style">
  <p>Just some content in a card (with a button that does not do anything).</p>
  <fluent-button type="button" appearance="accent" class="accent">Hello</fluent-button>
  <p>No Width or Height has been specified.</p>
</div>

Default `FluentCard` code generated

[FluentTooltip] Add the HideTooltipOnCursorLeave property

We have added a HideTooltipOnCursorLeave parameter to the FluentTooltip component. You can now choose to use the default behavior:

Or use a new behavior:

The behavior can also be set through the global configuration:

builder.Services.AddFluentUIComponents(configuration =>
{
    configuration.HideTooltipOnCursorLeave = true;
});

Icons: updated to Fluent UI System Icons v1.1.230

What's new (Name / Size(s) / Variant(s))

Checkmark Circle Warning / 16, 20, 24 / Filled & Regular
Cloud Arrow Right / 16, 20, 24 / Filled & Regular
Document Arrow Down / 24 / Filled & Regular
Document Signature / 16, 20, 24, 28, 32, 48 / Filled & Regular
Home Garage / 20, 24 / Filled & Regular
Image Split / 20, 24 / Filled & Regular
Laptop / 48 / Filled & Regular
Line Flow Diagonal Up Right / 16, 20, 24, 32 / Filled & Regular
Mail Arrow Clockwise / 16, 20, 24 / Filled & Regular
Person Passkey / 16, 20, 24, 28, 32, 48 / Filled & Regular
Person Prohibited / 32 / Filled & Regular
Person Ribbon / 24 / Filled & Regular
Plant Cattail / 20, 24 / Filled & Regular
Storage / 16, 28, 32, 48 / Filled & Regular
Video Clip Wand / 16, 20, 24 / Filled & Regular
Window Fingerprint / 16, 20, 24, 28, 32, 48 / Filled & Regular

What's updated (Name / Size(s) / Variant(s))

Video Add / 20, 24 / Filled & Regular

No release notes were made available for the versions between 1.1.226 and this one

Special thanks to @StevenRasmussen, @lus, @bruno-garcia, @CV-souryu, @Hona, @digitaldirk, @c0g1t8, @thebarrettlo, @weskroesbergen, @joriverm and @NickHirras for their contributions!

Baaijte

What's new for the Microsoft Fluent UI Blazor library 5.0 RC1

A New Foundation: Fluent UI Web Components 3

What does this mean for you?

What changes in your code?

Getting started

The New FluentLayout Component

Area-based layout

Built-in hamburger menu

Why this matters

Default Values

The problem it solves

The solution

Key benefits

Localization Support

How it works

Try It Now

Final remarks

What's new for the Microsoft Fluent UI Blazor library 4.14

But what about 4.12 and 4.13?

Highlights

The hierarchical DataGrid

How IHierarchicalGridItem Works

Enabling Hierarchy in FluentDataGrid

What's next

What's next: the Fluent UI Blazor library v5

Web Components v3

Feature parity

Recap

What are Web Components?

How does Fluent UI Web Components leverage Web Components?

Fluent UI Blazor Library v4

Fluent UI Blazor Library v5

Not a simple drop-in replacement

What's new for the Microsoft Fluent UI Blazor library 4.11

V3 out of support

Templates: 2 updates and 2 new additions

Fluent .NET Aspire Starter App

Fluent .NET MAUI Blazor Hybrid and Web App

How to use the templates

DataGrid: Rendering, ODATA Adapter and saving paging state

Rendering

OData Adapter

Experimental: Save paging state in the URL

MessageBox: HTML Markup in the message

TextField: Additional field types

And much more...

Special thanks

What's next?

What's new for the Microsoft Fluent UI Blazor library 4.10

.NET 9 support

DataGrid enhancements

AutoFit

Resizing to initial column widths

Improve data refresh logic

Provide new way to render column actions

Use double click to quickly select a date in the DatePicker

New FluentMenuProvider

Example

Preview packages NuGet feed

And more...

What's new for the Microsoft Fluent UI Blazor library 4.9

New Rating component

DataGrid

Better WCAG 2.2 support - One-click column resizing.

Add SelectFromEntireRow and OnCellClick

Have Display attribute in enumerations shown in column values

CssBuilder - Add a ValidateClassNames configuration option.

Select component - Better PlaceHolder support.

DialogService - Add UpdateDialogAsync to refresh parameters and content while dialog is on screen

NuGet package preview feed

And more...

What's new for the Microsoft Fluent UI Blazor library 4.8

Breaking change in Option<TType>-class

Calendar now offers date range selection

Code example

List components now inherit from FluentInputBase

Autocomplete can set its height automatically

NavMenu now works better in mobile views

Before:

The New `FluentLayout` Component

New `FluentMenuProvider`

Add `SelectFromEntireRow` and `OnCellClick`

CssBuilder - Add a `ValidateClassNames` configuration option.

Select component - Better `PlaceHolder` support.

DialogService - Add `UpdateDialogAsync` to refresh parameters and content while dialog is on screen

Breaking change in `Option<TType>`-class

List components now inherit from `FluentInputBase`

ProfileMenu adds `StartTemplate` and `EndTemplate`

TreeView now supports `Items` and `LazyLoadItems` parameters

Card: Add a `MinimalStyle` parameter

Default `FluentCard` code generated