DEV Community: Uno Platform

UWP, WinUI and Uno Platform get Prism support thanks to Uno team OSS Contribution

Uno Platform — Mon, 27 Apr 2020 15:19:38 +0000

We are pleased to announce that Uno Platform team has provided the initial support for the Prism library.

Background

The Prism Library was initially created by Microsoft’s Patterns and Practices team in 2008 and had grown into a mature set of guidance that allows developers to use proven patterns and development practices to create XAML based applications. In 2015, as Microsoft forged more into the world of open source, the Prism library was taken over by community champions and has been evolved since. Currently the initiative is led by Brian Lagunas and Dan Siegel, both Microsoft MVPs.

Fast forward to 2020

One of the most requested improvements to Prism has been support for UWP (and future WinUI) with hundreds of conversations on the topic were had on twitter, email and forums. However, this was a behemoth task for the sole two main maintainers of the library. As Uno Platform has been championing UWP/WinUI on a mission to take WinUI cross-platform to iOS, Android, WebAssembly and macOS, our team stepped up to the plate and created the initial support. Uno Team is committed to providing ongoing support to the library.

A bit about implementation

With this contribution, the Prism supported XAML frameworks grow from supporting WPF and Xamarin.Forms to also include UWP/WinUI and Uno Platform. WPF and WinUI are very similar APIs that share lots of similar class names, albeit being in different namespaces. The bulk of the change is about retargeting WPF-specific sources over to UWP, while providing a very similar feature set. The rest of the changes are end-to-end testing applications using Uno.UI Test to validate iOS, Android and WebAssembly behavior during community Pull Requests.

While the contribution itself involved changes to over 140 files and 5600 line changes, the architectural approach taken made it a lot easier than what the relative size of the code contribution is. In addition, an amazing work by Brian and Dan on restructuring the repo to prep the Prism repo to accept a contribution of this size made all this possible.

Next steps:

We hope you will take advantage of Prism in your future Uno and WinUI built apps.

To create an application easily, install the dotnet new preview templates for the Uno Platform:



dotnet new -i Uno.ProjectTemplates.Dotnet::2.3.0-dev.33

Then once installed, type the following:



dotnet new unoapp-prism -u MyPrismApp

This will create a solution that you can open in Visual Studio and take advantage of Prism.

For more information about Prism, visit the documentation site, as well as the samples repository for WPF while we work on adding samples for UWP.

About Uno Platform

For those new to Uno Platform – it enables for creation of single-source C# and XAML apps which run natively on iOS and Android, macOS and Web via WebAssembly. (or #WinUIEverywhere). Uno Platform is Open Source (Apache 2.0) and available on GitHub. To learn more about Uno Platform, see how it works, or create a small sample app.

Jerome Laban, on behalf of Uno Platform team

The post UWP, WinUI and Uno Platform get Prism support thanks to Uno team OSS Contribution appeared first on Uno Platform.

Announcing Uno Platform 2.2 – Windows Community Toolkit support, Performance Improvements and more

Uno Platform — Tue, 21 Apr 2020 18:35:22 +0000

The Uno 2.2 release is packed with new features, performance improvements and bug fixes, even if it’s closely following the 2.1 release! In addition to expanding our support for Windows Community Toolkit (WCT) today we are also shipping additional 70 smaller features and performance improvements.

If you are following our GitHub repo (hint – you should star it – many more features coming), you may have noticed we are also hard at work on adding support for macOS apps (Thanks @MartinZikmund), and while we still do not have anything to announce, it’s taking shape! The #WinUIEverywhere vision is closer by the day!

About Uno Platform

For those new to Uno Platform – it enables for creation of single-source C# and XAML apps which run natively on iOS and Android, and Web via WebAssembly. Uno Platform is Open Source (Apache 2.0) and available on GitHub. To learn more about Uno Platform, see how it works, or create a small sample app.

Among the implemented features in this release, you’ll find:

Support for MenuFlyout, UIElement.ContextFlyout
Support for MenuBar from WinUI 2
Support for ScrollBar
Add support for dotnet new unoapp, Visual Studio Code for WebAssembly and macOS templates
Support for Electron hosted apps
ImageSource.SetSourceAsync support for WebAssembly (Thanks @SuperJMN)
Support for ColorAnimation
Support for Pedometer for iOS and Android (Thanks @martinzikmund)
Suppport for mouse wheel events (PointerWheelChanged) on WebAssembly
Support for DropDownButton from WinUI 2 (Thanks @martinzikmund)
Many performance and memory updates impacting all platforms at various levels, such as giving an estimated 20% performance improvement on controls creation on WebAssembly. A more detailed post with benchmarks will follow soon on that topic.
Support for ms-appdata paths in Image, MediaPlayer (Thanks @martinzikmund)

Uno Platform is now built using C# 8.0 and Visual Studio 16.5 on Azure DevOps hosted agents, which means that AndroidX and Android 10 support is close by.

And finally, many of the recent updates were targeted at improving the behavior of controls in the Windows Community Toolkit, with enabling DataGrid, TabView and Expander controls. On the topic of the DataGrid, there’s still lots of work to be done, particularly around performance under WebAssembly, but this release updates now make the control usable. Look for a blog post tomorrow digging into more details on DataGrid. If you are keen on digging into the DataGrid right away, try this sample code for DataGrid, TabView and Expander after upgrading to Uno Platform 2.2.

Next Steps

For a more extensive change log, visit the GitHub releases page. If you are new to Uno Platform, you should go through our Getting Started tutorial. And if you are already using Uno please update your packages to 2.2 via your Visual Studio NuGet package manager!

Jerome Laban, on behalf of Uno Platform team

The post Announcing Uno Platform 2.2 – Windows Community Toolkit support, Performance Improvements and more appeared first on Uno Platform.

Free Developer-friendly high-res backgrounds for Microsoft Teams

Uno Platform — Thu, 16 Apr 2020 18:44:51 +0000

Last week Microsoft released custom background feature for Microsoft Teams. This was a feature long reserved for Microsoft employees only, likely for testing usage. The Great news is – custom background feature is now available to everyone, and our design team at Uno Platform took some time to create developer-friendly, high resolution custom backgrounds with flags over 30 of your favorite technologies, programming languages and tools you use. There are three different designs to choose from – enjoy!

About Uno Platform

For those new to Uno Platform – it enables for creation of single-source C# and XAML apps which run natively on iOS and Android, and Web via WebAssembly. Uno Platform is Open Source (Apache 2.0) and available on GitHub. To learn more about Uno Platform, see how it works, or create a small sample app.

Just right-click and save images below to:



%APPDATA%\Microsoft\Teams\Backgrounds\Uploads

Here is how they look, we had them hand-drawn for the following technologies: Uno Platform & WinUI (of course), Uno Platform, WinUI, Visual Studio, Windows, GitHub, Xamarin, Blazor, .net, .NET Foundation, Android, iOS, WebAssembly, Azure, Microsoft MVP, C++, C#, F#, JavaScript, HTML, Python, Java, Ruby, React, Angular, Vue, PHP, Slack, Docker, Flutter.

If there is something missing, drop us a tweet at @UnoPlatform and we may be able to create one for you.

Uno Platform & WinUI

Uno Platform

WinUI

Visual Studio

Windows

GitHub

Xamarin

Blazor

.NET

.NET Foundation

Android

iOS

WebAssembly

Azure

MVP

c++

C

F

JavaScript

HTML

Python

Java

Ruby

React

Angular

Vue

PHP

Slack

Docker

Flutter

About Uno Platform

For those new to Uno Platform – it enables for creation of single-source C# and XAML apps which run natively on iOS and Android, and Web via WebAssembly. Uno Platform is Open Source (Apache 2.0) and available on GitHub. To learn more about Uno Platform, see how it works, or create a small sample app.

Special thanks to our amazing designer team – Jessica, Mark and Xavier for doing these so quickly

Uno Platform Team

The post Free Developer-friendly high-res backgrounds for Microsoft Teams appeared first on Uno Platform.

Uno Platform 2.1 available now – x:Bind, TwoPaneView and more

Uno Platform — Tue, 07 Apr 2020 12:45:48 +0000

Uno Platform 2.1 release is packed with over 50 new features allowing for increased productivity as well as getting you up and running with Surface Duo. In addition to bigger milestones such as x:Bind, the TwoPaneView and NumberBox controls we also shipped another 50 new features and closed 45 issues you raised. Without further ado:

x:Bind functions

Uno has been supporting some form of x:Bind markup for properties, binding to functions were a big ask from users of Uno, as it allows for invoking methods from code behind very easily.

Two of the largest use of x:Bind functions is to reduce the use of converters, and the use of static properties. Another use of the x:Bind is familiar to WPF developers, where binding to multiple properties is also available.

You’ll find below some examples of the x:Bind feature.

Member Function, to make a string upper case:



<TextBlock Text="{x:Bind MyProperty.ToUpper()}" />

Static type fields or properties OneTime binding:



<TextBlock Text="{x:Bind local:StaticType.PropertyIntValue}" />

OneWay local member function with multiple observable parameters:



<TextBlock Text="{x:Bind Multiply(slider1.Value, slider2.Value), Mode=OneWay}" />

Literal boolean parameters:



<TextBlock Text="{x:Bind BoolFunc(x:False)}" />

Literal numeric value:



<TextBlock Text="{x:Bind Add(InstanceProperty, 42.42)}" />

Use of system functions such as:



<TextBlock Text="{x:Bind sys:String.Format('Formatted {0}', MyProperty), Mode=OneWay}" />

Which also works with multi parameters formatting:



<TextBlock Text="{x:Bind sys:String.Format(x:Null, 'slider1: {0}, slider2:{1}', slider1.Value, slider2.Value), Mode=OneWay}" />

Or DateTime parsing:



<CalendarDatePicker Date="{x:Bind sys:DateTime.Parse(TextBlock1.Text)}" />

Uno also supports two-way BindBack:



<TextBlock Text="{x:Bind sys:String.Format('{0}', MyInteger), BindBack=BindBackMyInteger, Mode=TwoWay}" />

where this method is available in the control:



public void BindBackMyInteger(string text){ MyInteger = int.Parse(text);}

The Uno docs site provides a more detailed documentation on this feature.

Surface Duo and WinUI TwoPaneView

The WinUI 2.3 TwoPaneView is a Windows 10 specific control provides the ability to layout content in two panes. It behaves like a dual ContentControl, based on a set of parameters such as Pane length, tall and wide configuration modes and pane priorities to display content based on the available window space.

We have ported TwoPaneView so you are able to use it with Surface Duo. You can see much more about TwoPaneView at the blog dedicated to it.

WinUI 2.3 NumberBox

The NumberBox control is a very powerful control that the WinUI team created, which we ported it over to Uno. It supports lots of modes, with min and max values, steps, as well as the ability to enter quick expressions:

Other significant updates

You’ll find the complete list of changes in the release notes over on GitHub releases, as the support for Grid.ColumnSpacing and Grid.RowSpacing, multitouch pointers support, support for UIElement.RightTapped and Holding.

Thanks to Morten Nielsen, the support for templates tags in the Visual Studio 2019 wizard has been added, to make it easier to discover the templates:

Thank you to all our contributors for the hard work they’re putting into improving Uno !

Next Steps

We are already working on 2.2 release and we hope to ship it within next 45 days. In the meantime, if you find issues, please let us know by opening one here.

If you are new to the Uno Platform, you may want to run through the Getting Started tutorial. This will ensure you have the correct environment set up and that you have the latest release of Uno. If you have already worked with Uno, you may want to update your Uno package via your Visual Studio NuGet package manager.

Jerome Laban, on behalf of Uno Platform team

The post Uno Platform 2.1 available now – x:Bind, TwoPaneView and more appeared first on Uno Platform.

Uno Platform on Channel 9 Visual Studio Toolbox – 3 episodes

Uno Platform — Wed, 11 Mar 2020 15:27:42 +0000

We are proud to have been featured on Channel 9 VS Toolbox show with Robert Green. In case you missed it, here is a quick summary. For all new to Uno, this is a great way to get to know it – straight from Uno CTO – Jerome Laban, as well as one of the key Uno community contributors – Martin Zikmund. Enjoy!

In Uno Platform – Behind the Scenes episode, Robert is joined by Jerome Laban, CTO of the Uno Platform. Back in December, we showed you how you can use Uno to build mobile, desktop and Web Assembly apps using C# and XAML. Jerome provides a behind the scenes look and how (and why) the Uno Platform was created, the decision to open source it and how it is maintained. He gives more insight into how it actually works and shows some new features that have been added since the previous episodes – items like WebAssembly Ahead of Time compilation (AOT), XAML Hot Reload, Uno Platform rendering options (pixel-perfect custom approach, or native approach) and a hint at upcoming MacOS support.

In Uno Platform Part 1 episode, Robert is joined by Martin Zikmund, one of the key community contributors to Uno Platform who introduces us to the Uno Platform. Martin shows how you can take a UWP / WinUI app and compile it to run not only on Windows 10, but also on mobile devices and the Web with Uno Platform.

In Uno Platform Part 2 episode, Robert is again joined by Martin Zikmund, who continues exploring the Uno Platform. Last week, Martin introduced us to Uno. This week, he shows a number of interesting demos, including Uno Calculator, which is based on the open sourced Windows 10 Calculator, and Hot Reload working in the browser! Also, he shows how you can use 3^rd party controls from Syncfusion to add Charts to your Uno apps. He also explains more about what is going on under the covers when you run an app built with Uno.

If you are new to the Uno Platform, you may want to run through the Getting Started tutorial. This will ensure you have the correct environment set up and that you have the latest release of Uno. Of course, we will be blogging more about AOT, Uno Platform and .NET / Visual Studio – so please stay tuned to our blogs and subscribe to Uno Platform blog RSS

The post Uno Platform on Channel 9 Visual Studio Toolbox – 3 episodes appeared first on Uno Platform.

Build .NET AOT for WebAssembly in Visual Studio with Uno Platform

Uno Platform — Thu, 06 Feb 2020 16:55:44 +0000

It’s been a long-time request: Build Uno Platform WebAssembly apps in Visual Studio on Windows using Ahead of Time (AOT) compilation.

Good news, it’s now available in preview in Uno dev branch! The Uno.Wasm.Bootstrap package 1.1-dev.416 package now provides the ability to create AOT, Mixed (AOT+Interpreter) and Interpreter (with Bitcode dependencies) builds on Windows 10, without leaving Visual Studio 2019. To our knowledge, Uno is the first one to provide this kind of functionality. If we are not – please let us know in the comments below; maybe we missed something.

This new Uno feature makes transparent use of the Windows Subsystem for Linux (WSL) to create the final binaries. You’ll only need to setup your WSL environment once using a simple script, and don’t worry if you forget to set it up, the bootstrapper will explain what to do.

Quick Start – Uno, Visual Studio, WASM, AOT

Make sure WSL with Ubuntu 18.04 is installed
Install the latest Uno Visual Studio templates
Create a new Uno Cross Platform app project
Update the Uno.Wasm.Bootstrap and Uno.Wasm.Bootstrap.Cli nuget packages to 1.1-dev.416 or later, using the Nuget Package manager (There’s no need to update other packages)
In the Wasm project, add the following line in the first PropertyGroup : ```

InterpreterAndAOT

6. Build once, you’ll get a message with a bash command to execute. (This [script](https://github.com/unoplatform/Uno.Wasm.Bootstrap/blob/master/src/Uno.Wasm.Bootstrap/build/scripts/dotnet-setup.sh), for reference).
7. Open a **Windows Command line** or **PowerShell** and paste the command there. It may take a few minutes as it installs Mono and .NET Core
8. Build again. At this step, the build will install the required Emscripten version in the “obj” folder of your application. This may also take a few more minutes.
9. Run the application without the debugger and you’ll get an AOT enabled build of your app





# Two important notes on using AOT compilation:

- Generating an AOT app always takes some time, which is why this is not enabled by default. You may need to enable is like this:

InterpreterAndAOT


This will enable AOT for release builds only and use the interpreter otherwise.

- You may adjust the AOT process by balancing the use of the interpreter and AOT compiled code by using the [MonoRuntimeMixModeExcludedAssembly](https://github.com/unoplatform/Uno.Wasm.Bootstrap#mixed-aotinterpreter-mode) Build time, package size , and runtime performance can be tuned balanced by adding or removing assemblies for the AOT generation.

## More Technical Details



The dynamic linking feature (referencing a “.wasm” file, through P/Invoke in mono) was intended to be used for development purposes on Windows only as it gives decent build times.

This requirement is caused by the inability of the mono-wasm SDK to run on natively on Windows to do static linking (referencing an LLVM “.bc” bitcode file). This prevented developers using Visual Studio on Windows to build applications that make use of either AOT or that reference those libraries.

The deciding factor for enabling Windows support is the inability to use dynamic linking (the ability to reference “.wasm” files, through P/Invoke in mono) properly since the LLVM backend has been enabled in emscripten (1.39.1 and later). A chain of issues has made this process fragile and very difficult to work with. This also prevented the use of libraries such as libSkia or SQLite.

Windows 10 provides support for WSL, and [a while back we provided some steps](https://platform.uno/blog/how-to-build-webassembly-c-apps-with-the-mono-aot-and-windows-subsystem-for-linux/) to build using AOT, but it still was an out of band manual process. Now with the updated bootstrapper, this process is transparent, given that you’ve setup your environment with the [provided scripts](https://github.com/unoplatform/Uno.Wasm.Bootstrap/blob/master/src/Uno.Wasm.Bootstrap/build/scripts/dotnet-setup.sh).

This update also gives the ability to add some additional emscripten parameters, such as enabling back IDFBS which was disabled by the mono for some default size constraints. It also adds the ability to include other native libraries that may be referenced by external code, such as libtpng or libfreetype.

You can head over to the [documentation for additional information](https://github.com/unoplatform/Uno.Wasm.Bootstrap#static-linking).



# **In Closing**

Features above are available in Uno ‘dev’ branch, which will eventually be merged into the ‘master’ branch. It is meant to those of you who are very eager to get started with it.

If you are new to the Uno Platform, you may want to run through the [Getting Started tutorial](https://platform.uno/docs/articles/getting-started-tutorial-1.html). This will ensure you have the correct environment set up and that you have the latest release of Uno.  Of course, we will be blogging more about AOT, Uno Platform and .NET / Visual Studio – so please stay tuned to our blogs and subscribe to [Uno Platform blog RSS](https://feeds.feedburner.com/UnoPlatform-blog)





The post [Build .NET AOT for WebAssembly in Visual Studio with Uno Platform](https://platform.uno/blog/build-net-aot-for-webassembly-in-visual-studio-with-uno-platform/) appeared first on [Uno Platform](https://platform.uno).

Surface Duo – WinUI TwoPaneView implementation via Uno Platform

Uno Platform — Mon, 03 Feb 2020 16:24:18 +0000

With the release of the preview SDK and emulator for the Surface Duo, it is now possible to experiment with the support for dual screen devices.

Uno Platform is in the position to be able to use the controls from WinUI (Our #WinUIEverywhere vision), and Microsoft is making development in the open for such devices in the form of the TwoPaneView control which allows us to experiment with it early and often.

What is TwoPaneView Control

The WinUI TwoPaneView is a Windows 10 specific control provides the ability to layout content in two panes and behaves like a dual ContentControl, based on a set of parameters such as Pane length, tall and wide configuration modes and pane priorities to display content based on the available window space. It can be useful when dealing with orientation changes, in windowed modes, or snap/split screen scenarios.

This control had been available for a while in the Windows Community toolkit and has since been transferred over to WinUI. It is now being augmented to benefit from the multi-screen cues from the hardware with the hinge position when the application is spanning on multiple screens.

TwoPaneView Control, Uno Platform and Surface Duo

In cross platform scenario, the ability to react to real estate changes is increasingly important, as more two screened and foldable devices are appearing, and the TwoPaneView can address some of the responsive aspects of the UI.

In the same way we’ve been working recently, by porting the C++ controls of WinUI to C#, the inclusion of the TwoPaneView control in Uno is straightforward.

One aspect of that control is its reliance on an upcoming Windows API named ApplicationView.GetSpanningRects(). This API provides the available screen rectangles inside the overall screen (in blue below), removing the parts of the screen occluded by the device’s hinge. The Android SDK, on the contrary, contains an API that provides the occluded parts of the screen (in orange below).

Uno is translating the hinge occlusion area into available areas in the implementation of GetSpanningRects(). An interesting piece of the Android API is that it provides screen-relative occlusion rectangles, whereas the GetSpanningRects() needs to be app-window-relative. This needs to be considered in “Tall” mode where the Android status (in green below) bar can be opaque or translucent.

Here they are, side by side: Windows 10 and Surface Duo emulator, using the test UI Microsoft uses when developing WinUI:

The TwoPaneView will be available as part of the next stable release of the Uno Platform, and the support for the Surface Duo Device will be enabled automatically when adding the Uno.UI.DualScreen nuget package. As this control evolves as part of WinUI as well as in Uno, your Uno-built apps today will be compatible with both Surface Neo and Duo devices when those will arrive on the market. To follow Uno’s development you should ‘star’ it on GitHub.

In Closing

Also, note that we have run the control on Windows 10 which is not to be confused with Windows 10X the future Surface Neo operating system. The idea of this blog is to show Uno’s cross-platform capabilities, on our quest for putting #WinUIEverywhere. Of course, as soon as emulators for Windows 10X are available we will be testing it – so stay tuned to our blogs and subscribe to Uno Platform blog RSS

Jerome Laban, CTO – Uno Platform & Microsoft MVP

The post Surface Duo – WinUI TwoPaneView implementation via Uno Platform appeared first on Uno Platform.

Hot Restart available in Uno Platform

Uno Platform — Fri, 24 Jan 2020 16:30:59 +0000

With the release of Visual Studio 16.5 Preview 2, Microsoft and the Xamarin.iOS team released a preview of the Hot Restart feature.

This provides a way for Xamarin developers to create and debug Xamarin.iOS applications using a physical device using only a Windows machine, where a mac used to be required. This make the developer loop a lot shorter when deploying on a device.

As a reminder, Uno Platform relies on Xamarin ‘classic’ (see architecture diagram and how Uno works) to deliver your UWP/WinUI apps to mobile – iOS and Android. Therefore, any advancement in Xamarin.Android or Xamarin.iOS can be easily inherited by Uno as well.

With some simple modifications, it’s possible to develop an Uno Platform app on iOS, using both Xamarin.iOS hot restart and Uno Platform XAML Hot Reload .

To use this feature in your app, all you’ll need is to modify your main.cs file in the iOS project head to look like the following:



public class Application{ // This is the main entry point of the application.  static void Main(string[] args)  {  // if you want to use a different Application Delegate class from "AppDelegate"  // you can specify it here.  UIApplication.Main(args, null, typeof(App));  } }  #if DEBUG public class HotRestartDelegate : Xamarin.Forms.Platform.iOS.FormsApplicationDelegate {  public override bool FinishedLaunching(UIApplication uiApplication, NSDictionary launchOptions)  {  Windows.UI.Xaml.Application.Start(\_ => new App());  return base.FinishedLaunching(uiApplication, launchOptions);  } } #endif

You’ll also need to install the Xamarin.Forms nuget package for the added class to run properly. Head to the Microsoft docs on Xamarin Hot Restart to get started!

In Closing

The post Hot Restart available in Uno Platform appeared first on Uno Platform.

Blazor Mobile, Uno Platform, and WebAssembly – piling up the tech

Uno Platform — Thu, 16 Jan 2020 18:58:36 +0000

On Tuesday, the ever-impressive Blazor team announced a new experimental project: Mobile Bindings that allow developers to write Blazor-style syntax that produces Xamarin.Forms UI controls instead of HTML elements, therefore producing native iOS and Android applications.

When we at the Uno Platform noticed that they were using Xamarin.Forms, we immediately saw a fun means to validate and stress-test our Xamarin.Forms renderers for WebAssembly, in order to bring Blazor Native to WebAssembly. Also, a few of you asked about it on Twitter, so we gave it a shot.

Introducing the Blazor-Xamarin.Forms-UWP-Uno-WebAssembly uber-stack! In less than 24hrs we were able to port the ToDo App to WebAssembly:

1. Blazor to Xamarin.Forms

This is the part that the Blazor team announced on Tuesday. Essentially taking a UI defined in Razor syntax (a mix of markup and C# code), processing it, and converting it into a tree of Xamarin.Forms controls.

2. Xamarin.Forms to UWP

Although the Blazor team’s announcement highlighted the ability to produce mobile apps for iOS and Android, Xamarin.Forms also supports Windows as a compilation target, using the UWP framework. The Blazor X.Forms Bindings work perfectly well with UWP.

In this step, Xamarin.Forms converts its visual tree to a tree of UWP view elements.

3. UWP (or WinUI) to Uno Platform

Here’s where Uno comes in. The Uno Platform allows you to build apps for iOS, Android, and the web using C# and XAML. It’s 100% compatible with UWP/WinUI. Uno’s Xamarin.Forms renderers for WebAssembly allows Xamarin.Forms apps to run in the browser, without any changes.

4. Uno to WebAssembly

In the last step, Uno takes the visual tree and produces native HTML, running natively in the browser using Mono’s runtime for WebAssembly.

See it in action

To test whether this would work, we used the TodoApp sample released along with the Blazor Mobile Bindings announcement. Check** out the ***fully-functioning web version here*. All the code we used is up on GitHub – download it and run it in Visual Studio at your leisure!

Our version is using the exact same Razor components as the original sample, and as you can see it looks very like the Android/iOS version published on ASP.NET Blogs for mobile blazor bindings. There you have it side by side – Blazor mobile bindings running in browser with help from Uno and WebAssembly

Public service announcement

Let’s make one thing clear. We’re not advising you to run out and use this in production – after all if you like Blazor syntax and you’re targeting the web, the original Blazor has you covered.

Our motivation was to put our Xamarin.Forms renderer for WebAssembly work to the test, and as far as we are concerned, Uno passed it with flying colors. It just works. We were able to stack all this technology, and reuse the code from the showcased ToDo app in less than a few hours after Mobile Blazor Bindings were announced at the ‘.NET Conf – Focus on Blazor’ virtual conference. We believe this showcases Uno’s versatility and extensibility too.

In Closing

We’re serious about this part : if you’re already a Xamarin.Forms developer, and running your existing app on the web without having to rewrite the UI is something that interests you, go ahead and try out Uno’s Xamarin.Forms renderers for WebAssembly – adding WebAssembly support to an existing project is as easy as ‘dotnet new wasmxfhead’. Or if you’d like to ask any questions and chat about this tech mash-up – contact us.

The post Blazor Mobile, Uno Platform, and WebAssembly – piling up the tech appeared first on Uno Platform.

Uno Platform 2.0 RELOADED – General Availability, Hot Reload and more!

Uno Platform — Thu, 02 Jan 2020 18:06:48 +0000

In September 2019 at our inaugural UnoConf, we had released the preview of Uno Platform 2.0. Today we are announcing general availability of Uno Platform 2.0 which includes not only the features announced at UnoConf, but also many others.

One of the 2.0 release highlights is the fully functional XAML Hot Reload which works across Web (via WebAssembly), Android and iOS. Maybe best of all, you can do it ALL AT ONCE across all those platforms.

This first blog post in Uno Platform 2.0 Reloaded series will give a lot of detail about XAML Hot Reload as well as the rest of the release. In addition, over the next few days we will drip-feed dedicated blogs for a few other release highlights. That said, if you’d like to jump to the bulleted list of all new features, bug fixes and known issues, you can see it at our GitHub.

We are very proud of 2.0 release. Not only are we releasing a handful of major improvements, but we have also introduced over 70 smaller functionality improvements and we have closed over 80 bugs reported by community. Most importantly, over the past few months we saw massive contributions by the community, especially during Hacktoberfest. As of today we are humbled to have a very active contributor community of over 130 contributors! THANK YOU ALL for helping us make #WinUIEverywhere.

With that said, let’s look at what is in the release and also spend a lot more time on XAML Hot Reload.

What is XAML Hot Reload Anyway?

Simply put, XAML Hot Reload with Uno Platform and Visual Studio gives you the ability to design your app’s UI while the app is running, without the need to re-build your project. Here it is in action. For this example, we are using Uno Platform sample app UADO (Universal Azure DevOps Organizer). Note the simultaneous UI changes on both the web client as well as the native application running on iOS (/Android).

How does it Work Behind the Scenes?

The architecture of the Uno XAML Hot Reload is built on two parts: The RC Server side (Remote Control Server), and the RC Client side (Remote Control Client).

The developer side is .NET Core app that sits in between Visual Studio (or VS Code in the future) and the application.

The app side is a WebSockets client which connects back to the RC server, after having been provided with the addresses of the server through the Visual Studio addin. The choice of WebSockets is communication channel that works on iOS, Android and WebAssembly without restrictions, particularly around CORS and browsers.

Once the application has started, and the connection to the RC server has been established, every modification made one of the XAML files that the app uses, the new content is sent back the app. Every location where that file is being loaded in the app is being replaced by a new instance of that new XAML, showing you the new content. This means that reloading a UserControl does not reload the whole page that contains that control, make it the whole process faster!

There are some limitations to the current implementation:

The code of a Page or UserControl constructor is not executed on reload
Events in code-behind are not reassigned
Standalone ResourceDictionary files cannot be updated

Code modifications are not reloaded, only XAML files are.

A more comprehensive list of known issues and limitations can be found here.

Next Steps

If you’d like to try Hot Reload yourself, but with a smaller app you can try our QuickStart app. Try these simple steps:

Import Uno QuickStart solution from our repo – https://github.com/unoplatform/Uno.QuickStart and verify it runs on your machine
Build and run the WebAssembly app without the debugger. Keep it running.
Build and run the iOS app without the debugger. Keep it running.
Steps to make changes
1. Go to file MainPage.xaml and change the Text attribute content
2. Save the file
3. Observe that both iOS and WebAssembly got updated

If you need more information please consult XAML Hot Reload docs, including the list of known issues. Stay tuned for more blog posts in Uno Platform 2.0 Reloaded series.

Jerome Laban, on behalf of of complete Uno Platform team

CTO, Uno Platform. Microsoft MVP. https://twitter.com/jlaban

The post Uno Platform 2.0 RELOADED – General Availability, Hot Reload and more! appeared first on Uno Platform.

Cybertruck in XAML and running Cross-Platform with WebAssembly

Uno Platform — Tue, 03 Dec 2019 15:41:16 +0000

It simply had to be done – Cybertruck in XAML. See for yourself, and further customize the Cybertruck if you’d like, in our WebAssembly implementation of Cybertruck.

Cybertruck XAML

Go ahead, have a swing at its windows with your mouse! Shout out goes to Lynn Fisher whose tweet inspired us to recreate Cybertruck in XAML. Of course we had to add a lil’ Uno logo there on the door.

What is Uno Platform Anyway?

Before getting into the details of Cybertruck in XAML. The Uno Platform enables C# and XAML based code to run on iOS, Android, and WebAssembly. To avoid having to learn the UI-layout techniques and approaches for each platform, the Uno Platform mimics the Windows XAML approach of defining UI and layouts. The Uno Platform does this by providing full API definitions of the Universal Windows Platform and implementations of parts of the API – such as Windows.UI.XAML. Uno Platform is Open Source (Apache 2.0) and available on GitHub. As fans of XAML, and Tesla, it made sense we have some fun with Cybertruck.

How did we do it?

Everything was done in XAML and we mainly used simple controls for the entire content (Grid, Border, Path and a ViewBox to be able to resize the content for all aspect ratios).

For the colors, we used solid ones or LinearGradientBrushes (Horizontal, Vertical or Diagonal).

In terms of animations, we simply used DoubleAnimations, changing the Opacity for the lights or using aRotateTransform for the wheels.

We created every part of the car using vector graphics software in order to create an SVG file, you can use your favorite software package for that part (eg Inkscape, Adobe Illustrator, PaintShop Pro, …).

You will then be able to extract the needed data in the generated SVG file, and use them in the different Path controls inside the content.

How can you customize it?

Having the CyberTruck in action running WebAssembly is pretty cool, but be able to customize it is also fun – https://playground.platform.uno/#cybertruck.

It’s really easy to play around and change the values, here are two examples:

For example, change the CyberTruck color.



BEFORE
<!--MAIN BODY --> <Path Data="M 457.97791,2.8127639 227.25276,82.520113 822.32143,42.553571 Z"> <Path.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFA7A7A7" Offset="0.0" /> <GradientStop Color="#FFDDDDDD" Offset="0.8" /> <GradientStop Color="#FFA7A7A7" Offset="1.0" /> </LinearGradientBrush> </Path.Fill></Path> 

AFTER
<!--MAIN BODY --> <Path Data="M 457.97791,2.8127639 227.25276,82.520113 822.32143,42.553571 Z"       **Fill**** =" ****DeepSkyBlue****"** />

Cybertruck Blue XAML

Or, to make the wheels spin in different direction.



BEFORE
<DoubleAnimation From="0" To="-360" Duration="0:0:0.5" RepeatBehavior="Forever" Storyboard.TargetName="TeslaLeftWheel" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" />

AFTER 
<DoubleAnimation From="0"** To="360"** Duration="0:0:0.5" RepeatBehavior="Forever" Storyboard.TargetName="TeslaLeftWheel" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" />

Cybertruck on iOS, Android and Windows

If you’d like to see Cybertruck run cross-platform or iOS, Android and Deslkop too, the code is available for you to compile from Cybertruck – Uno Platform GitHub. Here are a few emulator screen captures.

Cybertruck iOS Cross Platform

Cybertruck Android Tablet Cross Platform

Cybertruck UWP / WinUI

Next Steps

If you want to keep improving this XAML mock–up of the CyberTruck, the code is available at Uno Platform GitHub and we will happily accept contributions.

We’d of course appreciate if you give Uno Platform a try. We have a complete step-by-step tutorial available on GitHub. Or, if you’d prefer something more comprehensive, a full day workshop is also on GitHub.

The post Cybertruck in XAML and running Cross-Platform with WebAssembly appeared first on Uno Platform.

Uno Community Events are Booming this November-December

Uno Platform — Wed, 06 Nov 2019 19:41:47 +0000

The Uno Platform community has been creating quite a buzz as of late. With Microsoft’s recent shout out to Uno and a slew of community events popping up in November and December, Uno Platform is making headlines and introducing user groups to the platform one announcement at a time.

Things that keep us going. Uno community events in November:

– London 🇬🇧

– Orlando 🇺🇸

– Boston 🇺🇸

– Westerville 🇺🇸

– Scottsdale 🇺🇸

– Laval 🇨🇦

– Madrid 🇪🇸

– Malaga 🇪🇸

– Noida 🇮🇳

THANK YOU.#WinUIEverywhere

— Uno Platform #msignite (@unoplatform) November 6, 2019

If you are interested in learning about Uno Platform, check out the events listed below to find one closest to you!

London, GB, UK

Speaker: Matt Lacey and Jay Kannan

Description: Discussing Xamarin/.NET development with an introduction to the Uno Platform!

Date & Time: Wednesday, December 4 – 6:00 pm, 7:30 pm respectively

See the event

Orlando, FL, USA

Speaker: Jerome Laban, CTO of Uno Platform

Description: Developing cross-platform apps for Windows, iOS, Android and WebAssembly can be a complex process, especially when it comes to the user interface. Each platform has its own ways of defining dynamic layouts, with some being more efficient, some more verbose, some more elegant, and some more performant than others.

Luckily, the open-source Uno Platform removes many complexities and enables developers to reuse their existing XAML and C# skills, resulting in a gain of overall productivity when creating UI-rich and data-driven applications. Come learn what the Uno Platform is all about.

Date & Time: Wednesday, November 6 – 6:45 pm

See the event

Burlington, MA, USA

Speaker: Kenzie Whalen

Description: Uno is a new platform that allows developers to write a single codebase and deploy to iOS, Android, UWP, and Web Assembly. In this talk we will go over how Uno works, getting started with your first Uno application, and the future of the Uno Platform.

Date & Time: Saturday, November 23 – 10:15 am

See the event

Westerville, OH, USA

Speaker: Steve Bilogan

Description: “Introduction to Uno”. Learn how the Uno Platform and how it was recently used to bring the official Microsoft UWP Calculator app to the web!

Date & Time: Tuesday, November 5 – 6:30 pm

See the event

Scottsdale, AZ, USA

Speaker: Andres Pineda

Description: An introduction to the Uno Platform from guest speaker, Andres Pineda.

Date & Time: TBD

See the event

Laval, QC, Canada

Speaker: Marie-Christine Leclerc and Alexandre Beauchamp

Description: Developed by nventive in Montreal, Uno is the only platform that allows to develop native applications for mobile, desktop and WebAssembly with C # and XAML from a single code base. It is open source and supported by professionals. In this presentation you will be introduced to Uno Platform and its characteristics.

Join us for this great opportunity to learn about new technologies in a relaxed atmosphere and around a good beer!

Date & Time: Wednesday, November 20 – 6:00 pm

See the event

Madrid, Spain

Speaker: Paulo Vila and Jose Manuel Nieto

Description: In this talk we will introduce Uno Platform. You will discover the revolutionary way to create multi-platform applications and websites in a simpler, more productive and powerful way. We will explain its fundamentals, motivations and its relationship with the UWP (Universal Windows Platform), detailing each of the parts that make up Uno Platform. We will finish with a small hands-on Lab and a technical demo.

Date & Time: Thursday, November 7 – 7:00 pm

See the event

Malaga, Spain

Speaker: Elena Guzman

Description: In this talk we will introduce Uno Platform. You will discover the revolutionary way to create multi-platform applications and websites in a simpler, more productive and powerful way. We will explain its fundamentals, motivations and its relationship with the UWP (Universal Windows Platform), detailing each of the parts that make up Uno Platform. We will finish with a small hands-on Lab and a technical demo.

Date & Time: Friday, November 29 – 10:00 am

See the event

Noida, India

Speaker: Ravi Kumar

Description: Join us as we present our contributions to this year’s Hacktoberfest! We will talk about UNO & some other awesome projects that our meetup members have contributed to. Do not miss out on the chance to learn new frameworks & win some cool SWAG.

Date & Time: Saturday, November 9 – 11:15 am

See the event

If you would like to hold an Uno Platform event in your group/area, check out our Community page and let’s chat!

The post Uno Community Events are Booming this November-December appeared first on Uno Platform.