🕓 3 MIN Advanced Cross-Platform Data Visualization …
Uno Platform 4.5: Uno Islands, 4 New Controls, Linux Framebuffer and MUCH more
The fifth release of 2022 brings innovation across all pillars of Uno Platform: UI, Toolkit, Extensions, and Tooling.
In the process of this release, we implemented 230 features and bug fixes, as well as welcomed four new contributors to our open-source project. Thank you! For those who want to jump into it, please update your Uno Platform NuGet package to the latest.
It’s a massive release, so for those who are in a rush, here is the TL: DR version: We added:
A significant new feature – Uno Islands to help you modernize apps
Increased the breadth of our existing Linux support
Four new or refactored WinUI controls and brand new pull-to-refresh
Super easy way to Authenticate users with MSAL, OIDC, Web, and Custom authentication providers via Uno.Extensions
Boosted Reactive extension
Added SafeArea, Input, Status Bar, TabBarItem Extensions, and Badge support as part of Uno Toolkit
We released Preview 3 of our Uno Platform for Figma toolkit with more customization options and performance updates.
Uno.UI
Uno Islands
One of the release’s highlights is Uno Islands, allowing you to quickly modernize your existing WPF applications with the latest developments in Microsoft’s newest Windows UI tech – WinUI (WinAppSDK).
Uno Platform’s support for Skia powers this integration. It allows a WPF application to include “islands” or portions of the app hosted using Uno Platform and displaying WinUI controls. For instance, an app using a master-details pattern can show a WPF ListView as the master view and the details view being a WinUI. In addition, DataBinding between both contexts is supported, allowing for a seamless transition between the two.
There is much more to come for this new Uno Islands feature, but we’re eager to see what you will do with it! Let us know by joining the discussion on GitHub.
You can grab the sample app below to showcase Uno Islands at Uno Platform GitHub repo and browse our documentation here.
New WinUI Controls
In this release, we’ve introduced new controls and re-engineered some existing ones, so they perfectly match the WinUI Contract.
Now available in Uno Platform are:
The Breadcrumb control can handle navigation in applications and offer users hints for where they are in the navigation.
The PipsPager allows apps to manage a “carousel”-like navigation hinting
The WinUI Slider – Initially included in previous Uno Platform releases. However, we’ve refactored it for better performance.
WinUI TickBar – The tick bar looks similar to Slider. Still, it has a set of pre-defined ‘ticks’ on the Slider for pre-defined values, making it easier for the end-user to select a particular value accurately.
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. In addition, 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.
Pull to Refresh
Pull-to-refresh allows a user to pull down on a list of data using touch to retrieve more data. We have ported this feature from WinUI, which is now available on mobile targets. What’s more, it is easily customizable.
Linux Framebuffer DPI and Scaling, 16-bit Mode Support
Linux continues to come up in multi-platform scenarios our community uses. One of the most requested items was an improvement of Framebuffer DPI scaling and the 16-bit mode support found in Raspberry Pi boards. You can see some early use cases of this in Morten’s viral tweet.
We’ve also changed how framebuffer applications handle the console, where it is now possible to handle the keyboard interactions to exit an app properly.
Uno Toolkit
SafeArea Control & Extensions
In Uno Toolkit, we added SafeArea, Input Extensions, Control Extensions, TabBarItem Extension, and Badge support for TabBarItems. We cooked up a short video that depicts TabBarExtensions, and below you’ll see some code on how to use the rest of the new Uno Toolkit features.
The SafeArea control ensures its content is always within the ApplicationView.VisibleBounds which guarantees that your controls will not be impeded by display cutouts such as notches, hole-punches, or the iPhone’s new dynamic islands. SafeArea can also be used to make sure that your views are never blocked by the on–screen keyboard and can be used with attached properties on any FrameworkElement to reduce nesting:
<Page xmlns:utu="using:Uno.Toolkit.UI" ...>
...
<utu:SafeArea Insets="Top,Bottom"
Mode="Padding" />
<Border utu:SafeArea.Insets="SoftInput”
utu:SafeArea.Mode="Margin" />
…
</Page>
The image below shows a side-by-side comparison of the same app, one without (left) and with (right) the applied SafeArea insets.
StatusBar Extensions
The StatusBar extension allows for the customization of the status-bar foreground and background color directly inside the XAML:
<Page ...
xmlns:utu="using:Uno.Toolkit.UI"
utu:StatusBar.Foreground="Dark"
utu:StatusBar.Background="SkyBlue" />
Input Extensions
The InputExtensions provides various attached properties for input controls, such as TextBox and PasswordBox, to alter the enter key–press behaviors, like changing focus to another control or closing the soft keyboard:
<!-- The focus will move in this order when pressing enter repeatedly: 1-2-4-3 -->
<TextBox x:Name="Input1" utu:InputExtensions.AutoFocusNext="True" />
<TextBox x:Name="Input2" utu:InputExtensions.AutoFocusNextElement="{Binding ElementName=Input4}" />
<TextBox x:Name="Input3" utu:InputExtensions.AutoFocusNextElement="{Binding ElementName=Input1}" />
<TextBox x:Name="Input4" utu:InputExtensions.AutoFocusNextElement="{Binding ElementName=Input3}" />
<!-- Dismiss soft-keyboard on enter -->
<TextBox utu:InputExtensions.AutoDismiss="True" />
Uno.Extensions (Authentication)
A new set of extensions that make it super easy to add authentication to an application have been added to Uno.Extensions with support for MSAL, OIDC, and Web authentication patterns. Moreover, there is also a Custom option to allow developers to connect to custom backend services to authenticate.
Multiple authentication providers can be configured either in code or using appsettings.json. For example, the following code configures both MSAL and Custom authentication that uses an ICustomService Refit endpoint.
UnoHost
.CreateDefaultBuilder()
.ConfigureServices((context, services) => {
services.AddRefitClient<ICustomService>(context);
})
.UseAuthentication(auth => auth
.AddCustom(custom =>
custom.Login<ICustomService>(async (service, credentials) => {
// Call authentication endpoint and return tokens
})
.AddMsal()
).Build()
Within the application, to initiate the login, an instance of the IAuthenticationService can be accessed to trigger the login workflow. For example, the LoginViewModel accepts an IAuthenticationService as a dependency and then invokes either the MSAL or Custom authentication provider based on the value of the UseMsal property.
public record LoginViewModel(IAuthenticationService Authentication)
{
public async Task Login()
{
if( UseMsal ){
await Authentication.LoginAsync(provider: "Msal");
}
else{
var creds =
new Dictionary<string, string>(){
{"Username",UserName },
{"Password",Password }
};
await Authentication.LoginAsync(credentials: creds, provider: "Custom:");
}
}
}
The latest documentation for Extension.Authentication and any updates to the snippet above can be found here.
Uno.Extensions (Reactive)
The ListFeed now supports data virtualization, allowing its creation from a paginated source. It will enable to display of a large set of items and removes the need to handle the lazy loading of items. Performance is always a feature, the ListFeed is optimized to track and update only modified items.
To use it, as the pagination is triggered directly by the view when scrolling items, it is only needed to use the new `ListFeed.AsyncPaginated` or `ListFeed.AsyncPaginatedByCursor`.
To improve application development productivity, we are now implicitly populating parameters of methods exposed as commands by matching feed properties in the ViewModel. For instance:
public IFeed<string> Message { get; }
public async ValueTask Share(string message)
{
}
and your view:
<Button Command="{Binding Share}" Content="Share" />
The `message` parameter in the `Share` method will be the current value of your view model’s ` IFeed Message`.
You can still provide the parameter from the view:
<Button Command="{Binding Share}" CommandParameter="hello world" Content="Share" />
You can also mix parameters from the view and from the view model:
public IFeed<MyEntity> Entity { get; }
public async ValueTask Share(MyEntity entity, string origin)
{
}
Used as follows in XAML:
<Button Command="{Binding Share}" CommandParameter="command_bar" Content="Share" />
In this example, the `entity` parameter is the current value of the `Entity` feed, and the `origin` will be the `CommandParameter` defined on the button.
To match a command parameter to a feed declared in your view model, the parameter only needs to match a property with the same (case insensitive) name. That feed needs to be of the type of parameter. This also works with ListFeed.
The latest documentation for Extension.Reactive can be found here, including any code changes to snippets above.
Uno Platform Plugin for Figma
As a stand-alone and optional tool for using Uno Platform, the latest developments in our Figma plugin deserve a blog post on their own. However, as a teaser, we are introducing Support for Overrides, a StatusBar component, and many more performance improvements to allow better collaboration between designers and developers.
Stay tuned for a detailed blog post in a few days, or if you’d want to get your hands on the newest Plugin, download it from here.
Additional Uno.UI notable changes
We’ve been busy on many other topics, and here are some additional details. You can also view the full Uno.UI change log here.
RenderTargetBitmap
Our contributor @workgroupengineering has added the support for RenderTargetBitmap, BitmapEncoder, and SoftwareBitmap, allowing iOS, Android, macOS, and Skia to render portions of the Visual Tree to a bitmap. This is a significant update for the reliability of Uno.UI itself, as it allows our internal testing suite to run much faster as it will enable in-app bitmap comparisons instead of using Xamarin.UITest.
WebAssembly preloading and lazy font loading
Uno now provides an updated way for handling fonts in a WebAssembly app, where it is now possible to load fonts from “ms-appx:///” locations and remote locations (such as CDNs).
To avoid visual relaying when fonts are loaded, it’s now possible to preload the fonts using the FontFamilyHelper APIs, but Uno.UI will also re-layout text properly when fonts are used in a non-frequent part of your application.
iOS 16 fixes
Apple’s iOS 16 is now available if you’ve been running Xamarin. For iOS apps that contain TextBox or PasswordBox controls, you will need to update your app to a recent Uno Platform build, such as 4.4 or 4.5, to prevent your app’s termination when users interact. Uno.UI contains the necessary workarounds until .NET 6 and Xamarin.iOS get updated.
XAML Intellisense improvements in Visual Studio 17.4 Preview 1
Visual Studio has been updated to allow for additional markup extensions, making x:Bind, StaticResources, and ThemeResources appear correctly, without the red underlining. We’re working with Microsoft to enhance Intellisense further and provide values for
Android performance updates
Our contributor @queequac built some Android performance updates when updating Shapes, reducing the allocations and interop done during those operations. Thanks!
We’ve also changed how android resources lookups are performed, building a static lookup table to provide zero startup cost features and faster lookups, saving around 70ms when launching an app. Drawables on Android are used on many occasions, particularly when using `Image` or `AppBar` controls or `StorageFile. GetFileFromApplicationUri`.
Community Shout Out!
We wouldn’t be able to do what we do without the help from our great community – filing bugs and issues and helping with the core project by submitting Pull Requests. Our contributor community is now over 230 developers strong, and we just passed 7,000 stars on Git Hub and 2,000,000 downloads on NuGet. Thank You.
A Special Shout out for the 4.5 release goes to Giuseppe Lippolis (AKA workgroupengineering) for contributing a fix for RenderTargetBitmap, InMemoryRandomAccessStream, and a variety of quality of life updates.
Thank you to all the other contributors:
Support for testing generators with diagnostics, compatibility with other source generators (@havendv)
Documentation updates (@rarisma, @linkdotnet, @miyanni, @DavidPerikala)
DataWriter.StoreAsync (@rafaelrmoukc)
Next Steps
To upgrade to the latest release of Uno Platform, please update your packages to 4.5 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)
Share this post:
Related Posts
🕓 5 MIN When developing applications, effective …
🕓 4 MIN As more organizations consider …
