XAML

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 working together can 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 who are unfamiliar with Figma, it is a free, browser-based design tool that makes the developer handoff process smooth and seamless by allowing developers to readily access the full 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 can be seen by a survey done by UX Tools. Even a quick Twitter poll we conducted in October 2021 showed Figma as one of the main design tool choices amongst developers. 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 for following reasons: Collaboration With Figma, multiple team members can work on

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

A Deep Dive Into Uno Extensions

Our Uno Platform 4.0 release brought with it a lot of updates and fixes to the platform but most importantly it also allowed us to unveil a series of productivity tooling and extensions that drastically help bring your app to market faster. One of those tools introduced was Uno Extensions, simply put, it allows you get started without having to write code from scratch, getting you to a fully functional project in minutes and saving you months of development time. Microsoft has extracted a host of capabilities outside of ASP.NET and made them available through Microsoft Extensions – covering hosting, logging, configuration, etc. In turn, Uno Platform Extensions are based on those Microsoft Extensions. To get a better understanding of Uno Extensions and how you can utilize them in your workflow, MVP and Uno Contributor Nick Randolph gave us a glimpse of Uno Extensions in action during his UnoConf 2021 session. Listen as he walks you through creating a host and registering services to more complex extensions like using the navigation extensions to navigate between pages views and the application. This session previews only a few of the available extensions but there are additional Uno extensions that we haven’t covered

Adaptive Styling, Layouts & Controls (Part 3)

References, Tools, Frameworks & Operating System used. Items Links Windows 10 or 11 Download Windows 10 (microsoft.com) Visual Studio 2019 or 2022 Visual Studio: IDE and Code Editor for Software Developers and Teams (microsoft.com) Uno Platform Project Template Uno Platform Solution Templates – Visual Studio Marketplace Mac OS macOS Monterey – New Features – Apple Uno Platform Documentation Uno Platform documentation UWP Documentation Windows Controls and patterns – Windows app development – Windows apps | Microsoft Docs In the previous articles of this series, I looked into data persistence, back up and restoration across devices using SQLite as a database on one drive as a backup and restoration facilitator. This article will be more UI focused. It will discuss ways you can visualize the invoice and client data using adaptive styling on UI elements and layouts. I’ll be addressing two key areas in UX development: 1. Styling 2. Layouts & Controls 1. STYLING This is a blueprint that defines design standards for a collection of UI elements and interactions. In the demo Uno Platform application, I made use of ThemeResource and Merged Dictionaries to create styles for individual UI elements, dark and light themes. In the Microsoft XAML space, ThemeResource

Syncing Local Database with OneDrive Personal (Part 2)

References, Tools, Frameworks & Operating System used. S/No Items Links 1. Windows 10 or 11 Download Windows 10 (microsoft.com) 2. Visual Studio 2019 or 2022 Visual Studio: IDE and Code Editor for Software Developers and Teams (microsoft.com) 3. Visual Studio Code Visual Studio: IDE and Code Editor for Software Developers and Teams (microsoft.com) 4. Uno Platform Project Template Uno Platform Solution Templates – Visual Studio Marketplace 5. Microsoft Graph .NET SDK NuGet Gallery | Microsoft.Graph 4.10.0 6. Microsoft Identity Client Package NNuGet Gallery | Microsoft.Identity.Client 4.38.0 7. Mac OS macOS Monterey – New Features – Apple 8. Azure Portal AAD App registrations App Reg- Microsoft Azure   The repo can be found in Uno.Samples : https://github.com/unoplatform/Uno.Samples/tree/master/UI/UnoSQLiteOneDriveInvoiceSample In part one of this series, I explained how to create a local data store using SQLite .NET and populating the database with fake data using Bogus.NET. In this article, I will be going through the steps need to securely sync the database created in the previous article with OneDrive using the Microsoft Graph’s Files.ReadWrite.AppFolder permission. The simplest way to make access OneDrive in an Uno Platform app is to use the Microsoft Graph.NET SDK and the Microsoft Identity .NET package. To use these

Uno Platform Learning Resources for Beginners

For those unfamiliar with Uno Platform, it allows C# and XAML developers to build single-codebase applications for Windows, WebAssembly, iOS, macOS, Android and Linux. To help new Uno Platform users get started, and those simply looking to improve their workflow, we gathered together a list of free and paid learning materials that in addition to our getting started tutorials (Tutorial 1, Tutorial 2) will have you creating multi platform applications in no time. FREE LEARNING MATERIALS: 1. Syncfusion Syncfusion who supports Uno Platform to two of its most popular UWP controls —DataGrid and Charts, published Uno Platform Succinctly. A free eBook that will take you from setting up your first Uno project in Visual Studio to a fully functioning single-page application. 2. Andrew Hoefling – Getting Started with Uno Platform Microsoft MVP Andrew Hoefling put together Uno Platform: Getting Started Series, a compilation of 8 great blogs covering the basics you need to get started with Uno Platform. • Uno Platform Getting Started with New Projects • Uno Platform View Stack Navigation • Uno Platform Tabbed Pages with the Command Bar • Platform Specific XAML in Uno Platform • Platform Specific C# in Uno Platform • MVVM and Dependency Injection in

How Uno Platform Ports Features from WinUI on Day 0

Microsoft WinUI library contains all the features necessary to create beautiful applications on modern Windows operating systems. Because Uno Platform has the same API surface, we’re able to take those same high fidelity UI components and bring them to Android, iOS, macOS, WebAssembly and Linux without changing any single line of code. Of course, WinUI is constantly evolving and our goal is to bring all the new features and controls to Uno Platform on day-0 when WinUI ships. How can we be so fast? In this session we show you how having the same API contracts makes this process very fast and straightforward. To demonstrate how the conversion works and maybe to inspire you to also port some WinUI controls to Uno Platform Martin takes you through the simple process using the WinUI TabView control as an example. In his demo, Martin breaks down the steps our engineers take to port features from WinUI while ensuring we don’t break the existing features and functionality as new features are added and controls are updated. Finally, after performing all the changes for all the C# files and converting all the C++ to C#, he shows how to run the control against Uno

Migrating WPF Applications to Web

Migrating from desktop-based applications to the Web with Uno Platform is reasonably straight forward. The important thing is to first perform your research, think about how your current application was built and look at your existing architecture so you can come up with a roadmap for moving forward. When thinking about migrating a codebase, there are three things to think about: • Maximizing the reuse of the code. • Refresh where it makes sense so you can exploit new capabilities. • Rewrite as little as possible. In this session recording from UnoConf 2021, Daren walks through migration concerns, key aspects of reuse, the importance of research and then look at key aspects of XAML compatibility on migrating your application over to the Uno Platform. The Uno Platform’s application API is compatible with the UWP API as well as WinUI 3 and it’s important to understand the capabilities of each of those platforms.   The key takeaway here is to understand what is supported before you dive in and start building. We hope Darren’s session gives you some general guidelines for starting WPF migration with Uno Platform. Consider it an insight to some of the capabilities that are available using WebAssembly