News

XAML Controls Gallery Teaches Fluent Design for Windows 10 UWP Apps

Microsoft is showing off its Fluent Design System across apps built for all Windows 10-based devices with the new XAML Controls Gallery that provides interactive samples built with the XML-based markup language.

The "XAML Controls Gallery (aka XamlUiBasics)" GitHub project is part of a larger collection of samples published to highlight capabilities of Universal Windows Platform (UWP) apps that can run on any implementation of Windows 10.

In this case, the samples can be used to learn about the Fluent Design System, described by Microsoft as "an eloquent design system for a complex world." That complex world can include smartphones, tablets, desktop PCS, laptop PCs, Surface Hub devices and more, all with different screens and input methods.

To make UWP apps that look good and function properly on all those devices, the Fluent Design System provides guidance, materials, styles, templates, tools and other building blocks used to create UIs. For example, it demonstrates use of the Acrylic material designed to help coders add depth to their screens with a Brush that creates a partially transparent texture. The app also includes item pages, item templates, page headers, search results pages, AppBar toolbars, borders, buttons, data inputs and many more.

The GitHub project's app showcases those UI control building blocks in conjunction with the Windows Style Guide.

Specifically, Microsoft said, the XAML Controls Gallery demonstrates how to:

  • Specify XAML controls in markup: Each control page shows the markup used to create each example.
  • Implement a basic layout: This sample will show all of the possible layout options for an app and allow developers to interact with the panels to show how to achieve any layout they're looking for.
  • Create an adaptive UI: In addition to showing how each control responds to different form factors, the app itself is responsive and shows various methods for achieving adaptive UI.

It does those things by providing links within the app to let developers easily and quickly access the relevant documentation on Microsoft's MSDN site. However, to use the app, developers need to use Visual Studio 2017 to build the app and Windows 10 to run it. Another requirement listed by the project is Windows Server 2016 Technical Preview.

XAML Controls Gallery
[Click on image for larger view.] XAML Controls Gallery (source: Microsoft).

According to a Coding4Fun blog post, techniques taught by the app include: creating proper layouts that make it easy to navigate through an app and that look good on different devices and screen sizes; the use of styles to define the "personality" of an app via color, typography and motion; providing better usability by making apps inclusive and accessible to people around the world; and more.

Coincidentally, Microsoft last month announced long-awaited improvements to the XAML Designer tool built in to the Visual Studio IDE.

About the Author

David Ramel is an editor and writer at Converge 360.

comments powered by Disqus

Featured

  • Mastering Blazor Authentication and Authorization

    At the Visual Studio Live! @ Microsoft HQ developer conference set for August, Rockford Lhotka will explain the ins and outs of authentication across Blazor Server, WebAssembly, and .NET MAUI Hybrid apps, and show how to use identity and claims to customize application behavior through fine-grained authorization.

  • Linear Support Vector Regression from Scratch Using C# with Evolutionary Training

    Dr. James McCaffrey from Microsoft Research presents a complete end-to-end demonstration of the linear support vector regression (linear SVR) technique, where the goal is to predict a single numeric value. A linear SVR model uses an unusual error/loss function and cannot be trained using standard simple techniques, and so evolutionary optimization training is used.

  • Low-Code Report Says AI Will Enhance, Not Replace DIY Dev Tools

    Along with replacing software developers and possibly killing humanity, advanced AI is seen by many as a death knell for the do-it-yourself, low-code/no-code tooling industry, but a new report belies that notion.

  • Vibe Coding with Latest Visual Studio Preview

    Microsoft's latest Visual Studio preview facilitates "vibe coding," where developers mainly use GitHub Copilot AI to do all the programming in accordance with spoken or typed instructions.

  • Steve Sanderson Previews AI App Dev: Small Models, Agents and a Blazor Voice Assistant

    Blazor creator Steve Sanderson presented a keynote at the recent NDC London 2025 conference where he previewed the future of .NET application development with smaller AI models and autonomous agents, along with showcasing a new Blazor voice assistant project demonstrating cutting-edge functionality.

Subscribe on YouTube