XAML

XAML Fundamentals for Web & Mobile: Adding Custom Sorting Logic

Nick Randolph’s earlier post in this blog series covered the basics of sorting and grouping. The CollectionViewSource provides a wrapper around a data source that can indicate if the source is grouped and will maintain the selected item. Suppose you are familiar with CollectionViewSource from WPF. In that case, you may not be aware that the class no longer has functionality for sorting and grouping itself in UWP, but this can be achieved in the underlying source. The WinUI/Uno version follows the UWP functionality. CustomSorting Sample App Sorting Collections .NET has a set of functionalities for querying collections, and they make up the System.Linq namespace. This adds several extension methods to standard .NET collection classes to allow querying, sorting, and grouping. LINQ stands for Language INtegrated Query, a declarative query syntax right in your C# code. You can perform operations using the query syntax or directly using the fluent OrderBy, GroupBy, etc. methods provided. LINQ Fluent When you are using intrinsic types such as Int32 (aliased as “int” in C#), there is a predictable behavior for sorting because these types implement the IComparable<T> interface. This interface defines a single method CompareTo which returns a value indicating whether the other instance is less than,

XAML Fundamentals for Web & Mobile: Building a Data Bound Menu

WinUI contains classes for menus belonging to a Window and context menus attached to other controls. Users will be familiar with menus in traditional desktop applications and mobile devices. Unlike previous Windows APIs, the WinUI MenuBar and MenuBarItem do not support data binding, so you must build your menu tree from MenuFlyoutItem, MenuFlyoutSubItem, and MenuFlyoutSeparator, either in code or directly in your XAML.  The two types of items cover all the menu scenarios since the MenuFlyoutSubItem can contain additional menu items. A static menu might look something like this: Data-Bindings Menu Sometimes, you may want to populate a menu dynamically from a data source rather than hard-coding them. In this case, there is a little more work to achieve the desired results. There are a couple of ways you could present a grouped collection in a menu – you could choose to display each group using a MenuFlyoutSubItem and have the items nested below this.   While technically, you can continue to nest multiple levels with the MenuFlyoutSubItem, in practice, more than two layers become challenging to navigate, especially on smaller screens. Given a single-level grouped collection, you can write code like the following to populate a top-level MenuBarItem from the

Replicating Goodreads App Book Detail Page in Figma and Uno Platform

In the previous articles, I demonstrated the step-by-step processes of recreating the Home and Author pages of the Goodreads app using Figma and the Uno Platform Material Toolkit and how to generate the UI code using Uno Platform’s Figma Plugin. In this segment, I will be recreating our final UI, the Book Profile Page, before moving on to the last part of series; how to consume the code produced by the Uno Platform plugin. Amazon Goodreads App Tutorial – Community File Reference Image STEP 1: Page Templates and Navigation By now, if you’ve followed along with our previous two articles, to start the new UI recreation task, you need to drag, drop, and detach the Page template component from the Assets tab which comes as part of the UI library provided in the Uno Material Toolkit. Once that is done, and you’ve renamed your template, we can focus on the navigation components of our UI. Both the Top and Bottom TabBar come as part of the standard page template. Top Navigation Bar For the top Navigation bar, as it already comes as part of the template page, all we need to do is make the custom edits so that it

How to Quickly Build Goodreads Author Page with Figma and Uno Platform

For the second page of our Goodreads tutorial, we recreate the Author Page using Uno Platform’s open-source Plugin for Figma and Material Toolkit and generate the accompanying XAML code. Using the same approach, you can quickly build complete UIs for Uno Platform applications at lightning speed. Uno Platform brings a leading code generation plugin and Uno Material Toolkit into Figma, enabling teams to ship Uno Platform applications faster than ever. Designers can export developer-friendly XAML code for engineers Developers can skip the grunt work of coding UI from scratch. Amazon Goodreads App Tutorial – Community File Replicating Goodreads Author Page The author page of the Goodreads app can be broken down into four sections: Top Navigation Bar Author Profile List of authored books Bottom Navigation bar (Which can be reused from our Home page tutorial) Author Page – Reference Image Step 1: Top Navigation Bar The Standard Page Template provided with the Uno Toolkit already has a pre-set NavigationBar implemented; the generated XAML will correctly invoke a native NavigationBar with a leading icon when exported to your project. Start by adding the Standard Page Template to your canvas and remember to Detach Instance. Use this opportunity to rename the page

Recreating Amazon Goodreads App Home Page Using Material UI, Figma and Uno Platform

Figma is a great tool UX/UI designers use to create stunning interactive renders of UIs for a vast assortment of software applications. Uno Platform released a Figma plugin earlier this year to bridge the UI design to code handoff. This plugin allows users to convert their material-based UI designs to XAML code which can be consumed in an Uno Platform application. This series of articles will highlight how to recreate some of the UX in Amazon’s Goodreads app, even if you are just a developer tasked with creating a mobile design. Designers will, of course, be on familiar Figma turf. Specifically, the series will address the following: Recreating the Goodreads Home page Recreating the Goodreads Author page Recreating the Goodreads Books page Consuming Figma Generated code in an Uno Platform Application To follow along, you can find a list of resources & tools used in the series at the end of the article.  https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2022/10/11143032/Uno_GoodReads_Demo-1.webm Setting up Color Styles and Editing Colors As one of the basic design elements, it’s best practice to set up your colors at the start of the project, but you can always edit them at any point in the project using the following method:(Also detailed in

XAML Fundamentals for Web & Mobile: Advanced Binding Techniques

XAML platforms, from WPF and Silverlight to Uno and WinUI, support the MVVM pattern by separating the View described declaratively in a XML dialect with the application logic in code. The VM in the name represents the View Model; this is the code responsible for exposing functionality to which the View can bind without having any knowledge of the View itself. In addition, the platform provides data-binding functionality allowing the View to dynamically display data from the View Model and react to changes.   By declaring namespaces in your XAML file, you can declaratively use a surprising amount of your code and logic beyond the platform’s controls and components. In addition, some limitations with the code can be referred to from XAML – any class must have a default constructor, controls bound to a DataContext must bind to Properties on that source, or in the case of action items like Buttons, an ICommand.  However, in the modern XAML found in Uno and WinUI, there is an additional markup extension called x:Bind, which goes beyond the basic support for binding found in all previous XAML flavors.  By the end of this tutorial or following the sample code, you will have learned when

XAML Fundamentals for Web and Mobile: Three-level List/Detail Pattern

Opportunity instead of obsoletion Users increasingly expect an intuitive way to drill into your data source and inspect the contents of an individual element. It’s often necessary to leverage a pattern that consistently connects the intentioned person behind the screen to the result they expect. Likewise, a nontrivial part of modernizing your .NET app not only lies in rethinking it for the web but in challenging past assumptions about the user. In a multi-platform world, significant opportunities exist to bolster engagement and familiarity with the information they seek. That’s why developers using WinUI XAML on Uno Platform are well-positioned to enhance their app’s UI to enable faster parsing through a data source, more intuitive location of data items, and a responsive layout that scales to the current device. Understanding the pattern Users increasingly expect an intuitive way to drill into your data source and inspect the contents of an individual element. It’s often necessary to leverage a pattern that consistently connects the intentioned person behind the screen to the result they expect. Likewise, a nontrivial part of modernizing your .NET app not only lies in rethinking it for the web but in challenging past assumptions about the user. In a

Intro to Figma for .NET Developers

Developers and designers often agree that the “handoff” is a dreaded pain point when collaborating. Every mistake made in the design handoff can impact the app and cause a rework for the developer. One tool that has been quickly gaining traction and has seen increasingly wide use with developers and designers is Figma. Now for those unfamiliar with Figma, it is a free, collaborative interface design tool that has rapidly become the go-to choice for designers. That’s why we chose to integrate a Figma plugin that helps make the designer-developer handoff process smooth and seamless by allowing developers to easily access the complete design files. In the Microsoft ecosystem, we have been using the likes of Expression Blend, Adobe XD, Sketch, and InVision. But Figma has skyrocketed in adoption among designers, as seen by a UX Tools survey. Even a quick Twitter poll we conducted in October 2021 showed Figma as one of the leading design tool choices amongst developers. However, given the UX Tools poll above, we can conclude that Figma is yet to get even more adoption among .NET developers. 3 Features that Make Figma Stand Out Above Other In our opinion, Figma stands out above other options

XAML Fundamentals for Web & Mobile: ListView

It’s 2022 and XAML on the Web is now as relevant on Mobile and Web as it traditionally was on Windows Desktops. Between 2005 and 2013, Beatriz Stollnitz authored a series of blogs that covered a variety of XAML fundamentals and became a treasure trove of resources for developers. As you can imagine much of the information has since become outdated and most of the code samples no longer work out of the box with the latest version of Visual Studio. Last year, Nick Randolph, an Uno Platform contributor, revived the almost 10-year-old WPF blog series on his .NET Travels, and we’re picking up where he left off. In this continued version of XAML Basics, we added a focus on Web and Mobile where XAML is now very applicable. We carry on the efforts of making the adjustments needed to bring each control up to date as well as provide equivalent examples that work to include XAML cross platform support via Uno Platform and WinUI to Web, iOS, macOS, Android and even Linux! ListView A sizable benefit which came during the early days of WinRT XAML was the refreshed ListView and GridView controls. Microsoft engineered these controls to be smooth