Lagos, Nigeria
info@ezefidelity.com

Build Cross-Platform applications with WinUI and Uno Platform


 is a free and open-source platform aiming to take WinUI applications built with C# and XAML everywhere 

If you are not familiar with WinUI, it is the native UX platform for building Windows applications – you can learn more about it on the WinUI website. With Uno Platform you can bring your WinUI applications everywhere that WinUI does not natively run – Web/WebAssembly, Linux, macOS, iOS, and Android. Uno Platform is Open Source (Apache 2.0) and available on GitHub. 

This tutorial will walk through both your Visual Studio environment for WinUI and Uno Platform development as well as  which uses WinUI InfoBar control and runs on Windows, WebAssembly and Android. of this 5-minute tutorial your sample application will look like this in both “light” and “dark” modes: 

Prerequisites

If you have not prepared your dev environment for Uno Platform app development yet, the Setting up the Environment page in the Uno Platform docs  guide you through installing all the prerequisites. 

Tutorial: WinUI InfoBar running Cross-Platform 

  1. Open Visual Studio and click on Create new project.
  2. Search for the Uno templates, select the Cross-Platform App (Uno Platform) then click Next.
  3. Name your app UnoLovesWinUI then click Next. 
  4. Once the solution loads, expand the Platforms folder in Solution Explorer and right-click on the UWP project. From there, select Manage NuGet Packages…
  5. Go to ‘Browse’, search for `Microsoft.UI.Xaml` and install the latest stable version. 

The steps above are used when using WinUI 2.5 and UWP. When using WinUI 3, make sure WinUI 3, Preview 4 or later is installed and then do the following: 

Once the project has been created, let’s add some controls and business logic:  

6. In Solution Explorer, open the Shared project, and navigate to App.xamlHere, if not already present, we need to add the WinUI resources inside the Application element: 

<Application.Resources> 

    <XamlControlsResources xmlns=”using:Microsoft.UI.Xaml.Controls” /> 

</Application.Resources> 

7. Open MainPage.xaml and add the following attribute to the Page element: 

xmlns:winui=”using:Microsoft.UI.Xaml.Controls 

8. Now we can start adding WinUI controls to our page! Replace the Grid with the following in order to include the WinUI InfoBar and NumberBox controls: 

  <StackPanel  

        Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}” 

        Padding=”12″  

        Spacing=”8″> 

        <winui:NumberBox  

            x:Name=”InputNumberBox”  

            SpinButtonPlacementMode=”Inline” 

            Value=”0″ /> 

        <winui:InfoBar  

            Title=”Hello, #WinUIEverywhere!”  

            Message=”{x:Bind InputNumberBox.Value, Mode=OneWay}”  

            IsOpen=”True” /> 

    </StackPanel> 

9. Select UnoLovesWinUI.UWP as the Startup Project, select the x86 platform, then Run 
Note: To change the startup project from the Solution Explorer, right-click the desired project and choose “Set as Startup Project” from the context-sensitive menu that is displayed. You can also choose this menu item from the Project menu. 

So far so good – you have been in your favorite and familiar environment. So far, this is all pure Windows development. Now is the time to see the Uno Platform magic and run the same application on Web (WebAssembly) and Android.  

10. Right-click the .Wasmproject and chose “Set as the Startup Project in Visual Studio Solution Explorer and then rightclick Run

The result:  

As you can see, your WinUI app is now running in a Web browser! The sample app above uses the WinUI InfoBar and NumberBox controls. It is really that easy to get your WinUI code running in the browser. 

Tip: Try to switch your browser between the light and dark theme – you should see the application automatically switches theme too! 

11. Now let’s see the app running on Android! UnoLovesWinUI.Android as the Startup Project and Run 

Just by changing the target platform, your WinUI app is now running on Android! The sample app above also simply uses the WinUI InfoBar and NumberBox controlsOnce again, it really is that easy to get your WinUI app running on Android and other mobile operating systems. 

Here is the final application, running on Windows, Web and Android! 


Next Steps 

You have just created a cross-platform application running on Windows, Android and WebAssembly with WinUI and Uno Platform. If you are interested in running the very same application on additional platforms Uno Platform supports, such as macOS, iOS or Linux, just make sure you have appropriate prerequisites installed.  

For any help with Uno Platform please visit Uno Platform team discord– www.platform.uno/discord  #uno-platform channel.  

 Uno Platform Team 



This post was written by Uno Platform team and was first posted to Windows Blog



Do you find this article helpful? Your Friend might too. So, please Share it with them using the Share button above.
Will you like to get notified when I post new updates? Then Follow me on any of my social media handles: Google News, Telegram, WhatsApp, Twitter, Facebook, Pinterest.
You can also drop your email address below if you wish to be notified by mail.


Tags: ,

%d bloggers like this: