How-to

LiveCharts Announces Support for Uno Platform

Imagine combining LiveCharts2 (v2) the evolution of LiveCharts (v0) with the power of Uno Platform.  The ability to integrate beautiful, animated, automatically updated, cross-platform, object-oriented and easy-to-use charts opens a ton of possibilities for data visualization-driven applications! The LiveCharts team has been working hard at expanding support for Uno Platform and you can now integrate charts, maps, and gauges everywhere Uno Platform runs. LiveCharts2 for Uno Platform contains the following controls: Cartesian Chart Control Pie Chart Control Polar Chart Control Geo Map Control Chart Examples As of today, LiveCharts2 for Uno Platform is in a preview and is available to everyone via NuGet package for Uno. You can also visit the new website, which houses the library, and docs which are fully integrated with Uno Platform and the API explorer. Take it for a spin and see just how easy it is to get started using this brand-new suite of controls in your Uno Platform Applications LETS GET STARTED 1. Install Uno Platform Before getting started with Uno, ensure you have installed all the prerequisites, for Visual Studio you can get started here, you can find help on how to install the mentioned workloads here. 2. Create a new Uno Platform project Open visual

Adding Google Maps to your Uno Platform-WASM App

Google Maps is the leading location data and visualization platform for the web, but the functionality of Google Maps extends well beyond its mobile app — if you are building a mobile, web, or desktop app and want to include location displays in any way, Google Maps offers  developer APIs that give access to Google’s geographical data.  Google Maps API allows you to display and leverage interactive maps to help users create itineraries, routes, and more. Its data also refreshes in real-time, meaning that maps you create with Google API will always be up to date for visitors.  Recently, a new Uno Platform user was looking to implement Google Maps into his Uno Platform WASM application but was running into some blockers since MapControl does not provide WASM support yet. Luckily, you can integrate Uno-WASM Web Applications with existing JavaScript components and it’s quite simple.   In this article, Martin Zickmund works through a step-by-step guide on how you can easily implement Google Maps into your WASM application.    Get the Google Maps API key You can follow any tutorial available on the web like here on how to get an API key via the Google Developer Console. It involves creating a

Adding Uno.Extensions to a WinUI Multi-Platform Uno Application

This post will be the first in a series of posts talking about Uno.Extensions, a set of libraries that the Uno team have been working on to simplify common application scenarios and make it quicker and easier to build robust multi-platform applications using the Uno Platform. Follow Along with the Source Code Before we get started with the Uno.Extensions, we’re going to go ahead and create a new application to work with. However, I first want to unpick a topic that can be quite confusing for developers who aren’t familiar with the UWP/WinUI + Xamarin/Maui ecosystem, which is the different flavors of the Uno Platform. Until recently, there was one flavor of Uno, which was based on UWP and used the UWP/WinRT APIs as the basis for building applications for Xamarin.Android and Xamarin.iOS. However, Microsoft is making some substantial changes to the mobile ecosystem as part of the .NET Maui project. These include switching to SDK style projects, combining the various platforms into a single project and of course converging on .NET 6. Essentially this is a breaking change which will require most application code and libraries to be adapted (unless they were .netstandard 2.0 only). This led to the introduction of

Implementing Lazy Loading Functionality in Uno WebAssembly Applications

No matter the purpose of your application or website, performance is essential to a great user experience. Slow loading apps and webpages will turn users away almost immediately. Fortunately, Lazy Loading is a technique used to optimize load time by only loading required content at first, and loading any remaining page content once the user needs it.  In this article, Johnny guides us through the steps required to implement the Lazy Loading functionality for ListView and Gridview controls in Uno Platform WASM applications. Follow Along with the Demo Project Source Code Lazy Loading Lazy Loading or incremental loading is a strategy to delay the loading of objects until they are actually needed. This can help reducing resources used by the application and increase loading times for the item collection, because only parts of the data are loaded initially. ScrollView For my usecase the trigger for loading more items is a certain scrolling threshold in the ListView and GridView control. To get the current scroll position we need to somehow access the ScrollView within the ListViewBase which is the base class for ListView and GridView. We will use the VisualTreeHelper class to get information about nodes in the visual tree and get a reference to the inner ScrollView of the ListViewBase var myScrollView = ExtendedVisualTreeHelper.GetFirstDescendant(myGridView); myScrollView.ViewChanged +=

Theme-Aware Splash Screen in Uno Platform WebAssembly

We’re always keeping an ear out for feature requests, bugs, and issues raised by the community so we can continue to better improve Uno Platform. So when @TopperDEL brought up a great question about the possibility to use theme-aware splash screens on Uno Platform Discord channel, Martin Zikmund was quick to offer a solution. Splash Screen A “Splash Screen” is the first image or page displayed when you first load your application, while the application is initializing. The splash screen remains visible until the first page of the application is ready to display. Unlike iOS, Android and Windows, WebAssembly does not yet support theme respecting splash screens. For those interested, the PR can be seen here. And now, with the stable release of Uno.Wasm.Bootstrap 3.3.1 it can be used in all Uno Platforms apps literally with a single line change! Here’s How To Do ItOpen the AppManifest.js file in the WasmScripts folder of the WASM project in any Uno Platform app solution and either set the splashScreenColor to transparent or delete the property entirely: var UnoAppManifest = { splashScreenImage: “Assets/SplashScreen.png”, splashScreenColor: “transparent”, displayName: “Theme-aware splash screen” } And voilà! The splash screen will now match the theme of your OS or browser! Note: To achieve the same effect in UWP/WinAppSDK the exact same change is required in the

Tutorial – Building a Kanban Style Todo App (code included)

… What better way to start learning a new technology than with a tutorial that includes all the sample code? When you finish, or fork, the tutorial you will end up with an application like this: Steven Giesel recently published a 5-part series documenting his experience building a Kanban-style Todo-app using Uno Platform for the first time. Follow along as he takes you through Uno Platform set-up, his thoughts on the platform, and finally a hands-on demonstration of creating a Todo app Kanban-style that runs in your browser, desktop, or mobile! For those of you who are new to Uno Platform, or looking to start using the platform, it allows for building Mobile, Desktop, and WebAssembly apps with C# and XAML and there has never been a better time to get started. We’ve spent a significant portion of our recent releases (Uno Platform 4.0 and 4.1)  improving performance and features, and the tools now available to you to create amazing apps are paving new opportunities Part One – Introduction and Environment set up As a first-time user, Steven gets down to the basics of Uno Platform and covers the differences between the platform and .NET MAUI. With a basic understanding of the

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