Mobile
Replicating a Dating App UI with .NET, Uno Platform and Figma

Share on twitter Share on linkedin Share on reddit If you want to streamline your workflow, improving the design-to-code process can help you focus on the code behind and get you to production quicker without compromising the beauty of your UI. Uno Platform and Figma are the perfect combinations to achieve a beautiful and pixel-perfect app while improving efficiency. In this tutorial, we’ll guide you through using Uno Platform for Figma to create a dating app UI, covering various sections and components of a UI. By the end, you’ll have the skills to design a stunning UI for your Uno Platform apps and seamlessly export it into Visual Studio. Lets jump in! Understanding Auto Layouts With Auto Layouts, you can effortlessly arrange and organize components within frames, allowing them to automatically adjust their positions, sizes, and spacing as needed. In addition, by utilizing constraints and alignment options, you can create dynamic designs that seamlessly adapt to varying screen sizes and content changes. This feature streamlines building cohesive and scalable UIs, enhancing design consistency and productivity within Figma. How to Create an Auto Layout in Figma We’ll frequently use Auto Layouts in our design. To ensure you can easily follow along,

May 31, 2023
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

May 25, 2023
Replicating a Mobile Travel UI in .NET with Uno Platform

Share on twitter Share on linkedin Share on reddit Welcome👋 ! In this article, I will guide you through the process of developing a travel user interface using Uno Platform XAML. This type of XAML is fully aligned with the one used in WinUI and UWP apps making it highly beneficial for those with knowledge of XAML for Xamarin.Forms/MAUI or WPF. You can follow along with the sample app source code here. To ensure clarity, we will divide this article into different sub-topics, including: Breaking Down the Visual Structure of the UI: When it comes to creating a user interface, “Where do I start?” is one of the most common questions. My recommendation is to divide your user interface into subparts so that you fully understand how to build each one. For this example, I will define a visual UI structure to replicate, which will be divided into blocks. Subsequently, these blocks will allow us to develop each one of them as they are organized in the visual structure for a better understanding of each step carried out. Code explanation: We will see step by step each one of the components obtained from the breakdown, and we will learn how

May 23, 2023
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

May 12, 2023
Announcing .NET mobile Debugging in VS Code. Mobile development in VS Code with Uno Platform or .NET MAUI.

Share on twitter Share on linkedin Share on reddit Last year we announced the preview of the Uno Platform extension for Visual Studio Code. With the initial preview, you could develop WebAssembly applications using C# & XAML, including all the goodness of XAML & C# Hot Reload and IntelliSense-like autocompletion. Today we are adding mobile targets to our VS Code Extension, including the ability for mobile debugging. Just like in a fully-fledged IDE like Visual Studio, you can now set breakpoints, exceptions, conditional breakpoints, logpoints and variables in your code or 3rd party code using SourceLink and sources embedded inside PDB. The best part – the mobile debugging story works for both Uno Platform and .NET MAUI mobile targets! You can go ahead and download the extension now or dig deeper into the features below. https://youtu.be/5Zb2O7mtVxQ Develop in the environment of your choice. Remote connect to others Whether you prefer working from Windows, macOS or Linux, you can use VS Code to develop .NET-based Uno Platform applications. Want to build for specific targets not available from your OS? Use VS Code to connect to a remote instance of VS Code. For example, this allows you to use Linux or to debug

May 2, 2023
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

May 1, 2023
Migrating Animations from Xamarin Forms to Uno Platform

Share on twitter Share on linkedin Share on reddit Animations are crucial in making any user interface more engaging and dynamic, regardless of complexity. This article will delve into the process of migrating animations from Xamarin Forms to Uno Platform This article will delve into the process of migrating animations from Xamarin Forms to Uno Platform, a question we get asked reasonably frequently, so we are documenting it for ease of access. Furthermore, we’ll look at simpler and more complex animations such as the ones below, highlight the differences between the two platforms, and provide the necessary steps to make the process seamless and practical. By the end of this article, you’ll better understand how to create animations that work seamlessly across multiple platforms. Getting Animated Even the simplest animations can help bring your user interface to life. Xamarin Forms uses a set of extension methods provided by the ViewExtensions class to animate a common set of UI element properties. Under the hood, these are powered by the Animation class, which allows you to define custom animations on other properties. This uses callback functions which define the property change itself. The Animation is created with an easing function and will

April 25, 2023
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

March 27, 2023
Migrating a Custom-Drawn Xamarin Forms Control to Uno Platform

Share on twitter Share on linkedin Share on reddit In a previous blog post, we explored porting a Xamarin Forms control which was made up of standard XAML elements over to Uno Platform. This time we will investigate a custom-drawn control and provide source code for it. While there are many ways to custom-drawn controls, the main implementation you will come across on a multi-platform Xamarin Forms control is SkiaSharp. SkiaSharp is a cross-platform .NET API based on the Skia 2D graphics library. Skia was created by Google but is available on all mainstream platforms and so you can create drawing code which works across devices regardless of their specific implementation. SkiaSharp therefore runs across all .NET mobile and desktop platforms. When building a custom control for Xamarin Forms you can use the SKCanvasView. This provides a View which contains the OnPaintSurface method which you implement in your derived class to draw to the screen. The method arguments contain to the SKSurface which represents the raw surface you can draw to. The SKCanvasView handles resizing and will call your OnPaintSurface method to redraw as required. Your code will consider the size of the surface as you should expect this to

March 15, 2023

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