Tutorial

Building Apps for MS Teams in C# and XAML with Uno Platform

In this blog, we’ll explore how Uno Platform and WebAssembly make it possible to develop apps for Microsoft Teams using C# and XAML. And how they can help streamline your workflows, automate tasks, and bring new capabilities to your team. By the end of this tutorial, you will have a simple sample app running in web version of Microsoft Teams, similar to our Getting Started tutorial. (Create a Single Page App with Uno Platform) Prerequisites 1. Visual Studio 2022 includes built-in support for Microsoft Teams and provides useful starter templates, but they are not installed by default with any workloads. Instead, we need to select them in the Visual Studio Installer manually. Open the Visual Studio Installer and click Modify on your favourite Visual Studio 2022 instance. Next, select the ASP.NET and web development workload and then find and check the Microsoft Teams development tools option in the Installation details pane. 2. While you can technically test your Microsoft Teams on your production tenant, creating a developer account in the Microsoft 365 Developer Program is preferable. First, go to the official website here and click Join. Next, log in using your Microsoft or company account and fill out the requested information. When successfully logged in, click the Set up E5

Replicating Pet Adoption UI with Uno Platform and Figma

Figma is notably regarded as a design tool. However, it is also easy for developers to learn and use, even with limited design experience. Furthermore, the Uno Platform for Figma plugin allows you to export your designs directly into code, saving time, streamlining the development process and improving the consistency of designs. This tutorial will walk you through creating a Pet UI mobile screen and exporting your Figma designs into code, including setting up your Figma file and designing using Uno Material Toolkit components. By the end of this tutorial, regardless of being a developer or designer, you will have a solid understanding of using Figma to create and export designs into code. Let’s get started! Pet Adopt UI https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2022/12/20102237/Uno__PETUI.webm Before Getting Started Install the Uno Platform Plugin Copy the Uno Material Toolkit Set up your Canvas and Screen Start by opening your file, selecting the cover page, and renaming it. 2. Continue to the Getting Started page. This is where you will want to set up all aspects of your app’s theme (Color styles, Font styles). These can always be changed later, but best practice would recommend you do it at the onset of your project. Note: all the

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,

Building a Profile Page with Uno Platform for Figma

In this tutorial, we’ll build a completely functional Profile Page using Figma and Uno Platform for Figma plugin to generate responsive XAML code that can be built upon and extended quickly. Profile Page – Playground File Breaking Down the UI The screen can be broken down into four sections, each with its own set of components: User Info Image Text Call Log IconButtons TextBlock Action Buttons IconButtons Bottom Menu IconButtons Text Now that we understand the layout of our UI and the components we are using, the next step is picking our theme as an essential design element. It’s best practice to set up your colors at the start of the project. Editing Color Styles in the Figma Toolkit File To edit your colors: In the Styles Panel (right side of the screen when nothing is selected), expand the Colors folder and subfolders to view all color roles used in the document. Select one that needs an update to follow your brand colors. Right-Click and Select Edit. From the Properties section of the Edit Style Panel, input the HEX code you want, which will update throughout the entire document. You can always edit them at any point in the project.

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

From Figma to Visual Studio – Adding Back-End Logic to Goodreads App

Now that we have three working views from our previous articles (Part 1, Part 2, Part 3), we can consume them in an Uno Platform App right from Visual Studio.  The Uno Platform Figma plugin has two tabs of interest, the XAML tab, and the Themes tab. The XAML tab houses the generated code for the page you created in Figma, while the Themes tab houses the Resource Dictionary for the page you created. The sample app created can be broken down into four parts: a. Modelsb. View models and seeded Datac. Viewsd. Resource Dictionaries Goodreads Sample App @ GitHub To Follow along, ensure you have set up your environment for Uno Platform. If you are new to Uno Platform, following our official getting started guide is the best way to get started. Models I created 2 Model classes for this recreation effort: The Author and Book. The Author class represents an Author Object which can be linked to a Book object since a Book has an Author property. In addition, I used an Enum to encapsulate several properties in the Book and Author classes, such as the types of Genres a book can fall under. The code snippets below

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

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