├── .gitignore ├── LICENSE ├── README.md ├── doc ├── final.gif ├── step1.png ├── step2.png ├── step5.png ├── step6.gif └── step8.gif └── src ├── DemoFluentUI.sln ├── DemoFluentUI ├── Components │ ├── App.razor │ ├── Layout │ │ ├── MainLayout.razor │ │ └── MainLayout.razor.css │ ├── Pages │ │ ├── AccountCreatedDialog.razor │ │ ├── Counter.razor │ │ ├── Country.cs │ │ ├── Error.razor │ │ ├── Home.razor │ │ ├── Register.razor │ │ └── Weather.razor │ ├── Routes.razor │ └── _Imports.razor ├── DemoFluentUI.csproj ├── Program.cs ├── Properties │ └── launchSettings.json ├── appsettings.Development.json ├── appsettings.json └── wwwroot │ └── app.css └── unlockfluentui.demosnippets /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Ww][Ii][Nn]32/ 27 | [Aa][Rr][Mm]/ 28 | [Aa][Rr][Mm]64/ 29 | bld/ 30 | [Bb]in/ 31 | [Oo]bj/ 32 | [Ll]og/ 33 | [Ll]ogs/ 34 | 35 | # Visual Studio 2015/2017 cache/options directory 36 | .vs/ 37 | # Uncomment if you have tasks that create the project's static files in wwwroot 38 | #wwwroot/ 39 | 40 | # Visual Studio 2017 auto generated files 41 | Generated\ Files/ 42 | 43 | # MSTest test Results 44 | [Tt]est[Rr]esult*/ 45 | [Bb]uild[Ll]og.* 46 | 47 | # NUnit 48 | *.VisualState.xml 49 | TestResult.xml 50 | nunit-*.xml 51 | 52 | # Build Results of an ATL Project 53 | [Dd]ebugPS/ 54 | [Rr]eleasePS/ 55 | dlldata.c 56 | 57 | # Benchmark Results 58 | BenchmarkDotNet.Artifacts/ 59 | 60 | # .NET Core 61 | project.lock.json 62 | project.fragment.lock.json 63 | artifacts/ 64 | 65 | # ASP.NET Scaffolding 66 | ScaffoldingReadMe.txt 67 | 68 | # StyleCop 69 | StyleCopReport.xml 70 | 71 | # Files built by Visual Studio 72 | *_i.c 73 | *_p.c 74 | *_h.h 75 | *.ilk 76 | *.meta 77 | *.obj 78 | *.iobj 79 | *.pch 80 | *.pdb 81 | *.ipdb 82 | *.pgc 83 | *.pgd 84 | *.rsp 85 | *.sbr 86 | *.tlb 87 | *.tli 88 | *.tlh 89 | *.tmp 90 | *.tmp_proj 91 | *_wpftmp.csproj 92 | *.log 93 | *.tlog 94 | *.vspscc 95 | *.vssscc 96 | .builds 97 | *.pidb 98 | *.svclog 99 | *.scc 100 | 101 | # Chutzpah Test files 102 | _Chutzpah* 103 | 104 | # Visual C++ cache files 105 | ipch/ 106 | *.aps 107 | *.ncb 108 | *.opendb 109 | *.opensdf 110 | *.sdf 111 | *.cachefile 112 | *.VC.db 113 | *.VC.VC.opendb 114 | 115 | # Visual Studio profiler 116 | *.psess 117 | *.vsp 118 | *.vspx 119 | *.sap 120 | 121 | # Visual Studio Trace Files 122 | *.e2e 123 | 124 | # TFS 2012 Local Workspace 125 | $tf/ 126 | 127 | # Guidance Automation Toolkit 128 | *.gpState 129 | 130 | # ReSharper is a .NET coding add-in 131 | _ReSharper*/ 132 | *.[Rr]e[Ss]harper 133 | *.DotSettings.user 134 | 135 | # TeamCity is a build add-in 136 | _TeamCity* 137 | 138 | # DotCover is a Code Coverage Tool 139 | *.dotCover 140 | 141 | # AxoCover is a Code Coverage Tool 142 | .axoCover/* 143 | !.axoCover/settings.json 144 | 145 | # Coverlet is a free, cross platform Code Coverage Tool 146 | coverage*.json 147 | coverage*.xml 148 | coverage*.info 149 | 150 | # Visual Studio code coverage results 151 | *.coverage 152 | *.coveragexml 153 | 154 | # NCrunch 155 | _NCrunch_* 156 | .*crunch*.local.xml 157 | nCrunchTemp_* 158 | 159 | # MightyMoose 160 | *.mm.* 161 | AutoTest.Net/ 162 | 163 | # Web workbench (sass) 164 | .sass-cache/ 165 | 166 | # Installshield output folder 167 | [Ee]xpress/ 168 | 169 | # DocProject is a documentation generator add-in 170 | DocProject/buildhelp/ 171 | DocProject/Help/*.HxT 172 | DocProject/Help/*.HxC 173 | DocProject/Help/*.hhc 174 | DocProject/Help/*.hhk 175 | DocProject/Help/*.hhp 176 | DocProject/Help/Html2 177 | DocProject/Help/html 178 | 179 | # Click-Once directory 180 | publish/ 181 | 182 | # Publish Web Output 183 | *.[Pp]ublish.xml 184 | *.azurePubxml 185 | # Note: Comment the next line if you want to checkin your web deploy settings, 186 | # but database connection strings (with potential passwords) will be unencrypted 187 | *.pubxml 188 | *.publishproj 189 | 190 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 191 | # checkin your Azure Web App publish settings, but sensitive information contained 192 | # in these scripts will be unencrypted 193 | PublishScripts/ 194 | 195 | # NuGet Packages 196 | *.nupkg 197 | # NuGet Symbol Packages 198 | *.snupkg 199 | # The packages folder can be ignored because of Package Restore 200 | **/[Pp]ackages/* 201 | # except build/, which is used as an MSBuild target. 202 | !**/[Pp]ackages/build/ 203 | # Uncomment if necessary however generally it will be regenerated when needed 204 | #!**/[Pp]ackages/repositories.config 205 | # NuGet v3's project.json files produces more ignorable files 206 | *.nuget.props 207 | *.nuget.targets 208 | 209 | # Microsoft Azure Build Output 210 | csx/ 211 | *.build.csdef 212 | 213 | # Microsoft Azure Emulator 214 | ecf/ 215 | rcf/ 216 | 217 | # Windows Store app package directories and files 218 | AppPackages/ 219 | BundleArtifacts/ 220 | Package.StoreAssociation.xml 221 | _pkginfo.txt 222 | *.appx 223 | *.appxbundle 224 | *.appxupload 225 | 226 | # Visual Studio cache files 227 | # files ending in .cache can be ignored 228 | *.[Cc]ache 229 | # but keep track of directories ending in .cache 230 | !?*.[Cc]ache/ 231 | 232 | # Others 233 | ClientBin/ 234 | ~$* 235 | *~ 236 | *.dbmdl 237 | *.dbproj.schemaview 238 | *.jfm 239 | *.pfx 240 | *.publishsettings 241 | orleans.codegen.cs 242 | 243 | # Including strong name files can present a security risk 244 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 245 | #*.snk 246 | 247 | # Since there are multiple workflows, uncomment next line to ignore bower_components 248 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 249 | #bower_components/ 250 | 251 | # RIA/Silverlight projects 252 | Generated_Code/ 253 | 254 | # Backup & report files from converting an old project file 255 | # to a newer Visual Studio version. Backup files are not needed, 256 | # because we have git ;-) 257 | _UpgradeReport_Files/ 258 | Backup*/ 259 | UpgradeLog*.XML 260 | UpgradeLog*.htm 261 | ServiceFabricBackup/ 262 | *.rptproj.bak 263 | 264 | # SQL Server files 265 | *.mdf 266 | *.ldf 267 | *.ndf 268 | 269 | # Business Intelligence projects 270 | *.rdl.data 271 | *.bim.layout 272 | *.bim_*.settings 273 | *.rptproj.rsuser 274 | *- [Bb]ackup.rdl 275 | *- [Bb]ackup ([0-9]).rdl 276 | *- [Bb]ackup ([0-9][0-9]).rdl 277 | 278 | # Microsoft Fakes 279 | FakesAssemblies/ 280 | 281 | # GhostDoc plugin setting file 282 | *.GhostDoc.xml 283 | 284 | # Node.js Tools for Visual Studio 285 | .ntvs_analysis.dat 286 | node_modules/ 287 | 288 | # Visual Studio 6 build log 289 | *.plg 290 | 291 | # Visual Studio 6 workspace options file 292 | *.opt 293 | 294 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 295 | *.vbw 296 | 297 | # Visual Studio 6 auto-generated project file (contains which files were open etc.) 298 | *.vbp 299 | 300 | # Visual Studio 6 workspace and project file (working project files containing files to include in project) 301 | *.dsw 302 | *.dsp 303 | 304 | # Visual Studio 6 technical files 305 | *.ncb 306 | *.aps 307 | 308 | # Visual Studio LightSwitch build output 309 | **/*.HTMLClient/GeneratedArtifacts 310 | **/*.DesktopClient/GeneratedArtifacts 311 | **/*.DesktopClient/ModelManifest.xml 312 | **/*.Server/GeneratedArtifacts 313 | **/*.Server/ModelManifest.xml 314 | _Pvt_Extensions 315 | 316 | # Paket dependency manager 317 | .paket/paket.exe 318 | paket-files/ 319 | 320 | # FAKE - F# Make 321 | .fake/ 322 | 323 | # CodeRush personal settings 324 | .cr/personal 325 | 326 | # Python Tools for Visual Studio (PTVS) 327 | __pycache__/ 328 | *.pyc 329 | 330 | # Cake - Uncomment if you are using it 331 | # tools/** 332 | # !tools/packages.config 333 | 334 | # Tabs Studio 335 | *.tss 336 | 337 | # Telerik's JustMock configuration file 338 | *.jmconfig 339 | 340 | # BizTalk build output 341 | *.btp.cs 342 | *.btm.cs 343 | *.odx.cs 344 | *.xsd.cs 345 | 346 | # OpenCover UI analysis results 347 | OpenCover/ 348 | 349 | # Azure Stream Analytics local run output 350 | ASALocalRun/ 351 | 352 | # MSBuild Binary and Structured Log 353 | *.binlog 354 | 355 | # NVidia Nsight GPU debugger configuration file 356 | *.nvuser 357 | 358 | # MFractors (Xamarin productivity tool) working folder 359 | .mfractor/ 360 | 361 | # Local History for Visual Studio 362 | .localhistory/ 363 | 364 | # Visual Studio History (VSHistory) files 365 | .vshistory/ 366 | 367 | # BeatPulse healthcheck temp database 368 | healthchecksdb 369 | 370 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 371 | MigrationBackup/ 372 | 373 | # Ionide (cross platform F# VS Code tools) working folder 374 | .ionide/ 375 | 376 | # Fody - auto-generated XML schema 377 | FodyWeavers.xsd 378 | 379 | # VS Code files for those working on multiple tools 380 | .vscode/* 381 | !.vscode/settings.json 382 | !.vscode/tasks.json 383 | !.vscode/launch.json 384 | !.vscode/extensions.json 385 | *.code-workspace 386 | 387 | # Local History for Visual Studio Code 388 | .history/ 389 | 390 | # Windows Installer files from build outputs 391 | *.cab 392 | *.msi 393 | *.msix 394 | *.msm 395 | *.msp 396 | 397 | # JetBrains Rider 398 | *.sln.iml 399 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Denis Voituron 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DotNetConf 2023 - Fluent UI Blazor - Quick Start 2 | 3 | 4 | Demo used in the "Unlocking the power of the Fluent UI Blazor components" session at .NET Conf 2023 5 | 6 | This project demonstrates how to use the [Fluent UI Blazor Library](https://www.fluentui-blazor.net/). 7 | 8 | > **note**: This code is for step-by-step learning only. 9 | > It does not respect development rules and/or best practices. 10 | > This project presents only a small part of the possibilities offered by **Fluent UI Blazor library**. 11 | > Some shortcuts have been applied to improve understanding of the project/code. 12 | 13 | ## Agenda 14 | 15 | |Step|Branch| 16 | |---|---| 17 | |[1. Installation](#step1)|[branch 1](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/01-with-nugets)| 18 | |[2. Include a Navigation Menu](#step2)|[branch 2](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/02-layout-with-navmenu)| 19 | |[3. Add Icons and Emoji](#step3)|[branch 3](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/03-with-icons)| 20 | |[4. Add the Counter page](#step4)|[branch 4](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/04-page-counter)| 21 | |[5. Add a Weather page](#step5)|[branch 5](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/05-page-weather)| 22 | |[6. Add a Registration page](#step6)|[branch 6](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/06-register-with-inputs)| 23 | |[7. Add an Autocomplete with countries](#step7)|[branch 7](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/07-with-autocomplete-country)| 24 | |[8. Add Themes: Colors, Dark and Light](#step8)|[branch 8](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/08-with-theme)| 25 | |[9. Add a confirmation Dialog](#step9)|[branch 9](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/09-with-dialog)| 26 | |[10. Replace by a Toast message](#step10)|[branch 10](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/tree/steps/10-with-toast)| 27 | 28 | ## After completing all the steps, the final result will look like this: 29 | 30 | ![Final result](doc/final.gif) 31 | 32 | To use **Fluent UI** in your Blazor applications, you must: 33 | 34 | ## 1. Installation 35 | 36 | 37 | - Create a new .NET8 Blazor Web App. 38 | 39 | - On the **Additional information** screen, 40 | set **"Interactivity type"** to **Global** and uncheck **Include sample pages**. 41 | 42 | ![Setup Project](doc/step1.png) 43 | 44 | 45 | - Add the following NuGet packages, searching **"Microsoft FluentUI Components"** 46 | - [Microsoft.FluentUI.AspNetCore.Components](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components) 47 | - [Microsoft.FluentUI.AspNetCore.Components.Icons](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components.Icons) 48 | 49 | ## 2. Include a Navigation Menu 50 | 51 | 52 | - Add this namespace to the **_import.razor** file. 53 | ```csharp 54 | @using Microsoft.FluentUI.AspNetCore.Components 55 | ``` 56 | 57 | - Add this service in **Program.cs**. 58 | ```csharp 59 | // Add FluentUI 60 | builder.Services.AddHttpClient(); 61 | builder.Services.AddFluentUIComponents(); 62 | ``` 63 | 64 | - In the **MainLayout.razor** file, include this code to define a header, a menu, a body and a footer. 65 | ```xml 66 | 67 | @* Header *@ 68 | 69 | .NET Conf 2023 70 | 71 | 72 | 73 | 74 | 75 | @* Left Menu *@ 76 | 77 | Home 79 | Counter 80 | Weather 81 | 82 | 83 | @* Content *@ 84 |
85 | @Body 86 |
87 | 88 | 89 | 90 | 91 | 92 | @* Footer *@ 93 | 94 | Microsoft 2023 95 | 96 | 97 | 98 | ``` 99 | 100 | - Add some styles in App.css. 101 | ```css 102 | /* Demo Styles */ 103 | body { 104 | margin: 0px; 105 | height: 100vh; 106 | } 107 | 108 | .footer { 109 | background-color: var(--neutral-layer-4); 110 | padding: 4px 0px; 111 | text-align: center; 112 | } 113 | 114 | .fluent-nav-menu { 115 | background-color: var(--neutral-layer-1); 116 | height: 100%; 117 | } 118 | 119 | .main-content { 120 | height: 100%; 121 | width: 100%; 122 | padding: 0px 16px; 123 | } 124 | ``` 125 | 126 | - The result will be 127 | 128 | ![Setup Project](doc/step2.png) 129 | 130 | ## 3. Add Icons and Emoji 131 | 132 | 133 | - Use these pagesin the demo site to find **Icons** and **Emoji** (we're not using emoji in this project). 134 | - https://www.fluentui-blazor.net/Icon 135 | - https://www.fluentui-blazor.net/Emoji 136 | 137 | - On the Icons page, start a search on **Home**, **Add** (AddSquare) and **Weather** (WeatherRainShowersDay). 138 | 139 | - Add these Icons into the **MainLayout.razor** file. 140 | 141 | ```xml 142 | 143 | Home 145 | Counter 147 | Weather 149 | 150 | ``` 151 | 152 | ## 4. Add the Counter page 153 | 154 | 155 | - Go to the **Button** and **Label** pages to display the available styles. 156 | - https://www.fluentui-blazor.net/Button 157 | - https://www.fluentui-blazor.net/Label 158 | 159 | - Add a new file **Counter.razor** under the **Components/Pages** folder. 160 | 161 | ```xml 162 | @page "/counter" 163 | 164 | Counter 165 | 166 | Counter 167 | Current count: @currentCount 168 | 170 | Click me 171 | 172 | 173 | @code { 174 | private int currentCount = 0; 175 | 176 | private void IncrementCount() 177 | { 178 | currentCount++; 179 | } 180 | } 181 | ``` 182 | 183 | ## 5. Add a Weather page 184 | 185 | 186 | - Open these pages to display the available styles, for **ProgressBar** and **ProgressRing**. 187 | - https://www.fluentui-blazor.net/Progress 188 | - https://www.fluentui-blazor.net/ProgressRing 189 | - https://www.fluentui-blazor.net/DataGrid 190 | 191 | - Add a new file **Weather.razor** under the **Components/Pages** folder. 192 | 193 | ```xml 194 | @page "/weather" 195 | 196 | Weather 197 | 198 | Weather 199 | This component demonstrates showing data. 200 | 201 | @if (GridItems == null) 202 | { 203 | Loading... 204 | } 205 | else 206 | { 207 | 208 | 210 | 212 | 214 | 215 | 216 | } 217 | ``` 218 | ```csharp 219 | @code { 220 | private IQueryable? GridItems; 221 | 222 | protected override async Task OnAfterRenderAsync(bool firstRender) 223 | { 224 | if (!firstRender) return; 225 | 226 | // Simulate asynchronous loading to demonstrate streaming rendering 227 | await Task.Delay(500); 228 | 229 | var Summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", 230 | "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; 231 | 232 | GridItems = Enumerable.Range(1, 5).Select(index => new WeatherForecast 233 | { 234 | Date = DateOnly.FromDateTime(DateTime.Now).AddDays(index), 235 | TemperatureC = index * 2 + 17, 236 | Summary = Summaries[index], 237 | }).AsQueryable(); 238 | 239 | StateHasChanged(); 240 | } 241 | 242 | private class WeatherForecast 243 | { 244 | public DateOnly Date { get; set; } 245 | public int TemperatureC { get; set; } 246 | public string? Summary { get; set; } 247 | public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); 248 | } 249 | } 250 | ``` 251 | 252 | - Add a **TemplateColumn** including icons. 253 | 254 | ```xml 255 | 256 | 258 | 260 | 262 | 263 | 264 | @if (context.TemperatureC > 21) 265 | { 266 | 268 | } 269 | else 270 | { 271 | 273 | } 274 | 275 | 276 | 277 | 278 | ``` 279 | 280 | - The result will be 281 | 282 | ![Setup Project](doc/step5.png) 283 | 284 | ## 6. Add a Registration page 285 | 286 | 287 | - Add a new **Register.razor** page with this content. 288 | 289 | ```xml 290 | @page "/register" 291 | 292 | New user 293 | 294 | Register 295 | 296 | 297 | 298 | 299 | Let's get you all set up so you can verify your personal account and begin 300 | setting up your profile. 301 | 302 | 303 | 304 | 308 | 311 | 313 | 318 | 319 | 321 | 322 |
323 | 324 | 328 | Create account 329 | 330 | 331 | 332 | ``` 333 | 334 | ```csharp 335 | @code { 336 | private RegisterUser Data = new(); 337 | private bool AcceptToCreate = false; 338 | private bool Loading = false; 339 | 340 | private async Task ValidHandlerAsync() 341 | { 342 | Loading = true; 343 | 344 | // Simulate asynchronous loading 345 | await Task.Delay(1000); 346 | 347 | Loading = false; 348 | } 349 | 350 | public class RegisterUser 351 | { 352 | public string? LastName { get; set; } 353 | public string? FistName { get; set; } 354 | public DateTime? BirthDate { get; set; } 355 | public string? Email { get; set; } 356 | } 357 | } 358 | ``` 359 | 360 | - Add a new item in the Left Navigation menu. 361 | ```xml 362 | Register 364 | ``` 365 | 366 | - Add this new style in **App.css** (and check if the main-content is correct) 367 | ```css 368 | .main-content { 369 | height: 100%; 370 | width: 100%; 371 | padding: 0px 16px; 372 | } 373 | 374 | fluent-text-field { 375 | min-width: 100%; 376 | margin-bottom: 16px; 377 | } 378 | ``` 379 | 380 | - The result will be 381 | 382 | ![Setup Project](doc/step6.gif) 383 | 384 | ## 7. Add an Autocomplete with countries 385 | 386 | 387 | - Add this class **Country.cs** to have a list of all countries. 388 | 389 | > **note**: Copy the full code from [this file](https://github.com/dvoituron/dotnetconf-2023-fluentui-blazor/blob/steps/07-with-autocomplete-country/src/DemoFluentUI/Components/Pages/Country.cs). 390 | 391 | ```csharp 392 | namespace DemoFluentUI.Components.Pages; 393 | 394 | using Microsoft.AspNetCore.Components; 395 | 396 | public record Country(string Code, string Name) 397 | { 398 | public string Flag => 399 | $"https://fluentui-blazor.net/_content/FluentUI.Demo.Shared/flags/{Code}.svg"; 400 | 401 | public MarkupString HtmlFlagAndName => (MarkupString) 402 | @$"
403 | 404 |
{Name}
405 |
"; 406 | 407 | public static IEnumerable All 408 | { 409 | get 410 | { 411 | // List generated using https://chat.openai.com/ 412 | return new Country[] 413 | { 414 | new Country("af", "Afghanistan"), 415 | new Country("al", "Albania"), 416 | new Country("dz", "Algeria"), 417 | new Country("as", "American Samoa"), 418 | new Country("ad", "Andorra"), 419 | 420 | ... // Copy All Countries from the GitHub source code (see the note above). 421 | 422 | new Country("ye", "Yemen"), 423 | new Country("zm", "Zambia"), 424 | new Country("zw", "Zimbabwe"), 425 | }; 426 | } 427 | } 428 | } 429 | ``` 430 | 431 | - Update the **Register.razor** file to add the **FluentAutocomplete** component 432 | 433 | ```xml 434 | @page "/register" 435 | ... 436 | 437 | ... 438 | @* Country *@ 439 | 447 | 448 | 449 | @language.HtmlFlagAndName 450 | 451 | 452 | 453 | Please select only one country. 454 | 455 | 456 | 457 | ``` 458 | 459 | ```csharp 460 | @code { 461 | ... 462 | 463 | // Add this new method 464 | private async Task OnSearchAsync(OptionsSearchEventArgs e) 465 | { 466 | e.Items = Country.All.Where(i => i.Name.StartsWith(e.Text, 467 | StringComparison.OrdinalIgnoreCase)) 468 | .OrderBy(i => i.Name); 469 | 470 | await Task.CompletedTask; 471 | } 472 | 473 | public class RegisterUser 474 | { 475 | public string? LastName { get; set; } 476 | public string? FistName { get; set; } 477 | public DateTime? BirthDate { get; set; } 478 | public string? Email { get; set; } 479 | 480 | // Add this new line 481 | public IEnumerable Languages { get; set; } = Array.Empty(); 482 | } 483 | } 484 | ``` 485 | 486 | ## 8. Add Themes: Colors, Dark and Light 487 | 488 | 489 | - Open the file **Home.razor** and inject these two services. 490 | 491 | ```csharp 492 | @using Microsoft.FluentUI.AspNetCore.Components.DesignTokens 493 | @inject BaseLayerLuminance BaseLayerLuminance 494 | @inject AccentBaseColor AccentBaseColor 495 | ``` 496 | 497 | - In the same file, add these Settings components. 498 | ```xml 499 | 500 | Settings 501 | 502 | ()) 504 | Height="200px" 505 | @bind-SelectedOption="@Color" /> 506 | 507 | 512 | 513 | ``` 514 | ```csharp 515 | @code { 516 | private OfficeColor _color = OfficeColor.Default; 517 | private bool _isDark = false; 518 | 519 | public OfficeColor Color 520 | { 521 | get => _color; 522 | set 523 | { 524 | _color = value; 525 | 526 | var colorHex = _color.ToAttributeValue() ?? "default"; 527 | AccentBaseColor.WithDefault(colorHex.ToSwatch()); 528 | } 529 | } 530 | 531 | public bool IsDark 532 | { 533 | get => _isDark; 534 | set 535 | { 536 | _isDark = value; 537 | 538 | var luminance = _isDark 539 | ? StandardLuminance.DarkMode 540 | : StandardLuminance.LightMode; 541 | BaseLayerLuminance.WithDefault(luminance.GetLuminanceValue()); 542 | } 543 | } 544 | } 545 | ``` 546 | 547 | - In the MainLayout.razor file, update the FluentLayout styles to use the predefined colors. 548 | 549 | ```xml 550 | 552 | ``` 553 | 554 | - The result will be 555 | 556 | ![Setup Project](doc/step8.gif) 557 | 558 | ## 9. Add a confirmation Dialog 559 | 560 | 561 | - Update the **Registry.razor** page to include an **IconStart** to the **Create account** button. 562 | 563 | ```xml 564 | 569 | Create account 570 | 571 | ``` 572 | 573 | - At the end of the **MainLayout.razor** file, add this line. 574 | 575 | ```xml 576 | 577 | ``` 578 | 579 | - In the **Registry.razor** page, inject this service and add the **Dialog Message**. 580 | 581 | ```csharp 582 | @inject IDialogService DialogService 583 | 584 | private async Task ValidHandlerAsync() 585 | { 586 | Loading = true; 587 | 588 | // Simulate asynchronous loading 589 | await Task.Delay(1000); 590 | 591 | // Confirmation 592 | await DialogService.ShowInfoAsync( 593 | message: "Your account has been successfully created", 594 | title: "New user"); 595 | 596 | Loading = false; 597 | } 598 | ``` 599 | 600 | - Add this new **AccountCreatedDialog.razor** file to customize the Dialog content. 601 | 602 | ```xml 603 | @implements IDialogContentComponent 604 | 605 | @* Header *@ 606 | 607 | 608 | 609 | 610 | @Dialog.Instance.Parameters.Title 611 | 612 | 613 | 614 | 615 | @* Footer *@ 616 | 617 | 619 | Close 620 | 621 | 622 | 623 | @* Body *@ 624 | 625 | 626 | Thanks for being awesome! 627 | 628 | 629 | Thank you for registering your new request. 630 | If your request is urgent, please use our telephone number to speak to one 631 | of our customer service representatives. 632 | You can also reach us via our documentation page. 634 | 635 | 636 | 637 | @code { 638 | [CascadingParameter] 639 | public FluentDialog Dialog { get; set; } = default!; 640 | 641 | private async Task SaveAsync() 642 | { 643 | await Dialog.CloseAsync(); 644 | } 645 | } 646 | ``` 647 | - Replace the previous **DialogService.ShowInfoAsync** method by this new 648 | `ShowDialogAsync`, to call the customized dialog box. 649 | 650 | ```csharp 651 | // await DialogService.ShowInfoAsync("Your account has been successfully created", 652 | // "New user"); 653 | 654 | await DialogService.ShowDialogAsync(new DialogParameters() 655 | { 656 | Title = "New user", 657 | }); 658 | ``` 659 | 660 | ## 10. Replace by a Toast message 661 | 662 | 663 | - At the end of the MainLayout.razor file, add this line. 664 | ```xml 665 | 666 | ``` 667 | 668 | > 📝 Since version **V4-Preview.3**, this tag was renamed to **FluentToastProvider**. 669 | 670 | - (Optional) In the **App.css** file, add this style to fix. 671 | 672 | ```css 673 | /* Fixed in FluentUI.Blazor V4 Preview 3 */ 674 | .fluent-toast { 675 | font-family: var(--body-font); 676 | } 677 | ``` 678 | 679 | 680 | - Update the **Registry.razor** file. 681 | 682 | ```xml 683 | 684 | ``` 685 | 686 | - In the **Registry.razor** page, inject this service and add the **Toast** Message. 687 | 688 | ```csharp 689 | @inject IDialogService DialogService 690 | 691 | private async Task ValidHandlerAsync() 692 | { 693 | Loading = true; 694 | 695 | // Simulate asynchronous loading 696 | await Task.Delay(1000); 697 | 698 | // Confirmation 699 | // await DialogService.ShowInfoAsync("Your account has been successfully created", 700 | // "New user"); 701 | 702 | // await DialogService.ShowDialogAsync(new DialogParameters() 703 | // { 704 | // Title = "New user", 705 | // }); 706 | 707 | ToastService.ShowSuccess("Your account has been successfully created"); 708 | 709 | Loading = false; 710 | } 711 | ``` 712 | 713 | ![Final result](doc/final.gif) 714 | -------------------------------------------------------------------------------- /doc/final.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dvoituron/dotnetconf-2023-fluentui-blazor/65e5881b11f66c58fc125098d6a06c3fc738ba45/doc/final.gif -------------------------------------------------------------------------------- /doc/step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dvoituron/dotnetconf-2023-fluentui-blazor/65e5881b11f66c58fc125098d6a06c3fc738ba45/doc/step1.png -------------------------------------------------------------------------------- /doc/step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dvoituron/dotnetconf-2023-fluentui-blazor/65e5881b11f66c58fc125098d6a06c3fc738ba45/doc/step2.png -------------------------------------------------------------------------------- /doc/step5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dvoituron/dotnetconf-2023-fluentui-blazor/65e5881b11f66c58fc125098d6a06c3fc738ba45/doc/step5.png -------------------------------------------------------------------------------- /doc/step6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dvoituron/dotnetconf-2023-fluentui-blazor/65e5881b11f66c58fc125098d6a06c3fc738ba45/doc/step6.gif -------------------------------------------------------------------------------- /doc/step8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dvoituron/dotnetconf-2023-fluentui-blazor/65e5881b11f66c58fc125098d6a06c3fc738ba45/doc/step8.gif -------------------------------------------------------------------------------- /src/DemoFluentUI.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.8.34219.65 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DemoFluentUI", "DemoFluentUI\DemoFluentUI.csproj", "{370ED669-7ADF-4B4F-8C48-0FB313F690A8}" 7 | EndProject 8 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{24A55099-D737-440E-ACE6-73D30EA17085}" 9 | ProjectSection(SolutionItems) = preProject 10 | unlockfluentui.demosnippets = unlockfluentui.demosnippets 11 | EndProjectSection 12 | EndProject 13 | Global 14 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 15 | Debug|Any CPU = Debug|Any CPU 16 | Release|Any CPU = Release|Any CPU 17 | EndGlobalSection 18 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 19 | {370ED669-7ADF-4B4F-8C48-0FB313F690A8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 20 | {370ED669-7ADF-4B4F-8C48-0FB313F690A8}.Debug|Any CPU.Build.0 = Debug|Any CPU 21 | {370ED669-7ADF-4B4F-8C48-0FB313F690A8}.Release|Any CPU.ActiveCfg = Release|Any CPU 22 | {370ED669-7ADF-4B4F-8C48-0FB313F690A8}.Release|Any CPU.Build.0 = Release|Any CPU 23 | EndGlobalSection 24 | GlobalSection(SolutionProperties) = preSolution 25 | HideSolutionNode = FALSE 26 | EndGlobalSection 27 | GlobalSection(ExtensibilityGlobals) = postSolution 28 | SolutionGuid = {AE7A2BF1-5223-40C1-9239-6AFA1B72A908} 29 | EndGlobalSection 30 | EndGlobal 31 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Layout/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @using System.Runtime.InteropServices 2 | @inherits LayoutComponentBase 3 | 4 | 5 | @* Header *@ 6 | 7 | Unlocking the power of the Fluent UI Blazor library 8 | 9 | 10 | 11 | 12 | @* Left Menu *@ 13 | 14 | Home 15 | Counter 16 | Weather 17 | Register 18 | 19 | 20 | @* Content *@ 21 |
22 | @Body 23 |
24 | 25 | 26 | 27 | 28 | 29 | @* Footer *@ 30 | 31 |   © Microsoft 2024 32 | 33 | Powered by @RuntimeInformation.FrameworkDescription   34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | An unhandled error has occurred. 43 | Reload 44 | 🗙 45 |
-------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Layout/MainLayout.razor.css: -------------------------------------------------------------------------------- 1 | #blazor-error-ui { 2 | background: lightyellow; 3 | bottom: 0; 4 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 5 | display: none; 6 | left: 0; 7 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 8 | position: fixed; 9 | width: 100%; 10 | z-index: 1000; 11 | } 12 | 13 | #blazor-error-ui .dismiss { 14 | cursor: pointer; 15 | position: absolute; 16 | right: 0.75rem; 17 | top: 0.5rem; 18 | } 19 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Pages/AccountCreatedDialog.razor: -------------------------------------------------------------------------------- 1 | @implements IDialogContentComponent 2 | 3 | @* Header *@ 4 | 5 | 6 | 7 | 8 | @Dialog.Instance.Parameters.Title 9 | 10 | 11 | 12 | 13 | @* Footer *@ 14 | 15 | 17 | Close 18 | 19 | 20 | 21 | @* Body *@ 22 | 23 | 24 | Thanks for being awesome! 25 | 26 | 27 | A new request has been made in your behalf. 28 | If your request is urgent, please use our telephone number to speak to one 29 | of our customer service representatives. 30 | You can also reach us via 31 | our documentation page 32 | . 33 | 34 | 35 | 36 | @code { 37 | [CascadingParameter] 38 | public FluentDialog Dialog { get; set; } = default!; 39 | 40 | private async Task SaveAsync() 41 | { 42 | await Dialog.CloseAsync(); 43 | } 44 | } -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Pages/Counter.razor: -------------------------------------------------------------------------------- 1 | @page "/counter" 2 | 3 | Counter 4 | 5 | Counter 6 | 7 | 8 | 9 | Current count: @currentCount 10 | 11 | 12 | Click me 13 | 14 | 15 | 16 | 17 | @code { 18 | private int currentCount = 0; 19 | 20 | private void IncrementCount() 21 | { 22 | currentCount++; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Pages/Country.cs: -------------------------------------------------------------------------------- 1 | namespace DemoFluentUI.Components.Pages; 2 | 3 | using Microsoft.AspNetCore.Components; 4 | 5 | public record Country(string Code, string Name) 6 | { 7 | public string Flag => $"https://fluentui-blazor.net/_content/FluentUI.Demo.Shared/flags/{Code}.svg"; 8 | 9 | public MarkupString HtmlFlagAndName => (MarkupString) 10 | @$"
11 | 12 |
{Name}
13 |
"; 14 | 15 | public static IEnumerable All 16 | { 17 | get 18 | { 19 | // List generated using https://chat.openai.com/ 20 | return new Country[] 21 | { 22 | new Country("af", "Afghanistan"), 23 | new Country("al", "Albania"), 24 | new Country("dz", "Algeria"), 25 | new Country("as", "American Samoa"), 26 | new Country("ad", "Andorra"), 27 | new Country("ao", "Angola"), 28 | new Country("ai", "Anguilla"), 29 | new Country("aq", "Antarctica"), 30 | new Country("ag", "Antigua and Barbuda"), 31 | new Country("ar", "Argentina"), 32 | new Country("am", "Armenia"), 33 | new Country("aw", "Aruba"), 34 | new Country("au", "Australia"), 35 | new Country("at", "Austria"), 36 | new Country("az", "Azerbaijan"), 37 | new Country("bs", "Bahamas"), 38 | new Country("bh", "Bahrain"), 39 | new Country("bd", "Bangladesh"), 40 | new Country("bb", "Barbados"), 41 | new Country("by", "Belarus"), 42 | new Country("be", "Belgium"), 43 | new Country("bz", "Belize"), 44 | new Country("bj", "Benin"), 45 | new Country("bm", "Bermuda"), 46 | new Country("bt", "Bhutan"), 47 | new Country("bo", "Bolivia"), 48 | new Country("bq", "Bonaire, Sint Eustatius, and Saba"), 49 | new Country("ba", "Bosnia and Herzegovina"), 50 | new Country("bw", "Botswana"), 51 | new Country("bv", "Bouvet Island"), 52 | new Country("br", "Brazil"), 53 | new Country("io", "British Indian Ocean Territory"), 54 | new Country("vg", "British Virgin Islands"), 55 | new Country("bn", "Brunei"), 56 | new Country("bg", "Bulgaria"), 57 | new Country("bf", "Burkina Faso"), 58 | new Country("bi", "Burundi"), 59 | new Country("cv", "Cabo Verde"), 60 | new Country("kh", "Cambodia"), 61 | new Country("cm", "Cameroon"), 62 | new Country("ca", "Canada"), 63 | new Country("ky", "Cayman Islands"), 64 | new Country("cf", "Central African Republic"), 65 | new Country("td", "Chad"), 66 | new Country("cl", "Chile"), 67 | new Country("cn", "China"), 68 | new Country("cx", "Christmas Island"), 69 | new Country("cc", "Cocos (Keeling) Islands"), 70 | new Country("co", "Colombia"), 71 | new Country("km", "Comoros"), 72 | new Country("cd", "Congo (Congo-Kinshasa)"), 73 | new Country("ck", "Cook Islands"), 74 | new Country("cr", "Costa Rica"), 75 | new Country("hr", "Croatia"), 76 | new Country("cu", "Cuba"), 77 | new Country("cw", "Curaçao"), 78 | new Country("cy", "Cyprus"), 79 | new Country("cz", "Czech Republic"), 80 | new Country("ci", "Côte d'Ivoire"), 81 | new Country("kp", "Democratic People's Republic of Korea (North Korea)"), 82 | new Country("dk", "Denmark"), 83 | new Country("dj", "Djibouti"), 84 | new Country("dm", "Dominica"), 85 | new Country("do", "Dominican Republic"), 86 | new Country("ec", "Ecuador"), 87 | new Country("eg", "Egypt"), 88 | new Country("sv", "El Salvador"), 89 | new Country("gq", "Equatorial Guinea"), 90 | new Country("er", "Eritrea"), 91 | new Country("ee", "Estonia"), 92 | new Country("sz", "Eswatini"), 93 | new Country("et", "Ethiopia"), 94 | new Country("fk", "Falkland Islands (Malvinas)"), 95 | new Country("fo", "Faroe Islands"), 96 | new Country("fj", "Fiji"), 97 | new Country("fi", "Finland"), 98 | new Country("fr", "France"), 99 | new Country("gf", "French Guiana"), 100 | new Country("pf", "French Polynesia"), 101 | new Country("tf", "French Southern Territories"), 102 | new Country("ga", "Gabon"), 103 | new Country("gm", "Gambia"), 104 | new Country("ge", "Georgia"), 105 | new Country("de", "Germany"), 106 | new Country("gh", "Ghana"), 107 | new Country("gi", "Gibraltar"), 108 | new Country("gr", "Greece"), 109 | new Country("gl", "Greenland"), 110 | new Country("gd", "Grenada"), 111 | new Country("gp", "Guadeloupe"), 112 | new Country("gu", "Guam"), 113 | new Country("gt", "Guatemala"), 114 | new Country("gg", "Guernsey"), 115 | new Country("gn", "Guinea"), 116 | new Country("gw", "Guinea-Bissau"), 117 | new Country("gy", "Guyana"), 118 | new Country("ht", "Haiti"), 119 | new Country("hm", "Heard Island and McDonald Islands"), 120 | new Country("va", "Holy See"), 121 | new Country("hn", "Honduras"), 122 | new Country("hk", "Hong Kong"), 123 | new Country("hu", "Hungary"), 124 | new Country("is", "Iceland"), 125 | new Country("in", "India"), 126 | new Country("id", "Indonesia"), 127 | new Country("ir", "Iran"), 128 | new Country("iq", "Iraq"), 129 | new Country("ie", "Ireland"), 130 | new Country("im", "Isle of Man"), 131 | new Country("il", "Israel"), 132 | new Country("it", "Italy"), 133 | new Country("jm", "Jamaica"), 134 | new Country("jp", "Japan"), 135 | new Country("je", "Jersey"), 136 | new Country("jo", "Jordan"), 137 | new Country("kz", "Kazakhstan"), 138 | new Country("ke", "Kenya"), 139 | new Country("ki", "Kiribati"), 140 | new Country("kw", "Kuwait"), 141 | new Country("kg", "Kyrgyzstan"), 142 | new Country("la", "Lao People's Democratic Republic"), 143 | new Country("lv", "Latvia"), 144 | new Country("lb", "Lebanon"), 145 | new Country("ls", "Lesotho"), 146 | new Country("lr", "Liberia"), 147 | new Country("ly", "Libya"), 148 | new Country("li", "Liechtenstein"), 149 | new Country("lt", "Lithuania"), 150 | new Country("lu", "Luxembourg"), 151 | new Country("mo", "Macao"), 152 | new Country("mg", "Madagascar"), 153 | new Country("mw", "Malawi"), 154 | new Country("my", "Malaysia"), 155 | new Country("mv", "Maldives"), 156 | new Country("ml", "Mali"), 157 | new Country("mt", "Malta"), 158 | new Country("mh", "Marshall Islands"), 159 | new Country("mq", "Martinique"), 160 | new Country("mr", "Mauritania"), 161 | new Country("mu", "Mauritius"), 162 | new Country("yt", "Mayotte"), 163 | new Country("mx", "Mexico"), 164 | new Country("fm", "Micronesia"), 165 | new Country("md", "Moldova"), 166 | new Country("mc", "Monaco"), 167 | new Country("mn", "Mongolia"), 168 | new Country("me", "Montenegro"), 169 | new Country("ms", "Montserrat"), 170 | new Country("ma", "Morocco"), 171 | new Country("mz", "Mozambique"), 172 | new Country("mm", "Myanmar"), 173 | new Country("na", "Namibia"), 174 | new Country("nr", "Nauru"), 175 | new Country("np", "Nepal"), 176 | new Country("nl", "Netherlands"), 177 | new Country("nc", "New Caledonia"), 178 | new Country("nz", "New Zealand"), 179 | new Country("ni", "Nicaragua"), 180 | new Country("ne", "Niger"), 181 | new Country("ng", "Nigeria"), 182 | new Country("nu", "Niue"), 183 | new Country("nf", "Norfolk Island"), 184 | new Country("mp", "Northern Mariana Islands"), 185 | new Country("no", "Norway"), 186 | new Country("om", "Oman"), 187 | new Country("pk", "Pakistan"), 188 | new Country("ps", "Palestine"), 189 | new Country("pa", "Panama"), 190 | new Country("pg", "Papua New Guinea"), 191 | new Country("py", "Paraguay"), 192 | new Country("pe", "Peru"), 193 | new Country("ph", "Philippines"), 194 | new Country("pn", "Pitcairn"), 195 | new Country("pl", "Poland"), 196 | new Country("pt", "Portugal"), 197 | new Country("pr", "Puerto Rico"), 198 | new Country("qa", "Qatar"), 199 | new Country("kr", "Republic of Korea (South Korea)"), 200 | new Country("md", "Republic of Moldova"), 201 | new Country("ro", "Romania"), 202 | new Country("ru", "Russian Federation"), 203 | new Country("rw", "Rwanda"), 204 | new Country("re", "Réunion"), 205 | new Country("bl", "Saint Barthélemy"), 206 | new Country("sh", "Saint Helena"), 207 | new Country("kn", "Saint Kitts and Nevis"), 208 | new Country("lc", "Saint Lucia"), 209 | new Country("mf", "Saint Martin"), 210 | new Country("pm", "Saint Pierre and Miquelon"), 211 | new Country("vc", "Saint Vincent and the Grenadines"), 212 | new Country("ws", "Samoa"), 213 | new Country("sm", "San Marino"), 214 | new Country("st", "Sao Tome and Principe"), 215 | new Country("sa", "Saudi Arabia"), 216 | new Country("sn", "Senegal"), 217 | new Country("rs", "Serbia"), 218 | new Country("sc", "Seychelles"), 219 | new Country("sl", "Sierra Leone"), 220 | new Country("sg", "Singapore"), 221 | new Country("sx", "Sint Maarten"), 222 | new Country("sk", "Slovakia"), 223 | new Country("si", "Slovenia"), 224 | new Country("sb", "Solomon Islands"), 225 | new Country("so", "Somalia"), 226 | new Country("za", "South Africa"), 227 | new Country("gs", "South Georgia and the South Sandwich Islands"), 228 | new Country("ss", "South Sudan"), 229 | new Country("es", "Spain"), 230 | new Country("lk", "Sri Lanka"), 231 | new Country("sd", "Sudan"), 232 | new Country("sr", "Suriname"), 233 | new Country("sj", "Svalbard and Jan Mayen"), 234 | new Country("se", "Sweden"), 235 | new Country("ch", "Switzerland"), 236 | new Country("sy", "Syria"), 237 | new Country("tw", "Taiwan"), 238 | new Country("tj", "Tajikistan"), 239 | new Country("th", "Thailand"), 240 | new Country("mk", "The Former Yugoslav Republic of Macedonia"), 241 | new Country("tl", "Timor-Leste"), 242 | new Country("tg", "Togo"), 243 | new Country("tk", "Tokelau"), 244 | new Country("to", "Tonga"), 245 | new Country("tt", "Trinidad and Tobago"), 246 | new Country("tn", "Tunisia"), 247 | new Country("tr", "Turkey"), 248 | new Country("tm", "Turkmenistan"), 249 | new Country("tc", "Turks and Caicos Islands"), 250 | new Country("tv", "Tuvalu"), 251 | new Country("ug", "Uganda"), 252 | new Country("ua", "Ukraine"), 253 | new Country("ae", "United Arab Emirates"), 254 | new Country("gb", "United Kingdom"), 255 | new Country("us", "United States of America"), 256 | new Country("vi", "United States Virgin Islands"), 257 | new Country("uy", "Uruguay"), 258 | new Country("uz", "Uzbekistan"), 259 | new Country("vu", "Vanuatu"), 260 | new Country("ve", "Venezuela"), 261 | new Country("vn", "Vietnam"), 262 | new Country("wf", "Wallis and Futuna"), 263 | new Country("eh", "Western Sahara"), 264 | new Country("ye", "Yemen"), 265 | new Country("zm", "Zambia"), 266 | new Country("zw", "Zimbabwe"), 267 | }; 268 | } 269 | } 270 | } -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Pages/Error.razor: -------------------------------------------------------------------------------- 1 | @page "/Error" 2 | @using System.Diagnostics 3 | 4 | Error 5 | 6 |

Error.

7 |

An error occurred while processing your request.

8 | 9 | @if (ShowRequestId) 10 | { 11 |

12 | Request ID: @RequestId 13 |

14 | } 15 | 16 |

Development Mode

17 |

18 | Swapping to Development environment will display more detailed information about the error that occurred. 19 |

20 |

21 | The Development environment shouldn't be enabled for deployed applications. 22 | It can result in displaying sensitive information from exceptions to end users. 23 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 24 | and restarting the app. 25 |

26 | 27 | @code{ 28 | [CascadingParameter] public HttpContext? HttpContext { get; set; } 29 | 30 | public string? RequestId { get; set; } 31 | public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); 32 | 33 | protected override void OnInitialized() => 34 | RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier; 35 | } 36 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Pages/Home.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @using Microsoft.FluentUI.AspNetCore.Components.DesignTokens 3 | @using Microsoft.FluentUI.AspNetCore.Components.Extensions 4 | @inject BaseLayerLuminance BaseLayerLuminance 5 | @inject AccentBaseColor AccentBaseColor 6 | 7 | Home 8 | 9 |

Hello, world!

10 | 11 | Welcome to your new app. 12 | 13 | 14 | Settings 15 | 16 | ()) 18 | Height="200px" 19 | @bind-SelectedOption="@Color" /> 20 | 21 | 26 | 27 | 28 | @code { 29 | private OfficeColor _color = OfficeColor.Default; 30 | private bool _isDark = false; 31 | 32 | public OfficeColor Color 33 | { 34 | get => _color; 35 | set 36 | { 37 | _color = value == OfficeColor.Default ? OfficeColor.Word : value; 38 | 39 | var colorHex = _color.ToAttributeValue() ?? "default"; 40 | AccentBaseColor.WithDefault(colorHex.ToSwatch()); 41 | } 42 | } 43 | 44 | public bool IsDark 45 | { 46 | get => _isDark; 47 | set 48 | { 49 | _isDark = value; 50 | 51 | var luminance = _isDark ? StandardLuminance.DarkMode : StandardLuminance.LightMode; 52 | BaseLayerLuminance.WithDefault(luminance.GetLuminanceValue()); 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Pages/Register.razor: -------------------------------------------------------------------------------- 1 | @page "/register" 2 | @inject IDialogService DialogService 3 | @inject IToastService ToastService 4 | 5 | New user 6 | 7 | Register 8 | 9 | 10 | 11 | 12 | Let's get you all set up so you can verify your personal account and begin 13 | setting up your profile. 14 | 15 | 16 | 17 | 21 | 24 | 26 | @* Country *@ 27 | 36 | 37 | 38 | @language.HtmlFlagAndName 39 | 40 | 41 | 42 | Please select only one country. 43 | 44 | 45 | 46 | 51 | 52 | 54 | 55 |
56 | 57 | 62 | Create account 63 | 64 | 65 | 66 | 67 | @code { 68 | private RegisterUser Data = new(); 69 | private bool AcceptToCreate = false; 70 | private bool Loading = false; 71 | 72 | private async Task ValidHandlerAsync() 73 | { 74 | Loading = true; 75 | 76 | // Simulate asynchronous loading 77 | await Task.Delay(1000); 78 | 79 | // Confirmation 80 | // await DialogService.ShowInfoAsync(message: "Your account has been successfully created", 81 | // title: "New user"); 82 | 83 | // await DialogService.ShowDialogAsync(new DialogParameters() 84 | // { 85 | // Title = "New user", 86 | // }); 87 | 88 | ToastService.ShowSuccess("Your account has been successfully created"); 89 | 90 | Loading = false; 91 | } 92 | 93 | private async Task OnSearchAsync(OptionsSearchEventArgs e) 94 | { 95 | e.Items = Country.All.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase)) 96 | .OrderBy(i => i.Name); 97 | 98 | await Task.CompletedTask; 99 | } 100 | 101 | public class RegisterUser 102 | { 103 | public string? LastName { get; set; } = "John"; 104 | public string? FistName { get; set; } = "Smith"; 105 | public DateTime? BirthDate { get; set; } 106 | public string? Email { get; set; } = "john@mycompany.com"; 107 | public IEnumerable Languages { get; set; } = Array.Empty(); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Pages/Weather.razor: -------------------------------------------------------------------------------- 1 | @page "/weather" 2 | 3 | Weather 4 | 5 | Weather 6 | 7 | This component demonstrates showing data. 8 | 9 | @if (GridItems == null) 10 | { 11 | Loading... 12 | } 13 | else 14 | { 15 |
16 | 21 | 22 | 23 | 24 | 25 | @if (context.TemperatureC > 21) 26 | { 27 | 28 | } 29 | else 30 | { 31 | 32 | } 33 | 34 | 35 | 36 |
37 | } 38 | 39 | @code { 40 | private IQueryable? GridItems; 41 | 42 | protected override async Task OnAfterRenderAsync(bool firstRender) 43 | { 44 | if (!firstRender) return; 45 | 46 | // Simulate asynchronous loading to demonstrate streaming rendering 47 | await Task.Delay(500); 48 | 49 | var Summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; 50 | 51 | GridItems = Enumerable.Range(1, 5).Select(index => new WeatherForecast 52 | { 53 | Date = DateOnly.FromDateTime(DateTime.Now).AddDays(index), 54 | TemperatureC = index * 2 + 17, 55 | Summary = Summaries[index], 56 | }).AsQueryable(); 57 | 58 | StateHasChanged(); 59 | } 60 | 61 | private class WeatherForecast 62 | { 63 | public DateOnly Date { get; set; } 64 | public int TemperatureC { get; set; } 65 | public string? Summary { get; set; } 66 | public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/Routes.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Components/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.AspNetCore.Components.Web.Virtualization 7 | @using Microsoft.JSInterop 8 | @using DemoFluentUI 9 | @using DemoFluentUI.Components 10 | @using Microsoft.FluentUI.AspNetCore.Components -------------------------------------------------------------------------------- /src/DemoFluentUI/DemoFluentUI.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | net8.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Program.cs: -------------------------------------------------------------------------------- 1 | using DemoFluentUI.Components; 2 | using Microsoft.FluentUI.AspNetCore.Components; 3 | 4 | var builder = WebApplication.CreateBuilder(args); 5 | 6 | // Add services to the container. 7 | builder.Services.AddRazorComponents() 8 | .AddInteractiveServerComponents(); 9 | 10 | // Add FluentUI 11 | builder.Services.AddHttpClient(); 12 | builder.Services.AddFluentUIComponents(); 13 | 14 | var app = builder.Build(); 15 | 16 | // Configure the HTTP request pipeline. 17 | if (!app.Environment.IsDevelopment()) 18 | { 19 | app.UseExceptionHandler("/Error", createScopeForErrors: true); 20 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. 21 | app.UseHsts(); 22 | } 23 | 24 | app.UseHttpsRedirection(); 25 | 26 | app.UseStaticFiles(); 27 | app.UseAntiforgery(); 28 | 29 | app.MapRazorComponents() 30 | .AddInteractiveServerRenderMode(); 31 | 32 | app.Run(); 33 | -------------------------------------------------------------------------------- /src/DemoFluentUI/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/launchsettings.json", 3 | "iisSettings": { 4 | "windowsAuthentication": false, 5 | "anonymousAuthentication": true, 6 | "iisExpress": { 7 | "applicationUrl": "http://localhost:39785", 8 | "sslPort": 44334 9 | } 10 | }, 11 | "profiles": { 12 | "http": { 13 | "commandName": "Project", 14 | "dotnetRunMessages": true, 15 | "launchBrowser": true, 16 | "applicationUrl": "http://localhost:5256", 17 | "environmentVariables": { 18 | "ASPNETCORE_ENVIRONMENT": "Development" 19 | } 20 | }, 21 | "https": { 22 | "commandName": "Project", 23 | "dotnetRunMessages": true, 24 | "launchBrowser": true, 25 | "applicationUrl": "https://localhost:7269;http://localhost:5256", 26 | "environmentVariables": { 27 | "ASPNETCORE_ENVIRONMENT": "Development" 28 | } 29 | }, 30 | "IIS Express": { 31 | "commandName": "IISExpress", 32 | "launchBrowser": true, 33 | "environmentVariables": { 34 | "ASPNETCORE_ENVIRONMENT": "Development" 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/DemoFluentUI/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft.AspNetCore": "Warning" 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/DemoFluentUI/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft.AspNetCore": "Warning" 6 | } 7 | }, 8 | "AllowedHosts": "*" 9 | } 10 | -------------------------------------------------------------------------------- /src/DemoFluentUI/wwwroot/app.css: -------------------------------------------------------------------------------- 1 | h1:focus { 2 | outline: none; 3 | } 4 | 5 | .valid.modified:not([type=checkbox]) { 6 | outline: 1px solid #26b050; 7 | } 8 | 9 | .invalid { 10 | outline: 1px solid #e52560; 11 | } 12 | 13 | .validation-message { 14 | color: #e52560; 15 | } 16 | 17 | .blazor-error-boundary { 18 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 19 | padding: 1rem 1rem 1rem 3.7rem; 20 | color: white; 21 | } 22 | 23 | .blazor-error-boundary::after { 24 | content: "An error has occurred." 25 | } 26 | 27 | /* Demo Styles */ 28 | body { 29 | margin: 0px; 30 | height: 100vh; 31 | } 32 | 33 | .footer { 34 | background-color: var(--neutral-layer-4); 35 | padding: 4px 0px; 36 | text-align: center; 37 | } 38 | 39 | .fluent-nav-menu { 40 | background-color: var(--neutral-layer-1); 41 | height: 100%; 42 | } 43 | 44 | .main-content { 45 | height: 100%; 46 | width: 100%; 47 | padding: 0px 16px; 48 | } 49 | 50 | fluent-text-field { 51 | min-width: 100%; 52 | margin-bottom: 16px; 53 | } -------------------------------------------------------------------------------- /src/unlockfluentui.demosnippets: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dvoituron/dotnetconf-2023-fluentui-blazor/65e5881b11f66c58fc125098d6a06c3fc738ba45/src/unlockfluentui.demosnippets --------------------------------------------------------------------------------