XAML Controls Gallery Teaches Fluent Design for Windows 10 UWP Apps -- Visual Studio Magazine

XAML Controls Gallery Teaches Fluent Design for Windows 10 UWP Apps

By David Ramel
10/30/2017

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.

**[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.

Printable Format

comments powered by Disqus

Featured

Versioning and Documenting ASP.NET Core Services

Building an API with ASP.NET Core is only half the job. If your API is going to live more than one release cycle, you're going to need to version it. If you have other people building clients for it, you're going to need to document it.
TypeScript Tops New JetBrains 'Language Promise Index'

In its latest annual developer ecosystem report, JetBrains introduced a new "Language Promise Index" topped by Microsoft's TypeScript programming language.
OpenSilver 3.1 Unveils Drag-and-Drop XAML Designer for VS Code

Claiming an industry first, Userware announced a drag-and-drop XAML designer for use in VS Code, coming with OpenSilver 3.1, the latest iteration of the open-source implementation of Microsoft's long-deprecated and oft-mourned rich client development platform, Silverlight.
Visual Studio Dev Vexed by Copilot's Obtuse 'Responsible AI' Refusal

No matter what, some systems simply won't divulge exactly what in the current conversation caused them to balk, simply pointing to vague policies and generic guidance.
Build Your First AI Applications with Local AI

"AI right now feels like a vast space which can be hard to jump into," says Craig Loewen, a senior product manager at Microsoft who is helping devs unsure about making that first daunting leap.