Blog of Denis VOITURON

for a better .NET world

FluentUI.Blazor v4.7

Posted on 2024-03-08


We’ve just released a new version 4.7 of Microsoft.FluentUI.AspNetCore.Components. This release corrects some bugs detected in recent days, but also adds a few new features.

Breaking change

To avoid conflicts between existing .NET methods and our extension methods StartOfMonth, StartOfYear, StartOfWeek, ToTimeAgo, AddDays, etc. present in the DateTimeExtensions class, we modified the namespace to Microsoft.FluentUI.AspNetCore.Components.Extensions (adding Extensions).

After updating to version 4.7 of FluentUI-Blazor, you may encounter a compiler error, so simply add the using Microsoft.FluentUI.AspNetCore.Components.Extensions to your code (or in _Imports.razor to apply it globally).

New features

Calendar and DatePicker

Correction of the way months and days are calculated, to better respond to certain “Cultures” (e.g. fa-IR).

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

Culture fa-IR

Add a View attribute to FluentDatePicker components to allow month or year selection only.

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

Months and Years


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

AdaptiveRendering allows you to not generate the HTML code of the FluentGridItem that respects HiddenWhen. In other words, when AdaptiveRendering=false (default), the contents of the FluentGridItem are simply hidden by CSS styles, whereas if AdaptiveRendering=true, the content of the FluentGridItem is not rendered by Blazor.

In some cases where this content is large, it may be more efficient not to generate the HTML code rather than simply hide it.

<FluentGrid AdaptiveRendering="true">



Add a new StepSequence attribute to allow direct access to previous steps or to all FluentWizard steps.

Of course, only non-deactivated steps are accessible.

For compatibility reasons, the default mode is Linear.

Wizard StepSequence


Clear sort

Previously, when a sort was applied on a data grid (by clicking on a column header button), there was no option to remove the sort. It is now possible to right-click on the column header to delete the sort and restore the default situation. For accessibility reasons, you can use Ctrl + Enter to remove the sort when the column header is in focus.

Column Width

It is now possible to define column widths using a new Width attribute when defining columns. This replaces the GridTemplateColumns property, which is still usable, but you can’t use both to define column widths: either via GridTemplateColumns or via Width, but not both.


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


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. More details on #1877

We’ve added a ChildContent parameter to FluentMenuButton. This makes it possible to manually supply FluentMenuItem children and thus use all its parameters (such as Disabled).

Menu Button


We’ve added a FixedPlacement attribute to the FluentPopover component to resolve certain positioning problems. This value indicates whether the region is positioned using CSS position: fixed. Otherwise, the region 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, new parameter DragThreshold hides the “Tip” until it has been pulled to at least DragThreshold pixels.




We’ve also updated the icon library with 15 new illustrations.

Miscellaneous corrections

The rest of the fixes and changes for this release are (again) quite a long list. We refer you to the What’s new page on the documentation site for a complete overview (including links to issues and change requests on GitHub).

Web sites


If you find something out of the ordinary, let us know in the repo on GitHub, or Twitter / X.



Follow me

Recent posts