Uno Platform https://platform.uno/ Multi-Platform Applications with C# and WinUI Wed, 22 Nov 2023 21:23:40 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 Migrating Page Navigation Apps from Xamarin Forms https://platform.uno/blog/migrating-page-navigation-apps-from-xamarin-forms/ Mon, 20 Nov 2023 20:36:20 +0000 https://platform.uno/?p=17211 🕓 8 MIN   Getting navigation architecture right is crucial for creating apps that work smoothly. This is especially true for frameworks like Xamarin.Forms, WPF, or UWP, which handle how users move around the app. In Xamarin.Forms, everything revolves around Pages – the screens or views of the app. Moving between these pages is a big part of […]

The post Migrating Page Navigation Apps from Xamarin Forms appeared first on Uno Platform.

]]>

Migrating Page Navigation Apps from Xamarin Forms

Getting navigation architecture right is crucial for creating apps that work smoothly. This is especially true for frameworks like Xamarin.Forms, WPF, or UWP, which handle how users move around the app.

In Xamarin.Forms, everything revolves around Pages – the screens or views of the app. Moving between these pages is a big part of how users interact with the app. There are different ways to structure this movement, like Master Detail, Tabbed, and Modal patterns, giving you flexibility in designing how your app looks and feels.

However, the road to a smooth app experience is not always straightforward. There are common issues like messing up the navigation stack, memory leaks, and dealing with async operations that can cause headaches. In this blog, we’re going to dive into the practical side of migrating page navigation in Xamarin.Forms apps. We’ll look at common issues you might face and, more importantly, how to solve them. Our goal is to help you ensure your app remains user-friendly while keeping up with the latest in .NET development.

Xamarin Forms offers multiple navigation architectures for apps. In this first blog in a series on navigation, we will look at page navigation and how to migrate your Xamarin Forms page navigation apps to Uno Platform. 

Feel free to follow along with the provided code sample or refer to it as we move through the article. 

Uno Cakes Sample

Navigation in Xamarin Forms

To support page navigation the application has a single NavigationPage and this provides the blank canvas in which to navigate to specific pages. The NavigationPage maintains a stack allowing navigation forwards to new pages by specifying a new instance of page type to navigate to. You can also programmatically navigate backwards in this stack or right to the beginning to return to your initial page. The methods are named with the terminology of a stack, so you call PopAsync to remove a page from the stack and return to the previous page, or PushAsync with an instance of the new page to be added to the stack and navigated to. There isn’t a mechanism to pass a parameter to the new page but since you must construct it yourself you can set properties on the new page before passing it to PushAsync. 

It is also possible to programmatically remove pages from the stack, for example when you have a page to perform a one-off operation like authentication that you don’t want to remain in the history. From the user’s perspective, they can request to navigate back using the shell back button (e.g. on Android) or presented in the header of the NavigationPage on other platforms e.g. iOS. Either way the intention is to present navigation in a way which is consistent with the device OS. Each page has a Navigation property which provides methods to programmatically navigate forwards or backwards in the parent NavigationPage – you don’t have to programmatically crawl through the tree to locate the hosting NavigationPage. When you want to navigate from a ViewModel you need a reference to the INavigation interface from the main NavigationPage. In this case you can register this with your IoC container, such as the DependencyService in Xamarin Forms, or a third-party library. 

The WinUI and Uno Platform Approach

There are similarities between the above approach and that used by Uno. That isn’t surprising as WinUI is based on UWP which itself continues many of the concepts introduced with WPF. 

Instead of a NavigationPage there is the Frame control which provides the equivalent navigation options and integration with hardware or shell back buttons. Individual pages are derived from the Page type and the Frame supports navigating between pages using the appropriate animations and maintaining a back-stack. Unlike Xamarin Forms, the stack supports forward navigation and maintains the forward navigation stack even when navigating backwards through it. If you navigate backwards and then navigate forwards to a new page this removes the previous forward stack. There isn’t any shell integration for moving forwards as this is not a navigation feature which appears on mobile devices. In practice, you are unlikely to need it and if migrating from Xamarin Forms you will not have to worry about it. 

To navigate from a Page there is a property called Frame which provides a reference to the containing frame. We use this instead of the Navigation property on Xamarin Forms. With a reference to the Frame you can call GoBack or Navigate to move backwards or forwards respectively.  

Hardware Buttons

Out of the box the Frame control is not hooked up to the hardware back button like the NavigationPage in Xamarin Forms. There are some platform differences here and a bit of conditional compilation can be used to apply the correct behaviour to each platform. This is encapsulated in the ConfigureNavigation method which is called from our App.cs after creating and activating the MainWindow. The method applies the correct behaviour across Windows, WebAssembly and Android. 

				
					        private void ConfigureNavigation() 
        { 
            var frame = (Frame)Microsoft.UI.Xaml.Window.Current.Content; 
            var manager = Windows.UI.Core.SystemNavigationManager.GetForCurrentView(); 


#if WINDOWS_UWP || __WASM__ 
    // Toggle the visibility of back button based on if the frame can navigate back. 
    // Setting it to visible has the follow effect on the platform: 
    // - uwp: add a `<-` back button on the title bar 
    // - wasm: add a dummy entry in the browser back stack 
    frame.Navigated += (s, e) => manager.AppViewBackButtonVisibility = frame.CanGoBack 
        ? Windows.UI.Core.AppViewBackButtonVisibility.Visible 
        : Windows.UI.Core.AppViewBackButtonVisibility.Collapsed; 
#endif 

#if WINDOWS_UWP || __ANDROID__ || __WASM__ 
    // On some platforms, the back navigation request needs to be hooked up to the back navigation of the Frame. 
    // These requests can come from: 
    // - uwp: title bar back button 
    // - droid: CommandBar back button, os back button/gesture 
    // - wasm: browser back button 
    manager.BackRequested += (s, e) => 
    { 
        if (frame.CanGoBack) 
        { 
            frame.GoBack(); 
 
            e.Handled = true; 
        } 
    }; 
#endif 
}

Navigation Bar

By default, the Frame control doesn’t give you any on-screen controls unlike the Xamarin Forms NavigationPage. Here you can add your own controls to navigate back if you want to completely customize the look. However, if you want to maintain the native platform look you can use the Uno.Toolkit.WinUI library which includes the NavigationBar control which you can add to each page. 

To use the control you need to add the Uno.Toolkit.WinUI package via NuGet, then import the default styles in your AppResources.xaml file. Then you can add the namespace in each page where you want to use the control, then add the NavigationBar to the top of the page.  

				
					xmlns:utu="using:Uno.Toolkit.UI" 

<utu:NavigationBar Grid.Row="0" MainCommandMode="Back" Content="Cakes" Foreground="White" Background="#3d9165">

Since Uno uses the native controls by default on mobile the NavigationBar you place in XAML is only used to specify the properties and the control is rendered outside of the page content docked to the top of the screen. If you used the page’s ToolbarItems in Xamarin Forms to add custom buttons to the navigation bar, you can add these commands to the Uno NavigationBar. The example above doesn’t specify any commands but ensures that by default the system back button will be presented on the left, so long as there is a page in the back stack. 

Page Specific Navigation

Unlike Xamarin Forms, when you navigate forwards you pass in the type of the required page, and it is created for you. In order to setup the page for specific data, e.g. a details page for a particular product, you can pass a parameter (an object of any type) as the optional second argument to Navigate. 

				
					_navigationService.Navigate(typeof(CakeDetails), 3);

In the receiving page you can override the OnNavigatedTo method and handle this value. 

				
					protected override void OnNavigatedTo(NavigationEventArgs e) 
{ 
    System.Diagnostics.Debug.WriteLine(e.Parameter); 

    base.OnNavigatedTo(e); 
}

Depending on the make up of your application this could be a ViewModel, or some other identifier or parameter used to load specific data for the page. 

Transition Animations in Xamarin Forms and WinUI

As well as switching between pages, each transition is normally accompanied by an animation to provide a smoother looking experience. In Xamarin Forms the NavigationPage allows you to turn off the animation with an optional Boolean parameter on both the Pop and Push operations. 

WinUI has multiple transitions which provide additional cues as to the nature of the navigation. Some of these are specific to other controls rather than the Frame – for example providing horizontal navigation with tabs. However, for page navigation with the Frame control the default is called EntranceTransitionInfo and it subtly slides the page up into position and fades it in on Windows. On other platforms the animations are consistent with the native animations – for example, on iOS pages slide in from the right. You can disable the animation by specifying a SuppressNavigationTransitionInfo in the call to Frame.Navigate.  

WinUI also supports the Drill In transition which is used to indicate a move from a collection to a details page. In the sample app we use this to differentiate the animation between the cake list page and the cake details page. To use this, we pass a DrillInNavigationTransitionInfo to the Navigate method. The animation gives the impression that you are moving into the data by performing a subtle zoom. When you navigate backwards it appears to zoom out to the wider collection. This can be used when navigating from pages with lists or grids. Again, whether this is used will depend on the target platform. 

By default, the frame performs the reverse transition defined for that page navigation when navigating backwards. This keeps the experience consistent for the user. However, you can override this by passing an optional NavigationTransitionInfo to the GoBack method. 

The way that these transitions are interpreted will vary depending on the platform. The goal is to create something which feels natural on each platform. 

Don’t Cross the Threads

As was the case with Xamarin Forms you must call all navigation methods on the UI thread. The Navigate method is passed a type and will create the required page instantiating all of the UI controls before handling the animations to transition to the new page. Any code which creates UI elements or interacts with the UI tree must be performed on the UI thread. In Xamarin this was done with the Dispatcher property of the Page: 

				
					Dispatcher.BeginInvokeOnMainThread(() => 
{ 
   // code here executes on ui thread 
});

For Uno Platform, the Frame has a DispatcherQueue property which is responsible for queuing work on the UI thread using the TryEnqueue method. For example, for our navigation service which can be called from a ViewModel we can wrap the GoBack calls like so: 

				
					public void GoBack() 
{ 
    if (_frame.DispatcherQueue.HasThreadAccess) 
        _frame.GoBack();
    else 
        _frame.DispatcherQueue.TryEnqueue(_frame.GoBack); 
}

Here we check if we are already running on the UI thread by checking the HasThreadAccess property. If so, we can simply execute the code, otherwise we call TryEnqueue to queue it up for the UI thread. TryEnqueue doesn’t wait for the code to finish executing it is handed over and control passes on and out of this method. 

The sample application includes a NavigationService which implements this approach so that you can call it from any thread, and it will take care of this for you. 

Modal Navigation

Xamarin Forms exposed a Modal navigation stack for pages which appear above the main navigation stack for one-off operations which block the normal flow of the app. You can use this for log-in screens or consenting to terms and conditions and other activities which are important. In Uno there isn’t a direct equivalent so there are two approaches.  

The first is to use one of the available modal controls like the MessageDialog or ContentDialog. The other approach is to use the normal navigation stack, but you can override the navigation behaviour. For one-off operations you can remove the page from the back stack so that it doesn’t appear again when navigating backwards. You can also override the system back button so you can block it if you need the user to perform an action before navigating away from the current page. 

In Summary

Uno Platform’s Frame/Page navigation follows a similar pattern to Xamarin Forms. You can, therefore, map the same functionality when migrating from Xamarin Forms to Uno Platform. There is some scope for additional features in Uno Platform, such as transition types and more control over manipulating the back stack. As with any cross-platform development, there will be some differences to provide a familiar experience on each device type. 

It’s worth noting that Uno.Extensions Navigation offers an enticing option that can enhance your overall navigation experience for those seeking a comprehensive navigation solution beyond the basics, including abstractions for ViewModel and XAML-based navigation.

Quick References

 

Xamarin Forms 

Uno / WinUI 

Navigate back to previous page 

await Navigation.PopAsync(); 

Frame.GoBack(); 

Navigate forward to a new page 

await Navigation.PushAsync(new NewPage()); 

Frame.Navigate(typeof(NewPage)); 

Navigate forward with parameter 

await Navigation.PushAsync(new NewPage(parameter)); 

Frame.Navigate(typeof(NewPage), parameter); 

Navigate without animation 

await Navigation.PopAsync(false); 

await Navigation.PushAsync(new NewPage(), false); 

Frame.GoBack(new SuppressNavigationTransitionInfo()); 

Frame.Navigate(typeof(NewPage), null, new SuppressNavigationTransitionInfo()); 

Remove from backstack 

Navigation.RemovePage(thePage); 

Frame.BackStack.RemoveAt(index); 

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 5.0 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started, guide is the best way to get started. (5 min to complete)

GET STARTED
Uno Platform

Uno Platform

Follow us on Twitter

Tags:

Related Posts

The post Migrating Page Navigation Apps from Xamarin Forms appeared first on Uno Platform.

]]> .NET Conf 2023 – .NET 8, Uno Platform 5.0 and prizes to be won https://platform.uno/blog/dotnetconf2023/ Wed, 08 Nov 2023 21:00:27 +0000 https://platform.uno/?p=17137 🕓 4 MIN Every year, the anticipation in our team grows as November approaches, and with it, the excitement of .NET Conf. This year is lining up to be another fantastic conference, filled with great speakers, sessions, and prizes. Most of all, we look forward to showing you our biggest and most anticipated release yet, Uno Platform 5.0. […]

The post .NET Conf 2023 – .NET 8, Uno Platform 5.0 and prizes to be won appeared first on Uno Platform.

]]>

.NET Conf 2023 – .NET 8, Uno Platform 5.0 and prizes to be won

Every year, the anticipation in our team grows as November approaches, and with it, the excitement of .NET Conf. This year is lining up to be another fantastic conference, filled with great speakers, sessions, and prizes. Most of all, we look forward to showing you our biggest and most anticipated release yet, Uno Platform 5.0.

Uno Platform 5.0: Elevate Your Cross-Platform .NET Development with .NET 8

Thursday, Nov 16th, 2023 – 5:00 pm EST

Imagine creating UI-rich, data-driven applications that run seamlessly wherever .NET sets its footprint. Whether you prefer XAML or C# Markup, Uno Platform 5.0 has you covered.

Join Francois Tanguay, CEO of Uno Platform, for a session all about the most significant advancements that come with Uno Platform 5.0 and .NET 8. He’ll explore the exciting realm of .NET MAUI Embedding, Model View Update eXtended (MVUX) reactive pattern, Figma integration, Hot Reload, and a whole lot more.

So, mark your calendars and don’t miss a first-hand look at how Uno Platform can boost your productivity in the dynamic .NET ecosystem.

Save to calendar

.NET Conf 2023 – Decoder Challenge

One of the more exciting aspects of .NET Conf is the various challenges and activities that keep the community engaged. Similar to last year’s secret decoder challenge, the .NET team has planned something special for this year, and we are glad to be taking part in it.

For an early look into what you’ll be facing in this year’s .NET Conf decoder challenge, visit the Uno Gallery – a collection of ready-to-use Fluent, Material and Cupertino code snippets to help speed up your multi-platform development. We’ve hidden one of the letters you need for the decoder challenge behind one of the Uno Platform gallery controls. Find the letter to get one piece of this year’s .NET Conf decoder challenge.

To participate:

  1. Head over to https://gallery.platform.uno/
  2. Uncover the letter you need for the challenge 
    HINT: add an additional inner shadow using the Blue Uno Platform Logo Color (#FF229DFC) by clicking “+Shadow” on the ShadowContainer control.

Now, it’s time to proceed to the next clue offered by the other sponsors until you collect all the letters. Once you’ve gathered all the letters and successfully decoded the word or phrase, visit the secret decoder challenge at DotNetConf. Complete the form with your answers to be eligible to win one of the 9 fantastic prizes generously provided by other sponsors.

Additional Sessions

Now, let’s dive into what we have in store for you at .NET Conf 2023.

This year, we’re hosting two additional sessions that will take you on a journey to discover Uno Platform and how it can elevate your cross-platform .NET development powered by .NET 8. The possibilities are endless, and we can’t wait to share them with you.

Wednesday, Nov 15th, 2023 – 8:00 pm EST

Best Practices for Cross-Platform .NET 8 Applications

Save to calendar
Thursday, Nov 16th, 2023 – 10:30 am EST

Mobile Application Development with C# only: Unifying Markup and Business Logic

Save to calendar
About Uno Platform
For those new to Uno Platform, it allows for creating pixel-perfect, single-source C# and XAML apps that run natively on Windows, iOS, Android, macOS, Linux, and Web via WebAssembly. It offers Figma integration for design-development handoff and a set of extensions to bootstrap your projects. Uno Platform is free, open-source (Apache 2.0), and available on GitHub.
Learn more about Uno Platform

.NET Conf Challenge Prizes

Speaking of prizes, there are multiple reasons for you to get involved. As part of the grand prize for the decoder challenge, Uno Platform is contributing a $500 Amazon gift card. We’re also offering enticing rewards, such as a $250 Amazon Gift card as part of CodeParty prize, as well as another one for the .NET Conf SWAG bags.

Get Started with Uno Platform 5.0

Why wait for .NET Conf to explore Uno Platform 5.0? Dive right in and experience the fantastic new features for cross-platform .NET development, including C# Markup, Figma to C# Markup, Hot Reload, and MVUX.

To begin, simply update your packages to the latest Uno Platform 5.0 release using your Visual Studio NuGet package manager. Then, kickstart your project by following our Wizard guide or utilize our new workshops to embark on your Uno Platform journey.

Get Started
Uno Platform

Uno Platform

Follow us on Twitter

Tags:

Related Posts

The post .NET Conf 2023 – .NET 8, Uno Platform 5.0 and prizes to be won appeared first on Uno Platform.

]]> Five is for 5X productivity. Announcing Uno Platform 5.0 https://platform.uno/blog/uno-platform-5-0/ Wed, 01 Nov 2023 20:42:27 +0000 https://platform.uno/?p=17020 🕓 10 MIN Today’s release is a significant step towards creating the most productive platform for building single codebase .NET applications that run on mobile, desktop, and web. Uno Platform 5.0 brings: C# Markup out of the box, which supports 1st party and 3rd party components and application-level libraries, mapping directly to the underlying object model. The first and […]

The post Five is for 5X productivity. Announcing Uno Platform 5.0 appeared first on Uno Platform.

]]>

Five is for 5X productivity. Announcing Uno Platform 5.0

Today’s release is a significant step towards creating the most productive platform for building single codebase .NET applications that run on mobile, desktop, and web.

Uno Platform 5.0 brings:

  1. C# Markup out of the box, which supports 1st party and 3rd party components and application-level libraries, mapping directly to the underlying object model.
  2. The first and only Figma to C# Markup export tool!  In addition to developing UI by hand using C# Markup, you can now generate C# Markup directly from Figma designs. Our partners report a 5x productivity increase using this feature alone compared to coding by hand.
  3. New and Improved Hot Reload.  We are very proud of the completeness of our Hot Reload. Whether you are working with XAML, C#, or C# Markup, be it in Visual Studio or VS Code on PC, Mac, or Linux, you can enjoy the exact same productivity benefits.
  4. Improved MVUX (Model-View-Update eXtended) – our implementation of the MVU pattern that allows you to get all the benefits of Reactive/Immutable/Declarative/Asynchronous state management while being fully testable and Hot Reload friendly.
  5. Two New Sample Apps with complete self-guided workshops to help you learn how to build cross-platform applications using Uno Platform, reducing your ramp-up time. 
Come see the launch of Uno Platform 5.0 at .NET Conf 2023
Uno Platform 5.0: Elevate Your Cross-Platform .NET Development with .NET 8 – Thursday, November 16, 2 – 2:30 PST.
Add to Calendar

Extensibility and modularity in mind

The productivity gain resulting from using all Uno Platform components – across UI, Figma, Extensions, and Toolkit is significantly bigger than the sum of its individual productivity boosts.  That said, Uno Platform is built with extensibility and modularity in mind so that you can bring in your own components, patterns, design systems, and more.  

“Thanks to Uno Platform, we were able to leverage the excellent set of developer tools that exists in .NET as well as our team skillset” “The primary attraction for us was the ability to develop rapidly and deploy applications cross-platform, reusing much of the existing business logic between frontend and backend.”
- Francisco Manuel Suárez Grueso, CTO at ADD Informática.

C# Markup for Cross-Platform .NET Apps

You asked; we delivered. A massive bit of feedback from the community has been the need to learn multiple languages to build an Uno Platform application. Now, you can build your entire application using a single language with C# Markup! 

C# Markup provides a fluent-style addition to C# that allows developers to declare the layout of their application. It’s not a new language, and there are no extra types to know to build applications C# Markup. You can use all the same UI elements you’d use to build any Uno Platform application. In fact, if you compare the equivalent XAML and C# Markup, you’ll see they’re almost the same. 

Creating your application using C# Markup, you get the benefits of a strongly typed API, in a similar way that x:Bind can provide in XAML. This means you’ll get intellisense and compile time validation of your code, like styles or converters – spot errors whilst you’re coding. 

C# Markup comes with support for the standard WinUI controls, as well as controls offered by Uno.Toolkit and Uno.Extensions, and you can write applications using either Fluent, or Material, design languages. You can even reference any control from third-party control libraries, by taking advantage of the C# Markup source generator – the vendor doesn’t have to do anything to support C# Markup! 

All the basics that you’d expect to work on are all packaged with C# Markup – Data Binding, Styles, Resources, Template and Visual States. Defining the layout in C# gives you options. You can use resources, converters and commands, but you can also just expose properties, methods and functions that can be called directly. 

C# Markup enables you to create app UI declaratively and still have a clean separation between UI and business logic.  Additionally, C# Markup provides you with this entire API as part of the same namespaces you’re already using for your controls. This means that whether you are using Uno Platform, WinUI or even generating C# Markup extensions for a 3rd party library, there are no special namespaces you need to add to use the Fluent API.

For our work on C# Markup, we have been inspired by the work of Vincent Hoogendoorn. Vincent is a pioneer in this space, enabling many .NET UI Frameworks, including Uno Platform, to have Flutter-like experiences to use C# for creating UIs. Vincent’s plugin continues to work with Uno Platform, and we remain in touch to continue to enable his work, all while offering a C# Markup option specifically suited for Uno Platform’s use case. 

Simple Calc Workshop
The best way to go about trying C# Markup is to follow our Simple Calc workshop.
Start Workshop

From Figma Designs to C# Markup with ONE Click

Today, we are releasing the industry-first Figma to C# Markup plugin, aiming to accelerate app development up to five times. It builds on the success of our existing Figma-to-XAML plugin, currently the most downloaded Design-to-XAML plugin in the Figma marketplace. This is our Preview 7 of the plugin, and we expect the RTM version to come very soon in the next release of this plugin.  

To accompany this release, we are releasing a complete, self-paced, free Figma to C# Markup workshop called Tube Player. 

Tube Player Workshop
Build a YouTube-like app in less than a day.
Start Workshop

New and Improved Hot Reload

Hot Reload lets you update code into a running app without rebuilding your solution. You can apply changes, fix bugs, create new UIs and add features. The best Hot Reload is the one you don’t notice exists at all! 

With Uno Platform’s Hot Reload, you can: 

  • Work in Visual Studio for Windows or VS Code on Windows/Linux/mac 
  • Use either XAML, C# Markup and C# 
  • Use all the newest supported C# code changes from .NET 8 
  • Get the state of your controls preserved 
  • Update code-behind, add new event handlers, update styles, resources, bindings, x:Bind expressions, DataTempate, Resource Dictionaries, etc… 
  • After the startup of the app, Hot Reload in less than a second 

Checkout our Hot Reload features and benefits document for a comprehensive list of what we bring to .NET developers. 

To showcase the power of Hot Reload, we recorded a video of building a complete calculator UI using only Hot Reload. 

To accompany this release, we are releasing a complete, self-paced, free workshop that takes extensive advantage of Hot Reload called “Simple Calc” which will get you to build a calculator app over your lunch break.   

Our Hot Reload implementation is different, and while we build on top of .NET and its toolchain, this allows for some unique differences. We’re taking advantage of the ability of Hot Reload to run C# source generators. This enables our XAML Hot Reload to provide the same features as an initial build. For example, this includes the ability to hot reload complex x:Bind expressions. 

Note that Hot Reload works fully on Windows, WebAssembly, and Skia-based Uno Platform heads. Until a known .NET 8 issue is fixed, iOS, Android, and Catalyst targets use a XamlReader-based hot reload for XAML only. We expect the fix to come with the first service pack for .NET 8, estimated to arrive in December timeframe.  

Improved MVUX (Model-View-Update eXtended)

The initial version of MVUX extension was published a couple of years ago. With this release we are enabling further integration with the rest of Uno Platform such as Hot Reload, C# Markup and Figma.  

Developers familiar with building XAML applications will be familiar with the MVVM pattern that capitalizes on the use of data binding. MVUX bridges the gap between the need to write reactive style applications, where code is immutable and asynchronous by default, and the need to connect to a declarative UI via data binding. 

In this release, MVUX has been improved to take advantage of the improvements made to Hot Reload. You can adjust both the Model and View (XAML or C# Markup) without having to restart the application. In C# Markup, you can use MVUX controls such as FeedView to declare the different states of your application. 

If you need more convincing about the power of MVUX, check out the entire code for the Model for the MainPage of the TubePlayer sample application. This features a state, SearchTerm, for capturing the search input text and a feed, VideoSearchResults, that exposes the search results. The feed reacts to changes in the SearchTerm to load the list of videos from YouTube. There’s a filter to ensure that there is a search term, and the feed is paginated, allowing the UI to progressively load page after page of videos matching the search criteria, as the user scrolls. All this in 10 lines of code! 

And the corresponding views, in both C# Markup and XAML 

C# Markup View
XAML View

Another key benefit of MVUX is all the code you don’t have to write: 

  • No Threading logic – MVUX is asynchronous by default, so you don’t need to worry about what thread you’re running on 
  • No ICommand implementations – just use regular C# methods 
  • No INotifyPropertyChanged – Models are immutable with MVUX handling propagating of updated instances to the UI 
  • No Converters – just write the C# logic you want to execute to transform your data 
  • No virtual DOM – MVUX handles propagating of changes to the UI without creating an entire virtual DOM 

Two New Workshops

Simple Calc (beginner workshop)

The Simple Calc workshop offers a comprehensive introduction to developing cross-platform applications for Desktop, Mobile, and Web using Uno Platform. It focuses on preparing your development environment and providing guidance for Visual Studio and VS Code users. You’ll learn to create a new solution using Uno Platform templates, build your app using XAML or C# Markup, and understand essential architectural patterns like Model-View-ViewModel (MVVM) and Model-View-Update-eXtended (MVUX). Try out the Simple Calc workshop.

Tube Player (intermediate workshop)

The Tube Player workshop teaches how to make a cross-platform app for searching and streaming YouTube videos. This workshop offers a step-by-step journey, allowing you to build a two-part app with a search page and a media player. You’ll learn to set up your developer environment for Uno Platform app development and build a cross-platform app using C# Markup and MVUX. The workshop also covers customization, remote API integration, and customizing the app’s theme. Try out the Tube Player Workshop.

Toolkit and Themes support for C# Markup

All Lightweight Styling resource keys for Uno Themes and Uno Toolkit can now be used in C# Markup through a collection of static helper classes available in the Uno.Themes.WinUI.Markup and Uno.Toolkit.WinUI.Markup NuGet packages.

For more information on C# Markup support, check out the updated documentation for both Uno Themes and Uno Toolkit. 

Best of the rest

There is so much more in this release that makes your life as a developer much easier. You’ll find around 500 fixes and improvements in a vast number of areas of Uno.UI, such as: 

  • MP4 camera capture for iOS 
  • Improved composition support for Skia targets 
  • Many performance improvements for all platforms 
  • Improved DPI scaling and theming support for GTK 
  • Many Shapes clipping and general measure/arrange improvements 
  • Compass and MemoryManager support for WebAssembly 


You can find the complete list of changes in our GitHub repository. 

Breaking changes & strategy to bridge the changes

Uno Platform 5.0 includes a set of breaking changes, as well, moving Uno Platform closer to the API set of WinUI. Most of those changes are binary-breaking changes but generally are source-compatible. Rebuilding your application using Uno Platform 5.0 package will be enough to get you past the breaking changes. 

For library authors, it could be that your code is not impacted by the changes introduced in this release. For instance, SkiaSharp is compatible with both 5.0 and 4.x releases of Uno Platform. The best way to validate this is to upgrade an application and validate if there are runtime errors related to missing members. Just reach out to our team on GitHub, and we’ll happily assist you in bridging the changes.  

Xamarin, .NET 6 and Windows SDK 18362 end of support

Other breaking changes are introduced, following the ecosystem’s discontinuation of these technologies: 

  • Starting from Uno Platform 5.0, Xamarin support is removed. If you wish to continue using Xamarin, we will be maintaining the 4.x branch of Uno Platform until Xamarin support ends. 
  • .NET 6 support has been removed (support for .NET 6 for Mobile targets has ended), and you’re encouraged to move to .NET 7 or the upcoming .NET 8. 
  • If you were building for Windows SDK 18362, make sure to bump your minimum SDK version to 19041. 

Community Shout Out!

Our contributor community just passed 300 contributors across all our repositories – be it the core UI one, documentation, or gallery.  

Among others: 

Next Steps

As we stated in the beginning, using more than one piece of Uno Platform’s offering brings exponential productivity to your development process. We hope you see our vision of how future .NET applications will be created – ultimate productivity and control for developers resulting in visually appealing, delightful end-user experiences. 

To get started with Uno Platform please follow the beginner oriented Simple Calc workshop, which is doable in a coffee break. Or, for more advanced topics, use our Tube Player workshop.  

Simple Calc Workshop
Tube Player Workshop
Uno Platform Team

Uno Platform Team

Follow us on Twitter

Tags:

Related Posts

The post Five is for 5X productivity. Announcing Uno Platform 5.0 appeared first on Uno Platform.

]]> 3 Reasons to Delay Adopting .NET 8 and 10 to do it ASAP https://platform.uno/blog/3-reasons-to-delay-adopting-net-8-and-10-to-do-it-asap/ Thu, 19 Oct 2023 19:49:38 +0000 https://platform.uno/?p=16519 🕓 6 MIN   Firstly, we need to preface– you SHOULD adopt .NET 8 when it launches in mid–November. The benefits outweigh any potential downside, and we also outline that in the second part of this blog. What’s more, Uno Platform will support .NET 8 as soon as it launches; in fact, our dev branches already run on […]

The post 3 Reasons to Delay Adopting .NET 8 and 10 to do it ASAP appeared first on Uno Platform.

]]>

3 Reasons to Delay Adopting .NET 8 and 10 to do it ASAP

Firstly, we need to preface– you SHOULD adopt .NET 8 when it launches in mid–November. The benefits outweigh any potential downside, and we also outline that in the second part of this blog. What’s more, Uno Platform will support .NET 8 as soon as it launches; in fact, our dev branches already run on .NET 8 RC versions.   

That said, we did ask ourselves – are there any reasons why one would NOT want to adopt .NET 8 – is there something to look out for in case you are the kind of developer who doesn’t read all the blogs and is not always on the latest builds? We scoured the web; here is the result of our research: 

3 reasons you might delay .NET 8 adoption

1. Cannot Target .NET 6 Mobile Targets

The inability to connect to .NET 6 mobile targets is not new and has been like this since .NET 7’s release. That said, not everyone is in the know, and that could also be you. If you’d like, you can take part in this Twitter conversation. This is not bad; .NET 8 is infinitely better than .NET 6, but awareness is the key here. 

2. State Management for Blazor developers

As explained in detail on Rocky Lhotka’s blog, you should be aware of behavior changes for rich Blazor applications in .NET 8 vs .NET 6/7.  

3. Native AOT build error vs. complaint only

Some users are noticing that starting with .NET 8 RC builds if you are building for Native AOT while having a project reference that has a target framework that is not compatible with Native AOT (even if the target framework is not used), Native AOT will complain, and the app won’t build. That wasn’t the case before. The previous behavior only complained if no target framework was compatible with Native AOT.

10 Reasons to adopt .NET 8 immediately

There are, however, infinitely many more reasons to adopt .NET 8.   

.NET has been a reliable framework for building robust and scalable applications for years. With the upcoming release of .NET 8, the ecosystem has evolved to offer even more compelling features and improvements. Here are 10 reasons, out of many more, because of which you should update to .NET 8 ASAP 

1. Workload Clean

This feature addresses a long-standing issue for developers, offering a much-needed solution to the annoyance caused by leftover workload packs after updating the .NET SDK or Visual Studio. Now, with this new command, developers can easily clean up and manage workloads, providing a reliable workaround to restore their machines to a known good state enhancing the overall development experience.

2. Enhanced performance

Performance improvements are a core focus in .NET 8. It features advancements in areas like Just-In-Time (JIT) compilation, runtime, and memory management. Your applications will run faster and more efficiently, offering a better user experience. A must-read blog post on this topic was written by Stephen Toub, outlining 500 performance improvements in .NET 8. In addition, Rici Mariani wrote two in-depth blog posts analyzing heavy compute workloads in a few .NET flavors vs. Native. Hint – .NET 8 did well. (Part 1, Part 2). 

3. Modern language features – C#12: 

.NET 8 incorporates C# 12, the latest version of the C# programming language. This brings modern language features and enhancements, making your code cleaner and more maintainable. From pattern matching to nullable reference types, C# 12 empowers developers to write safer and more expressive code. A great blog highlighting 12 benefits of C#12 is here: C# 12: New Features and Improvements – DEV Community 

4. Open-Source!

NET 8 is built with contributions from a vibrant open-source community. This means more libraries, tools, and resources are available for you to leverage, including Uno Platform itself! You can tap into a wealth of knowledge and solutions through open-source packages or community-driven support. 

5. NET Garbage Collector:

.NET 8 introduces a crucial feature for cloud-service scenarios, allowing dynamic adjustment of memory limits to optimize resource consumption based on demand. The RefreshMemoryLimit() API ensures the garbage collector aligns with the new limits. This benefits cloud-native applications, particularly on platforms like Kubernetes, by enabling real-time scaling of resource usage. The feature enhances efficiency, minimizing resource expenses during low-demand periods and contributing to overall cost optimization.   

6. System.Text.Json improvements

Enhancements to the System.Text.Json library improve user experience in Native AOT applications. It includes broader type support, generator improvements, and new JsonNode API methods for DOM-like JSON document handling. Users now enjoy increased customization options for serialization/deserialization, covering naming policies, read-only properties, and more. Source generator functionality is enhanced for better reliability, supporting required/init members and providing formatted code via JsonSourceGenerationOptionsAttribute. The overall goal is to offer a more efficient and versatile experience for JSON document handling.

7. New Source Generators (Configuration Binder, API)

.NET 8 introduces several new source generators designed to work with specific libraries or scenarios. For example, the configuration-binding source generator can generate strongly typed classes from appsettings.json files2. The minimal API source generator can generate request delegates for minimal APIs that use the new WebApplication.CreateSlimBuilder() method3. The MVVM source generator can generate observable properties, commands, and more for classes that use the MVVM Toolkit. 

8. New Output Path format

The new output path format in .NET 8 is a helpful feature that simplifies the organization and location of build outputs. It offers several benefits, such as gathering all build outputs together in a common location, which makes it easier for tooling to anticipate. Additionally, it separates the build outputs by project under this common location, preventing confusion and conflicts. Finally, it flattens the overall build output layouts to three levels deep, reducing complexity and improving performance.

9. New pattern for .NET image architectures

.NET 8 introduces a new pattern for building container images for multiple architectures. This pattern has the following advantages: 

  • It has better performance and better integrates with the BuildKit build model. 
  • It enables you to mix and match architectures with the .NET images you build. 
  • It opens the door to better optimized multi-platform images using docker buildx build with the –platform switch. 

10. Uno Platform

Call us biased – but Uno Platform supporting it on day 0 is a GREAT benefit. You will be able to develop cross-platform, single codebase applications everywhere .NET runs – be it mobile, Linux or Web!  

Microsoft .NET 8 is a robust and versatile framework that brings numerous advantages to developers. With its cross-platform capabilities, performance enhancements, modern language features, web and cloud development support, and the backing of a thriving open-source community, it’s a GREAT choice for your next project.  

About Uno Platform
For those new to Uno Platform, it allows for creating pixel-perfect, single-source C# and XAML apps that run natively on Windows, iOS, Android, macOS, Linux, and Web via WebAssembly. It offers Figma integration for design-development handoff and a set of extensions to bootstrap your projects. Uno Platform is free, open-source (Apache 2.0), and available on GitHub.
Learn more about Uno Platform
Uno Platform

Uno Platform

Follow us on Twitter

Tags:

Related Posts

The post 3 Reasons to Delay Adopting .NET 8 and 10 to do it ASAP appeared first on Uno Platform.

]]> Porting a WinUI3 App to Web and Mobile in 30 minutes https://platform.uno/blog/from-winui3-to-web-and-mobile-in-just-30-minutes/ Mon, 16 Oct 2023 18:57:37 +0000 https://platform.uno/?p=16443 🕓 6 MIN   Have you ever found yourself at the crossroads of wanting to expand the reach of your WinUI 3 app beyond the confines of desktop? In this blog journey, we’re exploring the ins and outs of porting your WinUI 3 application to web and mobile platforms exploring the process of migrating a typical desktop application […]

The post Porting a WinUI3 App to Web and Mobile in 30 minutes appeared first on Uno Platform.

]]>

Porting a WinUI3 App to Web and Mobile in 30 minutes

Have you ever found yourself at the crossroads of wanting to expand the reach of your WinUI 3 app beyond the confines of desktop? In this blog journey, we’re exploring the ins and outs of porting your WinUI 3 application to web and mobile platforms exploring the process of migrating a typical desktop application to Uno Platform.

This process is crucial for developers who want to target multiple platforms with their WinUI 3 app, aiming to extend the reach of their applications to other platforms, such as mobile (Android & iOS) and web (WASM), without having to write separate code for each.

Throughout this tutorial, using the sample app (XamlBrewer) provided by Diederik Krols, we’ll explore the nuances of migrating a WinUI3 desktop application to other mobile platforms and environments like Wasm and GDK. The app, a simple yet effective showcase of Skia samples, will serve as our migration subject.

Note: the original application was new to us.  It was not designed to be easily portable by Uno Platform. We took it as a challenge – let’s see how well we do; if we fail, let’s fail in public. We invited the original developer of XAMLBrewer – Diederik Krols – to help us out. Turns out, even he was impressed by how quickly we made the port.

Throughout this tutorial, using the sample app provided by Diederik Krols, we’ll explore the nuances of migrating a WinUI3 desktop application to other mobile platforms and environments like Wasm and GDK. The app, a simple yet effective showcase of Skia samples, will serve as our migration subject.

Follow Along with our Code Sample
Follow along by either using the ported code in our Uno.Samples or watch Nick Randolph and Diedrik's collaborative demo for a step-by-step walkthrough.
Ported XAMLBrewer Sample Code

Understanding the XAMLBrewer’s Application Structure

The Original Application

The original desktop application we are working with has a simple structure, with a navigation view on the left-hand side and content rendering on the right. The application’s design features include switching between dark and light themes and opening an About page. The code for this application is broken down into three projects. Two are SkiaSharp sample codes, and the third contains the rest of the application.

The Uno Platform Application

When we create a new application on Uno Platform, we start with a class library where the majority of our code will live. This is supplemented by individual platform-specific libraries, which are the actual targets we run. For example, if we wanted to run the Wasm target, we would set it as the startup project. Most package references can be added to the class library, from where they will be transitively added to the target projects.

Setting Up your Uno Platform Application

Let’s begin with the first step in migrating your WinUI3-based application to the Uno Platform. Start by creating an instance of the shell and set it as the root content for the window, then activate it. At this stage, you may want to set the title and the icon for the Windows version of the application.

Adding Package References

The next step in setting up our Uno Platform application is to add the necessary package references. This is done by copying the dependencies from the original application and adding them to the new one. These dependencies include SkiaSharp and the community toolkit MVVM.

Importing Source Code Files

Next, we import all the source code files from the original application. This involves copying and pasting the files with minor tweaks to ensure they work well with the Uno Platform.

Modifying the Application Structure

Finally, we need to modify the application structure slightly. The main change is that the original application’s shell, a window, is converted to a user control in the new Uno application. This is because the Uno platform manages the window itself. As a result, we also need to update the startup code for the app. The new startup code is very similar to what you would see in a new WinUI-based application, with the creation of a frame and navigation to a page.

In the following sections, we will dive deeper into the process of migrating the application, addressing any challenges and peculiarities that arise along the way.

Debugging, Addressing Build Errors, and Running the Application

After setting up the Uno platform application and successfully importing the source code, the next step in the migration process involves debugging and running the application.

As with any development process, debugging is crucial to the migration effort. We might encounter a few build errors after setting up the Uno Platform application and importing the code files. These errors need to be addressed before we can run the application. Debugging involves identifying where the exception is being thrown, understanding the related issues, and making the necessary changes to the code.

You can start testing your application on different target platforms. For instance, you can test the application on GDK and the web (Wasm target). To test on mobile targets, you’ll have to deal with a few quirks, like setting the safe area to visible bounds to ensure the UI fits on the screen correctly. Once you’ve tweaked the settings, you can deploy your application to an iPhone, Android device, or even an Android emulator. It’s impressive that hot restart on an iPhone is quicker than debugging on Android, making the overall testing process more efficient. This highlights the versatility of Uno Platform and the benefits of migrating a desktop application to this platform.

Once the build errors have been addressed, the next step is to run the application. Running the application helps to confirm whether the migration process has been successful. The application is expected to function as it did before the migration. However, it is normal to encounter issues during this stage. This could range from minor issues, such as missing images, to more significant problems, like an unresponsive theme switcher.

Adapting the Code to Support Theme Switching

One of the challenges experienced during the migration process was getting the theme switcher to work. In the original application, the theme could be changed at any level down the control hierarchy. However, on Uno Platform, theme switching needs to be done at the application level. This means the code for applying the theme had to be slightly modified.

The solution was to look for the XamlRoot, essentially the root of the entire application. To account for the fact that this is likely to be null at first, then apply theme was called on the Loaded event for the shell. This ensures the theme is applied when the shell is attached to the visual tree.

Experiencing the Benefits of Migration

Ultimately, the aim is to reuse as much WinUI code as possible. It’s impressive how much of this code can be deployed cross-platform. For instance, Skia, a technology-neutral engine, works well across platforms and can be used for custom graphics and layouts.

In conclusion, migrating a WinUI3-based application to the Uno Platform involves a series of steps, including setting up the shell, dealing with build errors, fixing the icons, and testing on various platforms. The process requires a bit of debugging and problem-solving, but the result is a versatile application that can run on multiple platforms, from desktop to mobile.

Since WinUI 3 and UWP XAML are very similar in their API, Uno Platform offers compatibility with both. This article goes further into the differences and how they apply to Uno Platform.
Learn More about WinUI 3 and Uno Platform

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 4.10 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started, guide is the best way to get started. (10 min to complete)

Explore Getting Started
Uno Platform

Uno Platform

Follow us on Twitter

Tags:

Related Posts

The post Porting a WinUI3 App to Web and Mobile in 30 minutes appeared first on Uno Platform.

]]> Contributing to Uno Platform – From Novice to Expert https://platform.uno/blog/contributing-to-uno-platform-from-novice-to-expert/ Wed, 04 Oct 2023 19:50:07 +0000 https://platform.uno/?p=16343 🕓 8 MIN In the open-source world, one of the most fulfilling experiences is contributing to a project that you’re passionate about. If you’ve been eyeing Uno Platform as your next potential contribution target, you’re in the right place. This guide will walk you through every step of contributing to Uno Platform, from understanding the project’s structure to […]

The post Contributing to Uno Platform – From Novice to Expert appeared first on Uno Platform.

]]>

Contributing to Uno Platform – From Novice to Expert

In the open-source world, one of the most fulfilling experiences is contributing to a project that you’re passionate about. If you’ve been eyeing Uno Platform as your next potential contribution target, you’re in the right place. This guide will walk you through every step of contributing to Uno Platform, from understanding the project’s structure to making your first code contribution.

Uno Platform is a large project, and figuring out where to start can be overwhelming. But don’t worry, we’ve got you covered. Whether you’re a seasoned developer or a novice looking to dip your toes in the water, there’s a place for you in the Uno Platform community.

Remember, contributing to an open-source project is not just about writing code. You can add value in many ways, from reporting issues and providing feedback to improving documentation.

So, let’s dive in and explore how you can become an active part of the Uno Platform community.

Jump to:

About Uno Platform
For those new to Uno Platform, it allows for creating pixel-perfect, single-source C# and XAML apps that run natively on Windows, iOS, Android, macOS, Linux, and Web via WebAssembly. It offers Figma integration for design-development handoff and a set of extensions to bootstrap your projects. Uno Platform is free, open-source (Apache 2.0), and available on GitHub.
Learn more about Uno Platform

Section 1: Getting Started

  1. Code of Conduct

    • Before diving in, please familiarize yourself with our commitment to an open and welcoming community. Read the Code of Conduct to ensure a harassment-free environment.

  2. Where to Begin

    • Gain insights into Uno’s architecture and platform-specific details for Android, iOS, WebAssembly, and macOS. Start here for a comprehensive overview.

  3. Resources

Section 2: Uno Platform Repositories on GitHub

The Uno platform repository is a comprehensive hub containing everything that makes up the core Uno project. It is a massive repository, housing several projects, intricate workflows, and a plethora of tests running to validate each feature. This section offers a detailed walkthrough of the Uno platform repository, providing a better understanding of its structure and the particulars of working with it.

Uno Platform Repos

The Uno Platform GitHub organization page is a comprehensive hub containing everything that makes up the platform. There are many repositories, so it is beneficial to understand what the main ones represent.

The main repository is the core Uno Platform repository, named Uno. This repository contains all the source code for Uno Platform itself.

The Uno Gallery is a sample application showcasing many of Uno Platform’s features. It is a great starting point for new contributors, as it lets you get to know Uno in a platform-agnostic way before diving into the internals.

The Uno Toolkit UI is a collection of custom controls built for Uno Platform that are not part of the default WinUI code base. This repository will interest you if you like to design custom controls and none of the built-in ones fits your needs.

The Uno Extensions is a set of helpers, extensions, and tools designed to aid in building your Uno Platform application. If you have developed a helpful utility or extension that makes app development easier, consider contributing it here, as others might also benefit from it!

If you love customizing the appearance of your apps, check out the Uno Themes library, which contains various themes that can be applied to the in-app controls.

The Uno Templates library generates new Uno Platform applications when you create a new project in Visual Studio or write .NET New in the console.

Uno Playground is a web-based application that allows you to experiment with the Uno Platform without installing it on your device.

The Uno Samples repository contains many samples of Uno Platform features and UI that you can use as a starting point for your application.

Lastly, we have the Uno.WASM.Boostrap repo contains a library that takes care of running WASM apps in the browser and Uno.Resiszetizer that is used for resizing SVGs to match different screen sizes and APIs for your target devices.

List of Uno Platform repos

The Repository Structure:

The repository is organized into several folders, each serving a specific purpose. The GitHub folder contains the issue templates that define the list of issue templates on GitHub. The build folder is responsible for building everything in CI. It’s complex, with many operations happening during the CI. Then there’s the documentation folder, housing all the necessary documentation. The most interesting part is the source folder, which contains the source code. Within this folder is a large assortment of projects, each focusing on different aspects of the Uno platform.

Working with the Source Code

The source code in the repository is extensive and includes many different projects—for instance, the Uno.UI folder contains many projects, including the Windows runtime project that houses non-UI APIs such as the accelerometer or GPS geolocator.
There are also several runtime libraries for the specific flavor of the Skia project, each containing platform-specific code. And if you’re interested in building or learning about building C-Sharp code generators, the generators folder is a great place to go and investigate.

Section 3: How to Contribute to Uno Platform

To start contributing, finding an issue that matches your expertise and interests is a good first step. The best way to do this is to filter issues in a repository by the ‘good first issue’ label. This label is manually added to issues that are simple and can be handled by new contributors. However, keep in mind that not all ‘good first issue’ labels indicate that the issue will be easy to resolve. Some may be more complex, so you can choose one you feel comfortable tackling.

Once you’ve chosen an issue, you can clone the repository, fork it, and create a custom branch for your changes. When naming your commit, be sure to follow the conventional commits format. After committing your changes to your new branch, push it. You’ll then be able to head back to GitHub to see the changes on your fork and create a pull request.

After marking your PR as ready for review, a team member will check it and provide feedback. If the PR is practical and makes sense, it will be merged into the Uno Platform, and you’ll have your first Uno Platform commit. [Guidelines for Pull-Requests]

Navigating Open Source Issues for First-Time Contributors

As a newcomer to an open-source project, selecting an issue to tackle can be daunting. Finding a starting point might seem overwhelming with many reported issues and an expansive code base. However, understanding the labeling system used in repositories can make the process easier, particularly the ‘good first issue’ label.

The 'Good First Issue' Label

Take a look into the list of currently open good first issues – these are all issues that have been identified by our core team as suitable for new contributors, with a well-defined scope and a relatively gentle learning curve. Generally, these issues are easier and provide an excellent starting point for beginners. However, it’s important to note that some issues labeled as good first might still be challenging unless they match your experience. Thus, picking something that aligns with your interests and skill level is crucial.

Section 4: Understanding the Main Uno Platform Repository

The core Uno Platform repository is massive, housing hundreds of projects, intricate workflows, and many tests running to validate each feature. This section offers a detailed insight into the repository, providing a better understanding of its structure and the particulars of working with it.

The Repository Structure

The root of the repository is organized into several folders, each serving a specific purpose. The .github  folder contains the issue templates that define the list of issue templates on GitHub. The build folder is responsible for building everything in CI. It’s complex, with many operations executing during CI. Then there’s the docs folder, housing all the necessary documentation. The most interesting part is the src folder, which contains the source code.

Working with the Source Code

The source code in the repository is extensive and includes many different projects. The most crucial are:

  • Foundation – contains foundational classes and utilities
  • UWP – contains non-UI APIs such as accelerometer or geolocator
  • UI – contains UI APIs and controls
  • SamplesApp – sample app we use to validate Uno features and run UI and runtime testing


But there are tens of others, so to make it easier to understand, please see the video included at the end of the article, specifically around the 53-minute mark – https://www.youtube.com/watch?v=6h3r0Uk750M&t=3177s

Targeting Specific Platforms

The platform is extensive and includes many platforms: Android, iOS, Mac OS, Mac Catalyst, Skia WPF, Skia GTK, Skia Linux Framebuffer, WebAssembly, and Windows. Loading all of these targets at once in Visual Studio would be overwhelming. Instead, you can use the cross-targeting props file to pick a specific platform that you want to build against. See https://platform.uno/docs/articles/uno-development/building-uno-ui.html#building-unoui-for-a-single-target-platform for more details.

Did You Know?
Uno Platform is tackling the long-standing issue of underfunded open-source projects. Recognizing the struggles of maintainers in the .NET ecosystem, we launched a sponsorship-matching initiative for contributors. At the same time, this move is not a silver bullet. Still, it aims to empower individual developers, shedding light on the complexity of the challenge posed by large corporations benefiting from underfunded OSS work.
Learn More

Section 5: Writing Code

Code Conventions:

    • Ensure your code aligns with Uno’s conventions and patterns. Explore Uno’s code conventions and common practices for a smooth coding experience.

Implementing New Features:

Samples App Exploration:

Building and Debugging:

    • Get hands-on with building and debugging Uno using helpful guides like Building Uno.UI and Debugging Uno.UI. Special instructions for macOS development are available here.

Adding Tests:

    • Strengthen Uno’s stability by contributing to the testing suite. Learn about the different types of tests and how to add one with Guidelines for creating tests.

Creating Pull Requests:

    • Understand the Git basics, follow the Conventional Commits format, and read the Guidelines for pull requests before submitting your contribution..

Contributing to Uno Platform 101: From Novice to Expert!

Section 6: Engage & Share

Community & Team Support:

    • Join Uno’s Discord channel (#uno-platform) to discuss issues, share experiences, and connect with the community.

Spreading the Word:

    • Contribute beyond code by providing feedback, reporting bugs, presenting Uno at user groups, or writing a blog post. Let the world know about your Uno journey via Twitter or LinkedIn.

Conclusion

You are now equipped to participate actively in the Uno Platform community. Once you’re ready to start contributing, the first step is to head to the Uno Platform’s GitHub page and then take a plunge! Whether you’re fixing bugs, implementing new features, or simply sharing your Uno experience, your contribution matters. 

Remember, it’s normal to feel overwhelmed when diving into a new area of the code, but with time and practice, it gets easier. Don’t be afraid to ask questions and seek help from other team members. And most importantly, choose areas that interest you and where you can make the most impact.

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 4.10 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started, guide is the best way to get started. (5 min to complete)

Explore Getting Started
Martin Zikmund

Martin Zikmund

Follow Martin on Twitter

Tags:

Related Posts

The post Contributing to Uno Platform – From Novice to Expert appeared first on Uno Platform.

]]> Hacktoberfest 2023: Contributing as a .NET Developer https://platform.uno/blog/hacktoberfest-2023-contributing-as-a-net-developer/ Mon, 02 Oct 2023 16:53:49 +0000 https://platform.uno/?p=16305 🕓 4 MIN We’re happy to announce Uno Platform’s participation in the 10th iteration of Hacktoberfest. If you’re looking to discover a .NET Open-source project to participate in, we at Uno Platform have undertaken the mission of improving productivity for .NET developers, and you can be part of that. And we promise to guide you through the process […]

The post Hacktoberfest 2023: Contributing as a .NET Developer appeared first on Uno Platform.

]]>

Hacktoberfest 2023: Contributing as a .NET Developer

We’re happy to announce Uno Platform’s participation in the 10th iteration of Hacktoberfest. If you’re looking to discover a .NET Open-source project to participate in, we at Uno Platform have undertaken the mission of improving productivity for .NET developers, and you can be part of that. And we promise to guide you through the process and help you savor the “joy of open-source giving.” 

Let’s make your contributions count even more; we’d also like to use this opportunity to re-introduce our program for helping OSS projects financially – GitHub Sponsorship Matching for Uno Platform Contributors and Employees program. Yes, your hacktoberfest contribution will make you eligible for contribution matching! 

How to Participate with Uno Platform

  1. Sign up for Hacktoberfest on the event website
  2. Join our Discord Channel
  3. Check out the curated GitHub board for issues tagged with -Hacktoberfest, and start creating pull requests!
    • If an issue has no Hacktoberfest tag set, contact the maintainers to see if they are willing to accept a contribution.
    • Alternatively, if a pull request has the label Hacktoberfest-accepted, it will count towards your total.
    • For your pull requests to be accepted, the request must either be merged, have the Hacktoberfest-accepted label, or have an overall approving review on GitHub.

What Qualifies as a Contribution

  1. Code Contribution: Any open issue on the Uno Platform GitHub qualifies. If this is your first time contributing to Uno Platform, we recommend reviewing our Contribution Guidelines.
  2. Documentation Contribution:
    • Option 1: We’ve curated a list of open documentation and code sample issues you can assign yourself. As you take on an issue, we’ll connect with you on GitHub to provide guidance and ensure progress. If there’s no activity on the issue, we’ll reopen it for the community to participate.
    • Option 2: If the documentation issue you want to tackle isn’t listed, feel free to open a new documentation issue. Upon approval, tag it with the Hacktoberfest label; you can proceed to resolve/close the issue, earning credits for Hacktoberfest.

Exciting Prizes Await You

Of course, it wouldn’t be Hacktoberfest without the chance to earn swag! Everyone who makes one or more contributions to the Uno Platform repo during Hacktoberfest will receive:

  • 9 Quality Pull Requests: Uno Platform Sweater.
  • 4 Quality Pull Requests: Uno Platform T-shirt and stickers.
  • 2 Quality Pull Requests: Get Started with the Uno Platform and WinUI 3 ebook.

 

In addition to Uno Platform’s prizes, earn a digital reward kit courtesy of DigitalOcean. Also, the first 50,000 participants to have their first PR/MR accepted will have a tree planted in their name through Tree Nation.

Prize Fulfillment
If you’ve met the prize thresholds, expect to hear from us in November. We’ll reach out to you via GitHub or email to get details like your address and size for physical prizes. Please allow a couple of months for prize fulfillment for physical rewards; digital prizes will be delivered promptly.

Contributing to Uno Platform, from Novice to Expert

If you’re new to contributing, check out this awesome video from Martin Zikmund to guide you through the process, from setting up to submitting your first Uno Platform PR

Experienced Developers

If you are an established developer and want to create something new, explore beyond the suggested topics! Feel free to contribute to any area of Uno Platform. If you see any functionality or feature missing, we invite you to create new PRs.

Start Contributing!
Are you ready to be a part of something special? Hacktoberfest is not just about prizes; it's a celebration of open source, and we'd love to have you join us!
Explore Hacktoberfest Issues

General Contributing Guidelines

Please read our contributing guide for a deeper understanding of our development process and how to propose bug fixes and improvements. Seek assistance on contributing to Uno Platform in our Discord Channel #uno-platform. Remember to uphold our Code of Conduct throughout your journey.

Next Steps

To start learning about Uno Platform, check out our developer setup guide in the documentation. From there, you can explore the Uno Platform repo hacktoberfest and good first issues.

To upgrade to the latest release of Uno Platform, please update your packages to 4.10 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started, guide is the best way to get started. (5 min to complete)

Get Started with Uno Platform
Uno Platform Team

Uno Platform Team

Follow us on Twitter

Tags:

Related Posts

The post Hacktoberfest 2023: Contributing as a .NET Developer appeared first on Uno Platform.

]]> No More “Pair to Mac” trauma from Visual Studio with Uno Platform https://platform.uno/blog/no-more-pair-to-mac-trauma-from-visual-studio/ Mon, 25 Sep 2023 16:57:29 +0000 https://platform.uno/?p=16256 🕓 4 MIN With the rollout of the 4.10 update, Uno Platform has reintroduced the popular feature, Hot Restart. Originally, this feature was a part of Xamarin-based Uno Platform applications. This enhancement allows users to debug an iOS application on an actual device connected to Windows without needing a Mac. In this blog, we’ll guide you through setting […]

The post No More “Pair to Mac” trauma from Visual Studio with Uno Platform appeared first on Uno Platform.

]]>

No More “Pair to Mac” trauma from Visual Studio with Uno Platform

With the rollout of the 4.10 update, Uno Platform has reintroduced the popular feature, Hot Restart. Originally, this feature was a part of Xamarin-based Uno Platform applications. This enhancement allows users to debug an iOS application on an actual device connected to Windows without needing a Mac.

In this blog, we’ll guide you through setting up and using the Hot Restart feature for your Uno Platform iOS apps in Visual Studio. The process includes creating an Uno Platform application, setting up Hot Restart, and finally debugging an iOS application.

This article covers

  • 1. Setting up a Project for Hot Restart: Discover enabling Mac-free iOS debugging on Windows.
  • 2. Issues During Set up: Learn how to configure Hot Restart for iOS debugging, from device connection to Apple account setup.
  • 3. Debugging: Explore Hot Restart’s seamless debugging experience and understand its role in the app submission process.”
     

TLDR: Uno Platform’s Hot Restart in version 4.10 lets you debug iOS apps on Windows without a Mac. This article guides you through setup and provides troubleshooting tips

Creating a New Uno Platform, .NET Mobile Application

For the sake of this sample, we will create a new iOS mobile application

  1. Start by creating an Uno Platform application using the Uno Platform Template Wizard. Ensure Mobile is set as the startup project.
  2. Connect your iPhone/iPad to your Windows PC via USB. The devices dropdown should update to include “Local Device.” If it doesn’t, try rebuilding the Mobile project or close and reopen the solution.
  3. After rebuilding and reopening the solution (if required), you should see “Local Device” under the iOS Local Devices menu item.
New iOS Project with Uno Template Wizard
READ MORE
If you're looking for a deeper dive into the topic, check out iOS Debugging on Windows – Hot Restart article for a more comprehensive look and insight.
Read iOS Debugging on Windows – Hot Restart

Setting Up Hot Restart

  1. When you press F5 or click the Run button, you’ll be prompted to set up Hot Restart. This one-time setup ensures you have the appropriate account, certificates, and provisioning profiles.
  2. You’ll be prompted to install iTunes if you don’t have iTunes installed. Once you’ve done that, you can move directly to the next step of connecting to the device.
  3. Follow the instructions in the dialog shown – you’ll likely need to click Trust on the prompt on the iOS device and then reconnect the device via USB. If you’re unable to access the device in iTunes, Hot Restart won’t work – so ensure you fix this issue first.
  4. You’ll then need to enter your developer account information. If you don’t have a developer account with Apple, you’ll need to go to https://developer.apple.com and register for one.
Setup Hot Restart

Debugging an iOS Application

  1. After completing the Setup Hot Restart process, Visual Studio will attempt to launch your application for debugging.
  2. Each time you start a debugging session using a local device (i.e., using Hot Restart), you’ll see a prompt telling you to launch the application on the device. Reboot your iOS device and tap on the application to launch it. (This may only be required the first time (but generally not at all.)
  3. Once you launch the application, the dialog in Visual Studio will automatically dismiss, and you should be able to debug your application with the usual experience, including breakpoints and step-through debugging.

Just so you know, however, that debugging on older, slower devices might not work as the application might fail to launch in time, resulting in iOS terminating the application. Furthermore, while Hot Restart eliminates the need for a Mac for debugging purposes, you will still need a Mac somewhere in your build process to produce an application you can submit to the Apple Store.

Next Steps

As always, we appreciate all contributions and feedback from our community. Don’t forget to try out the Hot Restart feature in the latest release. We’re looking forward to hearing about your experiences!

To upgrade to the latest release of Uno Platform, please update your packages to 4.10 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started, guide is the best way to get started. (5 min to complete)

GET STARTED
Nick Randolph

Nick Randolph

Follow Nick on Twitter

Tags:

Related Posts

The post No More “Pair to Mac” trauma from Visual Studio with Uno Platform appeared first on Uno Platform.

]]> Replicating Habit Tracker UI with ProgressRing in Uno Platform https://platform.uno/blog/replicating-habit-tracker-ui-with-progressring-in-uno-platform/ Tue, 19 Sep 2023 15:44:05 +0000 https://platform.uno/?p=16172 🕓 5 MIN This article will review the essential steps of replicating a user interface using Uno Platform XAML elements. We’ve also incorporated some refinements to the original design, emphasizing the functionalities of essential elements like ProgressRing, Borders, TextBlock, and more. https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2023/09/19112942/Untitled-design.mp4 This article will cover 1. Breaking down the UI into blocks will help you work more methodically and give […]

The post Replicating Habit Tracker UI with ProgressRing in Uno Platform appeared first on Uno Platform.

]]>

Replicating Habit Tracker UI with ProgressRing in Uno Platform

This article will review the essential steps of replicating a user interface using Uno Platform XAML elements. We’ve also incorporated some refinements to the original design, emphasizing the functionalities of essential elements like ProgressRing, Borders, TextBlock, and more.

This article will cover

  • 1. Breaking down the UI into blocks will help you work more methodically and give you insight into which elements to incorporate.
  • 2. Coding each block step by step: After identifying the visual blocks to develop, we will build our UI.
  • 3. Implementing ProgressRing control available in Uno Platform.

TLDR: Build a mobile user interface using Uno Platform, covering both the analysis of the UI and the step-by-step coding process for different UI elements, including implementing a ProgressRing control.

Breaking Down the Visual Structure of the UI

First, let’s take a look at the Habit Tracker UI we will replicate based on a home screen idea design by Alexandre Naud

Habit Tracker UI Home screen
Habit Tracker UI Design by Alexandre Naud

To gain a better understanding of how to translate each UI block into functional code, we will divide the UI structure into the following two blocks:

header design and list design
Breaking down our UI

Step 1 - Main Layout Structure

To start, we’ll create the main layout structure using a Grid to house all the code blocks described in this article. 

				
					<!--Main layout structure -- >

<Grid Padding="10,20,10,0" ColumnSpacing="20" RowDefinitions="Auto,*" ColumnDefinitions="Auto,*,Auto" Background="Black">

          <!-- Add the Header code block-- > 
          <!-- Add the Home ideas list code block -- >  

</Grid>

✍ The Grid consists of two rows: the first row contains the Header block, while the second row houses the List block. Additionally, we have three columns primarily to organize the elements of the header block, while for the list block, we will cover the three columns.

Follow Along with our Code Samples
Did you know you can access the code sample for this tutorial in our Uno.Samples repo? It's an excellent resource for hands-on experience with the concepts we're discussing.

Try it and see how to apply what you've learned so far!

Code Sample

Code Explanation

Step 2 - Building our Header

📋 Make sure to follow the step-by-step instructions carefully to ensure that your code looks perfect!

Let’s begin now that we have the main layout structure ready! This section will focus on building the necessary elements for the header block. It is made up of three different components:

  1. Order Button
  2. Title
  3. Add Button

Let’s pinpoint exactly where these elements are located.

breaking down header

Translating our Header into Code

				
					<!--1. Header -->
  	 
<!-- Order Button -->

<Button Grid.Column="0" Grid.Row="0" Background="#282929" Height="40" Width="40" CornerRadius="5" Margin="10,0,0,0">
         	<Image Source="Assets/add"/>
</Button>
       	 
<!--Title-->

<TextBlock Text="Combiien" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" Foreground="White" VerticalAlignment="Center"/>
       	 
<!-- Add Button-->

<Button Grid.Column="2" Grid.Row="0" Background="#282929" Height="40" Width="40" CornerRadius="5" Margin="0,0,10,0">
        	<Image Source="Assets/order"/>
</Button>

<!-- Add here the following block of code -- >

By implementing the above code, you should have a result like the screen shown below:

Step 3 - Habit List

Our second block contains different types of visual elements, which are the following:

  • List of habits: This will contain all the elements of the block
  • Habit detail card contains the following elements:
    • Progress information: Show the percentage in text, and we will be exploring the ProgressRing to indicate that the process is still ongoing.
    • Card’s Title and Description
    • Card’s Amount and type
    • Card’s actions
breakdown of task blocks

Building our List

Our first step for this block is creating the primary list encompassing all Home Ideas cards. To fill this list, we must first define the model we will use. In this case, it is called Ideas.cs, and it contains the following attributes:

				
					public class Ideas
	{
    	public string Percentage { get; set; }
    	public string PercentageColor { get; set; }
    	public string Title { get; set; }
    	public string Description { get; set; }
    	public string Amount { get; set; }
    	public string AmountType { get; set; }
	}

Moving on, we’ll populate this model with mock data. We’ll use a simple example to display the list by filling it directly in the Mainpage.xaml.cs file. However, you can choose the method that works best for you. 

Once we’re in the MainPage.xaml.cs file, we’ll create a new method called GenerateInfo, which will look like this:

				
					public readonly ObservableCollection<Ideas> ideas;

 public void GenerateInfo()
    	{
        	// Home ideas list
        	ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#ffa500", Title = "Walking", Description = "How Many in May?", Amount = "24.08", AmountType = "km" });
        	ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#164734", Title = "Vacations in France", Description = "Budget with Emma", Amount = "72.000", AmountType = "USD" });
        	ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#01abf3", Title = "Reading", Description = "Goal: Read 16 books a year", Amount = "12", AmountType = "/16" });
        	ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#ff4582", Title = "Quit Smoking", Description = "Last cigare on 0420", Amount = "24.08", AmountType = "km" });
        	ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#ffa500", Title = "Walking", Description = "How Many in May?", Amount = "24.08", AmountType = "km" });
        	ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#164734", Title = "Vacations in France", Description = "Budget with Emma", Amount = "72.000", AmountType = "USD" });
}

Then you just have to call the list in your MainPage.xaml:

				
					public MainPage()
    	{
        	this.InitializeComponent();
        	ideas = new ObservableCollection<Ideas>();
        	GenerateInfo();
    	}

Now that we have our mock data, we need to know how to display it on the screen. To achieve this, we will implement a ListView and include a StackPanel to organize the remaining elements.

				
					<!--2. Home list ideas -->
<ListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" ItemsSource="{x:Bind ideas}" SelectionMode="None" Padding="0,20,0,0">
     <ListView.ItemTemplate>
            	<DataTemplate x:DataType="local:Ideas">
                	<StackPanel Margin="0,5">

                    	   <!-- Add the Ideas details card --> 	
 
                    </StackPanel>
            	</DataTemplate>
        </ListView.ItemTemplate>
</ListView>

Ideas Detail Card

This information will be divided into two Borders elements, so add the following code right in the part of the previous block that says “<!– Add the Ideas details card — >”

As you can see, I have left comments within each block to guide you in locating the remaining elements needed to build.

				
					<!-- Main Information -->
<Border Background="#282929" BorderThickness="0.8" Height="65" CornerRadius="8,8,0,0" HorizontalAlignment="Stretch" Margin="0,5,0,0">
           <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" Padding="20,10"          
                     RowSpacing="5" VerticalAlignment="Center">

                       <!-- Add the Progress Information -- > 
                       <!-- Add the Card’s title and description -- > 
                       <!-- Add the Card’s amount and type -- > 

          </Grid>                             
</Border>

<!--Actions Information-->
<Border Background="#141414" BorderThickness="0.8" Height="30" CornerRadius="0,0,8,8" HorizontalAlignment="Stretch">
         <Grid RowDefinitions="Auto" ColumnDefinitions="*,*,*" Padding="20,0" RowSpacing="5" VerticalAlignment="Center">

                        <!-- Add the Card’s actions-- > 	
	 
         </Grid>
</Border>
Did you know?
There are two implementations of the ProgressRing control available in Uno Platform:

Windows.UI.Xaml.Controls.ProgressRing - "WUX ProgressRing" - implementation based on the built-in control in Universal Windows Platform, with support for both native & UWP styling.

Microsoft.UI.Xaml.Controls.ProgressRing - "MUX ProgressRing", implementation based on WinUI 2.x and WinUI 3.

Explore ProgressRing Documentation

Progress Information

To display progress in text, I have used a TextBlock. To indicate that a process is in progress, I have used a Progress Ring control. This control keeps spinning like an animation. With Uno Platform, you can use the ProgressRing control, which is shaped like a ring and fills progressively to indicate the progress of a preset action.

You can learn more about by accessing the ProgressRing documentation from Uno Platform.

Card Title and Description

				
					<!-- Graphic information -->
<ProgressRing Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center" Foreground="{x:Bind PercentageColor}" Height="50" Width="50" Margin="0,0,15,0" />

<!-- Text information -->
<TextBlock Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center" Text="{x:Bind Percentage}" FontWeight="Bold" FontSize="12" Foreground="{x:Bind PercentageColor}" Padding="15,0,10,0"/>
                           	
<!-- Add here the following block of code -- >

				
			
				
					 <TextBlock Grid.Row="0" Grid.Column="1" Text="{x:Bind Title}" VerticalAlignment="Bottom" Foreground="White" FontSize="12"/>

<TextBlock Grid.Row="1" Grid.Column="1" Text="{x:Bind Description}" VerticalAlignment="Top" Foreground="#8d8e8f" FontSize="12"/>
                          	
<!-- Add here the following block of code -- >

Card Amount and Type

Optimizing elements: You have two options when faced with two text pieces of information on the same line but with different styles. You can create two TextBlocks or use a single TextBlock with different visual characteristics added to the text using Run. The latter is very optimal, so let’s see how to do it:

				
					<TextBlock Grid.Row="0" Grid.Column="2" Grid.RowSpan="2"  VerticalAlignment="Center">
          <Run Text="{x:Bind Amount}" Foreground="White" FontSize="18"/>
          <Run Text="{x:Bind AmountType}" Foreground="#abadae" FontSize="11"/>
</TextBlock>

Card Actions

We have reached the final step. Now, go to the other Border Control section labeled as “ <! — Add the Card’s actions — >“, and include the following three TextBlocks:

				
					<TextBlock Grid.Row="1" Grid.Column="0" Text="Less" Foreground="#8d8e8f" FontSize="12" HorizontalAlignment="Left"/>

<TextBlock Grid.Row="1" Grid.Column="1" Text="Options" Foreground="#8d8e8f" FontSize="12" HorizontalAlignment="Center"/>

<TextBlock Grid.Row="1" Grid.Column="2" Text="More" Foreground="#8d8e8f" FontSize="12" HorizontalAlignment="Right"/>

Final Result

Next Steps

Just a quick reminder that this development is designed to work seamlessly on both Android and iOS platforms, giving you the same app experience on both. You can access the complete project from the GitHub Sample repository.

To upgrade to the latest release of Uno Platform, please update your packages to 4.10 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started, guide is the best way to get started. (5 min to complete)

Explore Getting Started
Leomaris Reyes

Leomaris Reyes

Follow Leomaris on Twitter

Tags:

Related Posts

The post Replicating Habit Tracker UI with ProgressRing in Uno Platform appeared first on Uno Platform.

]]> Using Maui Community Toolkit in Uno Platform via .NET MAUI Embedding https://platform.uno/blog/using-mauicommunitytoolkit-in-uno-platform-via-net-maui-embedding/ Wed, 13 Sep 2023 20:12:35 +0000 https://platform.uno/?p=16122 🕓 3 MIN The MAUI Community Toolkit is a valuable resource for developers building with .NET MAUI, offering a collection of Animations, Behaviors, Converters, and Custom Views. Now, thanks to the power of .NET MAUI Embedding, these controls are available to use within an Uno Platform iOS, Android, macOS, and Windows application. https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2023/09/13155925/Untitled-video-Made-with-Clipchamp.mp4 Let’s dive deeper into how […]

The post Using Maui Community Toolkit in Uno Platform via .NET MAUI Embedding appeared first on Uno Platform.

]]>

Using Maui Community Toolkit in Uno Platform via .NET MAUI Embedding

The MAUI Community Toolkit is a valuable resource for developers building with .NET MAUI, offering a collection of Animations, Behaviors, Converters, and Custom Views. Now, thanks to the power of .NET MAUI Embedding, these controls are available to use within an Uno Platform iOS, Android, macOS, and Windows application.

Let’s dive deeper into how this integration works and the benefits it brings to Uno Platform developers. 

Did you know that you can access the code sample for this tutorial in Uno.Samples? It's a great resource for getting hands-on experience with the concepts we're discussing. Give it a try and see how you can apply what you've learned so far!

Embedding Maui Community Toolkit

Understanding .NET MAUI Embedding

To integrate .NET MAUI controls into an Uno Platform application, you’ll need two main components: the .NET MAUI class library and the MauiHost control.

The MauiHost control, which is a part of the Uno.Extensions.Maui.WinUI package serves as a crucial element in this integration process. It is incorporated into any Uno page or control to enable the embedding of a .NET MAUI control within it. The key to specifying which type of .NET MAUI control will be added as a child to the MauiHost control lies in the Source property of the MauiHost.

When you add a .NET MAUI control as a child to the MauiHost, it automatically inherits the data context of the MauiHost control. In simpler terms, the DataContext property on the MauiHost is effectively linked or synchronized with the BindingContext of the .NET MAUI control, ensuring seamless data communication between the two.

Building Your First Uno Platform App with .NET MAUI Embedding

The integration of .NET MAUI Embedding in the Uno Platform gives developers an exciting opportunity to leverage the .NET MAUI Community Toolkit’s rich library of controls in their Uno Platform applications. If you’re curious to start building with this newfound compatibility, here’s a step-by-step guide to get you started.

Step 1: Create a New Application

If your new to Uno Platform, you can start by following our Get Started tutorial to make sure you meet all prerequisites, finalize your environment and install the correct solution templates.

To get started, open your terminal and create a new application using the unoapp template with .NET MAUI Embedding enabled. We’ll use the Blank template for this example:

				
					dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp

This command creates a new project named MauiEmbeddingApp with the Blank template and .NET MAUI Embedding support.

Step 2: Add CommunityToolkit.Maui NuGet Package

The next step is to add a reference to the CommunityToolkit.Maui NuGet package to the MauiEmbeddingApp.MauiControls project. This package provides a set of useful controls and utilities for your .NET MAUI application.

Step 3: Update the AppBuilderExtensions Class

In the MauiEmbeddingApp.MauiControls project, locate the AppBuilderExtensions class. This class is responsible for configuring your application. We need to update it to make use of the CommunityToolkit.Maui package.

Here’s what the updated AppBuilderExtensions class should look like:

				
					using CommunityToolkit.Maui;

namespace MauiEmbeddingApp
{
    public static class AppBuilderExtensions
    {
        public static MauiAppBuilder UseMauiControls(this MauiAppBuilder builder) 
        {
            return builder
                .UseMauiCommunityToolkit()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular");
                    fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold");
                });
        }
    }
}

With this updated class, you are now ready to take advantage of the MAUI Community Toolkit in your Uno Platform apps, which provides a wide range of controls to further enhance your application’s functionality and appearance.

For more detailed instructions and an example of how to add the DrawingView control, please refer to our documentation.

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 4.10 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started guide is the best way to get started. (5 min to complete)

Get Started

Tags:

Related Posts

The post Using Maui Community Toolkit in Uno Platform via .NET MAUI Embedding appeared first on Uno Platform.

]]>