Web
A Space-Shooter Game on the Web with C#, WASM, and Uno Platform

Growing up as a 90s kid, I played many space shooter games, which gave me a profound love for arcade-style games. This prompted the idea of building my own game, only this time; I wanted my game to run on the web! The challenge was, how? This article shares some insights on my choice of framework and how I made a 2D space shooter game with C#, WebAssembly, and Uno Platform. To keep this article short, I can’t cover every detail of how I built this game so here’s the link to my GitHub repository if you wish to dig a little deeper: GitHub Repo Why Not Unity? We all know that these 2D games are easily made on Unity, but they aren’t responsive on the web. You get a WebGL player on your browser screen, a fixed-sized area where you can play the game. It can go Fullscreen, but that’s not genuinely responsive. Also, Unity WebGL content is not supported correctly on mobile devices. It may still work, especially on high-end devices, but many mobile devices are not powerful enough and don’t have enough memory to support Unity WebGL content well. It’s excellent for native game development but maybe

August 17, 2022
Beautify your Apps with Lottie for Uno Platform

While having animations in our apps is always a treat, implementing them without a hiccup can sometimes be challenging. Thankfully, Lottie enables us to very easily include beautiful and performant vector animations in our cross-platform apps. Even better yet, since Lottie animations are exported as JSON files, file sizes remain small and your animations can easily be resized, looped, and even interacted with without losing quality. Let us go ahead and see how we can implement Lottie animations into our Uno Platform applications, whether you’re targeting iOS, Android, macOS, Linux, or even WebAssembly! Prerequisites and Packages On all Uno Platform targets, you’ll need the following package: Uno.WinUI.Lottie (for the LottieVisualSource). You can find the package by: right-clicking on the project > Manage NuGet Packages > Search Uno.WinUI.Lottie On Windows/WinAppSDK, the support for Lottie is still pending. Implementing Lottie for Uno Platform Feel free to follow along in your preferred IDE or test out Lottie implementation in Uno Playground. Try it out in Uno Playground Step 1 First thing we’ll want to do is add our XML namespace to the mainpage. Step 2 – Update the source On WASM, iOS, and macOS, you can put the Lottie .json files directly in a

August 12, 2022
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

June 14, 2022
Implementing Chromecast with Uno Platform Applications

If you’re building a video or audio application with Uno Platform, you can easily include Chromecast Support. In this article, using a simple XAML design with TextBox, Button, TextBlock and Listview we walk through the steps to cast a simple app to communicate with. Before we get started, there are a few initial steps to be taken. Prerequisits For this tutorial, we are using Uno Platform on a Mac, but you can follow the instructions on Windows as well. If you are new to Uno Platform please setup Uno Platform on your machine first: Windows https://platform.uno/docs/articles/get-started-vs.html VS Code https://platform.uno/docs/articles/get-started-vscode.html Mac https://platform.uno/docs/articles/get-started-vsmac.html To create Uno Platform projects using the command line, you also need to install the templates by following these instructions here: dotnet new templates for Uno Platform. Chromecast Chromecast allows streaming videos in the background with remote devices (TV, Google mini). Before a Cast session can begin, both the sender device (for example, a mobile phone or tablet) and the receiver device (for example, a Chromecast plugged into a TV) must be connected to the same Wi-Fi network. For more info, please refer to the below URL. GoogleCast Basics Limitation: Chromecast does not support local media files. Create New

May 18, 2022
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

May 10, 2022
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 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 Uno

May 3, 2022
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 +=

April 26, 2022
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

April 12, 2022
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

March 31, 2022

Uno Platform
215 rue St-Jacques, Suite 500
Montréal QC, H2Y 1M6

1-888-926-1276
info@platform.uno

Resources

Developers

Target Platform

Extending & Porting

Tools & Resources

Support

Knowledge

Help

Follow Us

Terms of Use          Privacy Policy