Uno Platform

Uno Platform

Trigger On

• building cross-platform apps from a single C# and XAML codebase
• targeting WebAssembly, iOS, Android, macOS, Linux, and Windows simultaneously
• migrating WPF or UWP applications to cross-platform
• implementing pixel-perfect UI across all platforms
• using WinUI/UWP APIs on non-Windows platforms

Documentation

• Uno Platform Overview
• Getting Started
• Using Uno Platform with WinUI
• Platform-Specific Code
• MVUX Pattern

References

See detailed examples in the references/ folder:

• patterns.md — MVUX, XAML, navigation, and performance patterns

Platform Support

Workflow

1. Choose the right template — Uno Platform offers various templates for different scenarios
2. Understand rendering modes — Skia vs native rendering affects performance and fidelity
3. Apply MVVM or MVUX patterns — keep views dumb, logic in ViewModels
4. Handle platform differences — use conditional XAML or partial classes
5. Test on all target platforms — behavior varies across platforms

Project Structure

Copy code
MyApp/
├── MyApp/                    # Shared code
│   ├── App.xaml              # Application entry
│   ├── MainPage.xaml         # Main page
│   ├── Presentation/         # ViewModels (MVUX/MVVM)
│   ├── Business/             # Business logic
│   └── Services/             # Platform services
├── MyApp.Wasm/               # WebAssembly head
├── MyApp.Mobile/             # iOS and Android head
├── MyApp.Skia.Gtk/           # Linux head
├── MyApp.Skia.WPF/           # Windows Skia head
└── MyApp.Windows/            # Native WinUI head

MVUX Pattern (Uno Extensions)

Model Definition

csharpCopy code
public partial record MainModel
{
    public IListFeed<TodoItem> Items => ListFeed.Async(LoadItems);

    private async ValueTask<IImmutableList<TodoItem>> LoadItems(CancellationToken ct)
    {
        var items = await _todoService.GetAllAsync(ct);
        return items.ToImmutableList();
    }
}

View Binding with FeedView

xmlCopy code
<Page xmlns:uen="using:Uno.Extensions.Navigation.UI">
    <utu:FeedView Source="{Binding Items}">
        <utu:FeedView.ValueTemplate>
            <DataTemplate>
                <ListView ItemsSource="{Binding}">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="local:TodoItem">
                            <TextBlock Text="{Binding Title}" />
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </utu:FeedView.ValueTemplate>
        <utu:FeedView.ProgressTemplate>
            <DataTemplate>
                <ProgressRing IsActive="True" />
            </DataTemplate>
        </utu:FeedView.ProgressTemplate>
    </utu:FeedView>
</Page>

Classic MVVM with MVVM Toolkit

ViewModel

csharpCopy code
public partial class MainViewModel(ITodoService todoService) : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<TodoItem> _items = [];

    [ObservableProperty]
    private bool _isLoading;

    [RelayCommand]
    private async Task LoadItemsAsync()
    {
        IsLoading = true;
        try
        {
            var items = await todoService.GetAllAsync();
            Items = new ObservableCollection<TodoItem>(items);
        }
        finally
        {
            IsLoading = false;
        }
    }
}

Platform-Specific Code

Conditional XAML

xmlCopy code
<TextBlock Text="Welcome"
           xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:android="http://uno.ui/android"
           xmlns:ios="http://uno.ui/ios"
           xmlns:wasm="http://uno.ui/wasm">

    <win:TextBlock.Foreground>
        <SolidColorBrush Color="Blue" />
    </win:TextBlock.Foreground>

    <android:TextBlock.Foreground>
        <SolidColorBrush Color="Green" />
    </android:TextBlock.Foreground>
</TextBlock>

Partial Classes

csharpCopy code
// Services/DeviceService.cs (shared)
public partial class DeviceService
{
    public partial string GetDeviceInfo();
}

// Services/DeviceService.wasm.cs
public partial class DeviceService
{
    public partial string GetDeviceInfo() => "WebAssembly";
}

// Services/DeviceService.Android.cs
public partial class DeviceService
{
    public partial string GetDeviceInfo() =>
        $"Android {Android.OS.Build.VERSION.Release}";
}

Hot Reload and Development

csharpCopy code
// Enable Hot Reload in App.xaml.cs
public App()
{
    this.InitializeComponent();

#if DEBUG
    // Enable Hot Reload
    this.EnableHotReload();
#endif
}

Anti-Patterns to Avoid

Performance Best Practices

1. Use virtualized lists:

   xmlCopy code
   <ListView ItemsSource="{Binding Items}"
             VirtualizingPanel.VirtualizationMode="Recycling" />
   

2. Lazy load resources:

   csharpCopy code
   // Load images on demand
   var image = await ImageSource.LoadFromUriAsync(uri);
   

3. Minimize XAML complexity:

   • Avoid deep nesting
   • Use compiled bindings (x:Bind where supported)
   • Consider Skia-specific optimizations

4. WebAssembly specific:

   • Minimize interop calls
   • Use InvokeAsync for JS interop
   • Consider AOT compilation for performance

Uno Extensions

csharpCopy code
// Use Uno.Extensions for enhanced patterns
var builder = this.CreateBuilder(args)
    .Configure(host => host
        .UseConfiguration()
        .UseLocalization()
        .UseNavigation()
        .UseMvux()
        .ConfigureServices(services =>
        {
            services.AddSingleton<ITodoService, TodoService>();
        }));

Deliver

• single codebase running on web, mobile, and desktop
• consistent UI/UX across all platforms
• platform-specific optimizations where needed
• MVVM or MVUX patterns for testability

Validate

• app builds and runs on all target platforms
• platform-specific features work correctly
• performance is acceptable on WebAssembly
• Hot Reload works during development
• no WPF/UWP-only APIs are used without fallbacks