Windows Community Toolkit for UWP, WinUI and Uno

The Windows Community Toolkit is in pre-release of v8 – full details of their announcement here. With the new consolidated structure, there are packages for both UWP and WinUI but more importantly both sets of packages also target the Uno Platform. In this post we’re going to walk through adding one of the components from the toolkit to an Uno application, demonstrating how easy it is to level-up your application with some amazing controls regardless of whether you’re targeting Windows (UWP or WinUI), desktop (Gtk or MacCatalyst), mobile (iOS, Android) or web (WASM).

In my previous posts I’ve used the Visual Studio wizard to create the application, so I thought I’d do something different. I’m going to create my Uno application using the dotnet new template.

dotnet new install uno.templates

dotnet new unoapp -o CommunityToolkitSampleApp

This will create an Uno Platform application with the same structure that you get by picking the Recommended option in the Visual Studio wizard.

Next we’re going to add a reference to the CommunityToolkit.WinUI.Controls.RangeSelector package to the CommunityToolkitSampleApp project. You only need to add the package to this project as the reference will be applied transitively to the target projects.

It’s important that you select the packages that start with CommunityToolkit.WinUI not those that include UWP in the name (unless you have an existing Uno application that uses Uno.UI and UWP).

Now we can go ahead and add the RangeSelector control to the MainPage of the application.

<Page x:Class="CommunityToolkitSampleApp.Presentation.MainPage"
	  ...
	  xmlns:wct="using:CommunityToolkit.WinUI.Controls">
	<Grid utu:SafeArea.Insets="All">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition />
		</Grid.RowDefinitions>
		<utu:NavigationBar Content="{Binding Title}" />
		<StackPanel Grid.Row="1">
			...
			<wct:RangeSelector />
		</StackPanel>
	</Grid>
</Page>

And then we run the application – here it is running on WASM, Android and Windows

This is just a quick example of how you can get started with the Windows Community Toolkit for Windows and cross-platform Uno Platform applications.