Windows Community Toolkit Labs Experiments are Here!

Michael Hawker

Windows Community Toolkit Labs 🧪

The Windows Community Toolkit Labs is how we will be developing all new features for the Windows Community Toolkit (WCT). It is meant to be a safe space to collaborate and engineer solutions from the prototyping stage all the way through a polished finalized component. It will make it easier to contribute to the Windows Community Toolkit, try out new features still in development, and cooperate together on the development process. Our initial goal for components developed here is for them to work the same across UWP (WinUI 2), the Windows App SDK (WinUI 3), and Web Assembly (WASM) via Uno Platform.

Read more about WCT Labs in our initial blog post here.

Below, we have some exciting new experiments for you to try. We’ll tell you what they are and how to test them out in your own applications, today! Let us know how they work, share with us how you’re using them, or let us know if something went wrong on GitHub in each experiment’s discussion (linked to on each experiment page docs).

If you want to get right to the action, you can find the Windows Community Toolkit Labs Sample App right here in your browser! (Update coming soon, latest info below!)

At a Glance – What’s New? 🔍

• RivePlayer
• Settings Controls
• Using in your App
• Using Labs experiments in your App
• What’s next for Labs?
• The Future – Windows Community Toolkit 8.0

Introducing RivePlayer

We’ve partnered with the engineers at Rive to bring their amazing, performant, and stateful animation technology to Windows .NET developers via Labs and the power of SkiaSharp!

Rive is a new format for real-time animation, with a dedicated editor and runtimes to play your content on all major platforms. Rive focuses on both interactive functionality and animation capabilities.

The new RivePlayer component allows you to easily load an exported Rive animation into your app. And with the power of XAML and Data Binding, you can connect the Rive animation’s state machine with your application’s logic!

In the example shown below, connecting the toggle button in the application to the animation is as easy as this:

    <rive:RivePlayer Width="600"
                     Height="600"
                     DrawInBackground="True"
                     Source="ms-appx:///animated-login-screen.riv">
        <rive:BoolInput Target="isChecking"
                        Value="{x:Bind MyCheckBox.IsChecked, Mode=OneWay}" />
    </rive:RivePlayer>

See the section below to learn how to get started with RivePlayer, today!

SettingsCard and SettingsExpander

The Windows 11 new Design Language has awed users and developers alike. The new Settings page pattern introduced there has been highly sought after as well. Today, we’re happy to introduce you to two new controls: SettingsCard and SettingsExpander. These two new controls make it easier than ever before to adopt the beautiful new Windows 11 settings experience into your own apps!

    <labs:SettingsCard Header="This is the Header"
                       Description="This is a default card, with the Header, HeaderIcon, Description and Content set.">
        <labs:SettingsCard.HeaderIcon>
            <FontIcon Glyph="" />
        </labs:SettingsCard.HeaderIcon>
        <ToggleSwitch IsOn="{x:Bind IsMySettingOn, Mode=TwoWay}" />
    </labs:SettingsCard>

You can see in the example above, you can just specify a header, icon, and description to wrap your existing control that toggles your setting. We have also built-in some logic to make sure your control displays consistently and adhering with design guidelines (like adding minimal widths and right-aligning controls like ToggleSwitches).

You can also easily group related settings with the SettingsExpander. The SettingsExpander has the same properties as the SettingsCard and the Items property allows you to directly add SettingsCards, or use the ItemsSource property to bind to a collection of items and specify a SettingsCard in your ItemTemplate. The built-in templates will automatically adopt the right styling so you don’t need to worry about that!

About Uno Platform

For those new to Uno Platform – it allows for creation of pixel-perfect, single-source C# and XAML apps which 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.

Using Labs experiments in your App

Head on over to our Labs repo and find out all about how to try out these experiments within your own projects.

It’s really just a matter of adding our Preview Package feed to your NuGet configuration (full step-by-step instructions here):

https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json

All these new experiment packages from Labs will start with CommunityToolkit.Labs.Uwp.* for UWP and CommunityToolkit.Labs.WinUI.* for Windows App SDK. Uno Platform developers can download the same package which is appropriate for their Xamarin (UWP) or MAUI (Windows App SDK) based runtime as well!

NOTE: Even though the packages contain .Uwp. the namespaces will be consolidated under CommunityToolkit.Labs.WinUI when used within your code/XAML still, the package name is just for differentiation of your underlying runtime on NuGet. This means if you migrate your project between UWP and the Windows App SDK based runtimes in the future, you don’t have to change your Labs-based component’s code!

What’s next for Labs?

We’ve learned a lot building Labs this year. There’s still a few things to do beyond creating experiments. We’ll be wrapping up some of this initial work as we continue to ramp up approved experiments from the community and our team. If you have an idea, start a discussion and share it with us and the community!

If you’d like to get involved and help us with labs, take a look at our issue list and jump into the discussions. Let us know if it’s something you think you can help us resolve in the underlying infrastructure.

🔮 The Future – Windows Community Toolkit 8.0

Any new feature work for the Toolkit will start occurring within our new Windows Community Toolkit Labs space.

We will be adopting the Labs infrastructure for the Windows Community Toolkit as well. We’ll start with a mirror repository of the Labs infrastructure to start migrating the top-used components from the Windows Community Toolkit over. This is going to be the easiest path forward for us to consolidate everything between our UWP and Windows App SDK based branches. We don’t expect to be able to bring everything over for the initial 8.0 release. (There’s a lot in the Toolkit after 6 years!)

Please bear with us during this time. If you are interested in helping us tackle migrating specific components, please let us know in our planning issue to help coordinate with our team. We’ll be updating soon with:

• A breakdown of how we’ll approach this challenge
• Prioritization of existing components
• Which components are currently being ported and by whom

Our plan is to focus on merging our branches and supporting running components on UWP, WinUI 3, and WebAssembly with Uno Platform. We also intend to use this effort to improve our samples and documentation as part of our ongoing consolidation of our docs to their new home.

Michael Hawker Senior Software Engineer, Windows & Devices

Follow