Web

Hosting Native Controls – Moving from Xamarin Forms Renderers to Uno Platform Controls

Share on twitter Share on linkedin Share on reddit In this blog post we will look at a common technique in Xamarin Forms to customise native platform controls and how we can achieve the equivalent result using Uno Platform. You can follow along with the source code for both the Xamarin Forms and Uno Platform projects used in this blog. What are Renderers? First let’s look at what a custom renderer is and why you might use one. Xamarin Forms provides a hierarchy of UI controls which can be created in code or XAML. The framework contains controls for all the common controls on each supported platform even though the functionality varies from iOS, Android, and other operating systems. Therefore, each control contains firstly the cross-platform control code, which defines the dependency properties, methods and events which form the public API for the control. Additionally, there is a renderer required for each native platform. The job of the renderer is to map the native API to the public Xamarin Forms API and handle drawing and appearance so that the control behaves correctly in the Xamarin Forms layout system. The amount of work a renderer must do depends on how closely the native control

Uno.Resizetizer for Automated Image Resizing in Cross-Platform .NET Apps

Share on twitter Share on linkedin Share on reddit You’ve likely experienced the tedious and time-consuming process of scaling and resizing source images to fit the multitude of resolutions required for each platform while ensuring that each version is placed in the correct folder. It can become especially challenging when dealing with cross-platform development. https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2023/05/10115159/resize.mp4 Drawing inspiration from ResizetizerNT developed by Redth for Xamarin.Forms (now shipped with .NET MAUI), Uno.Resizetizer automates image handling across all target platforms, including WebAssembly (WASM) and SKIA. With the Uno Resizetizer, you can easily process multiple image sizes and resolutions with a single asset located in one place. This eliminates the need to worry about handling different image sizes and directories, freeing up your time to focus on developing the core functionalities of your application. In this blog post, we’ll guide you through using Uno.Resizetizer to effortlessly handle images, icons, and splash screens for your mobile, web, and desktop applications. How Uno Resizetizer Works In simple terms, Uno.Resizetizer is a tool that generates PNG images of the required size and resolution for each platform based on an SVG asset you provide. It uses a simple naming convention to automatically generate different versions of your images at different resolutions and

Add Neumorphism Look to your Mobile .NET apps with C# and XAML

Share on twitter Share on linkedin Share on reddit Today we’re diving into the application of the Neumorphism design style for our Uno Platform project using XAML and C#. Leo Cazes‘ put together a comprehensive tutorial as he guides you through each step to accomplish the Neumorphism look and feel for a door lock application. Additionally, we will be implementing a simple animation that slides the “lock” up and down. Our aim is to create a single XAML codebase in Uno Platform that can be used on both web and mobile devices, ensuring a consistent visual experience and a similar design across all platforms. You can follow along with the sample code here. Neumorphism and Uno Platform This style is characterized by displaying a rich visual aspect, which tries to show objects on the screen the way we see certain objects in our reality. Just looking at the keys on a keyboard is enough to notice that this style tries to represent the same thing and, through lights and shadows “trick” our brain into perceiving depth on a screen that only has 2 dimensions. The style then tries to make the objects look like they are coming out of the

10 Days of Game Development with Uno Platform, WebAssembly, and C#

Share on twitter Share on linkedin Share on reddit A few months ago, we highlighted an unconventional use of Uno Platform, in which Asadullah Refat created a 2D Space Shooter game. With the release of Uno Platform 4.7, he chose to leverage its advancements to rebuild his 2D game engine from the ground up. In a series of 10 LinkedIn posts, he shared his experience in developing a cross-platform 2D game, harnessing the capabilities of the Uno Platform, WebAssembly, and C#. We stitched his series together that covers topics from creating a 2D game engine and implementing keyframe animations to developing responsive game design and optimizing performance using AOT compilation. In addition, he shows us how he tackles challenges such as creating custom audio solutions, implementing post-processing effects, and using object containers for improved rendering.  Honk Buster Repo Day 1: Recreating a 2D Game Engine with Uno Platform 4.7 Uno Platform 4.7 features an updated solution structure, including a class library project, simplifying asset and font management while reducing build times. The game engine comprises three primary classes: Scene, Construct, and Generator. Scene: Used to add and animate game elements or Constructs. Construct: A 2D game element with two main

The Power of Uno Platform WebAssembly and AWS Amplify for Web App Development

Share on twitter Share on linkedin Share on reddit David Onoh recently shared a comprehensive, step-by-step tutorial on deploying a WebAssembly port of an Uno Platform application to AWS Amplify. In this recap blog, we aim to highlight the key aspects of his tutorial and emphasize the benefits of using Uno Platform for web app development and the advantages of hosting these WebAssembly applications on AWS Amplify. The process covers creating a .NET 7 Uno Platform project on a local machine using Visual Studio Code, hosting it on a GitLab repository, and configuring Amplify to publish the WebAssembly version with CI/CD tools. This tutorial is compatible with Windows 11, Ubuntu 22.04 LTS, and macOS 13.0 “Ventura.” Uno Platform offers several benefits for web app development: Cross-platform compatibility: Develop applications that run natively on Windows, iOS, Android, WebAssembly, macOS, and Linux with a single codebase, saving time and resources. Familiar development environment: Utilize existing C# and XAML knowledge to create powerful web applications without learning new languages or frameworks. Open-source and community-driven: Leverage the continuously growing community of Uno Platform developers and extensive resources to help troubleshoot and enhance your projects. Hosting Uno Platform WebAssembly applications on AWS Amplify provides additional advantages:

Safari 16.4 Support for WebAssembly fixed-width SIMD. How to use it with C#

Share on twitter Share on linkedin Share on reddit This article covers: What is WebAssembly’s fixed-width SIDM. Creating an Uno Platform WebAssembly project with code using the Vector128 type. Adjusting the project file to ahead-of-time (AOT) compile and include SIMD support. Fixing a publishing error if you accidentally checked the AOT compile option in the Publish dialog. WebAssembly has a feature called fixed-width SIMD that takes advantage of hardware instructions to speed up calculations by running them in parallel. Chrome and Firefox added support for the feature back in 2021, which was good, but many devices couldn’t leverage the performance improvements without Safari’s support. That all changed on March 27th, 2023, because Safari 16.4 was released, and now all modern browsers support WebAssembly fixed-width SIMD! Fixed-Width SIMD (Single Instruction, Multiple data) is a type of parallel processing that takes advantage of an architecture’s SIMD instructions to perform the same operation on multiple data points simultaneously. Because there are multiple types of SIMD, the WebAssembly Community Group decided that it would be best to start with fixed-width 128-bit operations because they’re available across most modern architectures and are proven to be performant. More details on the proposal can be found here if you’re

How To Create A New Solution Using Uno Platform’s App Template From Visual Studio

Share on twitter Share on linkedin Share on reddit We recently announced our 4.8 release and in it, the new startup experience. The release was jam-packed with new features, and we wanted to highlight the new project creation experience in a dedicated blog because it is so crucial to our project.   https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2023/03/21161532/Template-studi.mp4 Why Make the Change in Visual Studio New Project Creation? If you’ve followed Uno Platform, you’ll have noticed it’s evolved beyond a simple UI framework into a full-fledged productivity platform for .NET developers, which expands beyond UI. In addition to UI capabilities, Uno Platform offers an extensive range of extensions, theming libraries, and add-on tooling for VS Code and Figma. However, with our rapid release cycle of 6-8 times per year, it can be difficult for developers to keep up with new tooling and optimize their workflow. So we wanted to change that. The technology stack we unify and build upon, including .NET, Visual Studio, and WinUI/WinAppSDK, has undergone rapid change, making it challenging for end developers to navigate and assemble all the necessary pieces with the correct versions. In response to feedback from our roadmap survey, we’re thrilled to announce the new Solution Template Wizard for

Optimizing Uno Platform WebAssembly Applications for Peak Performance

Share on twitter Share on linkedin Share on reddit In this article, we will be discussing various tips and best practices for maximizing the performance of your Uno Platform WebAssembly applications, including ways to reduce startup times, improve rendering, and optimize memory usage. Whether you’re a seasoned developer or new to the Uno Platform, this article will provide valuable insights and techniques to help you create fast and efficient applications. A natural question to ask is – “Why aren’t these options available by default?”. Fair question! The defaults we have set are there to optimize your ‘inner dev loop’ productivity. Once the Web app is deployed you can get significant performance improvements just by toggling a few options. So, let’s dive in and start optimizing! Steps to Optimize Performance Make sure to build using the Release configuration dotnet build -c Release on the command line in your CI pipeline). Debug configuration disables a lot of performance optimizations. This is the prime spot where we’ve prioritizet the “inner, developer, loop”. Just changing this option will get you 2x improvements or more, depending on the scenario. Upgrade to the latest Uno.Wasm.Bootstrap packages (7.0.17 as of writing of this blog) to benefit from

Creating Elegant Reports in WebAssembly Apps with DevExpress Reporting and Uno Platform

Share on twitter Share on linkedin Share on reddit Good engineers integrate when and where it makes sense regardless of the territory being charted. Great engineers and community members explore that uncharted territory and map it out for others.  This is what one of our clients and contributors – Kahua – faced when facing a business challenge. They solved it and shared some tips on how to go about it for anyone who walks the same path.   The Challenge Kahua needed to create a large number of dashboards and reports across platforms and devices on top of the Uno Platform powered Web Application and soon mobile and desktop applications.  On the technical side, this meant connecting two advanced and complex frameworks with an enterprise application and bringing forward what all three entities do the best.  DevExpress is a widely used powerful reporting framework which is highly configurable and works cross-platform.   Uno Platform provides multi-platform support for applications built with C# and XAML. Kahua is an enterprise application which provides complex configuration, user-defined applications and runs on .NET.   Uno Platform and DevExpress are using .NET and JavaScript to provide their functionality beside other technologies. Meanwhile, Kahua is utilizing .NET