The Windows Community Toolkit, WCT for short, is an essential resource for WinUI developers. It’s a Microsoft-supported library of controls like DataGrid, TabView and Expander that provide advanced functionality on top of what’s available in the base framework.
As you might have seen in the Uno Platform 2.2 announcement yesterday, Uno Platform now includes a bunch of fixes and feature enhancements that unlock more of WCT for mobile and web. While we have supported WCT for a long time now on https://windowstoolkit-wasm.platform.uno, in this blog post we’ll highlight some of the WCT controls you’ll now be able to use with Uno.
About Uno Platform
For those new to Uno Platform – it enables for creation of single-source C# and XAML apps which run natively on iOS and Android, and Web via WebAssembly. Uno Platform is Open Source (Apache 2.0) and available on GitHub. To learn more about Uno Platform, see how it works, or create a small sample app.
WCT DataGrid running on Web (via WebAssembly), iOS, Android, and soon macOS
The WCT DataGrid control presents data in a spreadsheet-like format, organized by columns and rows. This control is a mainstay of line-of-business applications, allowing users to view and manipulate data from a database or other source, and has been one of the most hotly requested controls in terms of Uno Platform support. This release makes the control quite usable and further performance enhancements are coming, especially on WebAssembly.
We’re proud to announce that you’ll be able to use the WCT DataGrid starting from Uno 2.2 – or download the pre-release packages and try it right now. Below you can see DataGrid in action in the browser, using Uno running on WebAssembly:
Sample App using Uno and Windows Community Grid Only
If you’d like to play around with a simple DataGrid sample without downloading the whole WCT source, we created a standalone sample that you can get here. Note that you will still have to have the required NugGet packaged described in the closing of this blog post. If you clone and run the app it should look like this:
WCT TabView running on Web (via WebAssembly), iOS, Android, and soon macOS
The TabView control displays multiple pages of content in a tabbed view. It has built-in support for the user to open and close new tabs. This UI idiom is familiar from web browsers and text editors.
See TabView running on Uno in the browser below:
WCT Expander running on Web (via WebAssembly), iOS, Android, and soon macOS
The WCT Expander control is an expandable container with a header that can show any content.
See it below:
How to use DataGrid, TabView and Expander controls with Uno Platform
If you are new to the Uno Platform, you may want to run through the Getting Started tutorial. This will ensure you have the correct environment set up and that you have the latest release of Uno. You’ll want the latest prerelease versions of the Uno packages.
Once you have a sample cross-platform Uno app ready to go, you’ll need to install the required NuGet packages for WCT. Note that for Uno platforms (WebAssembly, Android, and iOS), the packages you’ll need are prefixed with Uno.*.
Required NuGet packages for DataGrid:
- For UWP & WinUI: Microsoft.Toolkit.Uwp.UI.Controls.DataGrid
- For iOS, Android, Web (WebAssembly): Uno.Microsoft.Toolkit.Uwp.UI.Controls.DataGrid
Required NuGet packages for TabView and Expander:
- Microsoft.Toolkit.Uwp.UI.Controls
- Uno.Microsoft.Toolkit.Uwp.UI.Controls
To get started using the controls in your app, check out the samples or consult the official documentation:
- DataGrid Sample, Docs, API Reference
- TabView: Sample, Docs, API Reference
- Expander: Sample, Docs, API Reference
David Oliver, on behalf of Uno Platform Team
