[WinUI3] Windows Community Toolkit 7.0.1 for Project Reunion 0.5

[michael-hawker]

Please read our blog for the latest info on our Project Reunion 0.5 release here: https://devblogs.microsoft.com/ifdef-windows/windows-community-toolkit-for-project-reunion-0-5/

👉 Latest Discussion thread is here. 👈

Original Discussion thread is here: #3912

Windows Community Toolkit 8.0.0 Preview 5 💗 Project Reunion 0.5 Preview [Historical]

Originally, at //Build, WinUI 3 Preview 1 was released to showcase improvements to WinUI 3 and the first release of the Desktop development story on .NET 5. 🎉🎉🎉 Now they've shipped Project Reunion 0.5 Preview!

The Windows Community Toolkit has been working alongside the WinUI team to also make sure the Toolkit works on WinUI 3! We're happy to announce that we're also shipping a preview of the toolkit that works on top of this WinUI 3 Preview 5 the next day! 🎉🎉🎉

This pre-release showcases the majority of the toolkit working on top of WinUI 3 for Desktop developers in .NET 5! If you find any new issues specific to this preview (or do something awesome), please let us know by commenting below!

⚠ Important Note ⚠

When Project Reunion 0.5 releases, we will ship packages to NuGet for the Toolkit, compatible with it like these previews. However, they will be under a different namespace/package identity of CommunityToolkit.WinUI.*. There'll be corresponding packages for each Microsoft.Toolkit.Uwp.* package. The version of the WinUI packages will align to the same version of the current UWP packages that contain the same features. Therefore when we ship 7.1 of the UWP packages, there'll be an equivalent set of 7.1 packages for WinUI 3 as well. This will continue until a time in the future we feel the community can move to WinUI 3 in full, at which point we will deprecate our UWP packages and move to WinUI 3 only.

Requirements

• Visual Studio 2019 16.10 Preview (.NET and UWP Workloads)
• .NET 5 - (should be included in VS download)
• Uninstall the WinUI 3 Preview 4 Project Templates VSIX

You can follow the initial getting started guidance for Project Reunion here: https://docs.microsoft.com/windows/apps/project-reunion/#set-up-your-development-environment

Getting Started

1. Open your VS 2019 Preview and Create a New Project.

2. Pick the "Blank App, Packaged (WinUI in Desktop) C#" template.

3. Setup your project directories and options as guided by the WinUI 3 Preview docs, we'll refer to "Project Name" generically from here on to be whatever you named your project.

4. (Optional) You should be able to run the "Project Name (Package)" project and see the blank starting app if your WinUI 3 environment is setup correctly.

5. Right-click your other application "Project Name" project, and select "Manage NuGet Packages..."

6. Click the gear in the top-right of the page to configure your NuGet settings.

7. Add a new Package source to our DevOps feed: https://pkgs.dev.azure.com/dotnet/WindowsCommunityToolkit/_packaging/WindowsCommunityToolkit-WinUI3/nuget/v3/index.json, be sure to hit the Update button after changing the textboxes, and click OK. Read more on our Preview Packages here.

8. Select the "DevOps" package source from the drop-down menu next to the Settings icon.

9. Click on Browse, find a Toolkit package you'd like to add like "Microsoft.Toolkit.Uwp.UI.Controls"

10. Make sure to select the 8.0.0-preview5 version from the Version drop-down and click "Install"!

11. Modify your project with the following based on your target framework: (See .NET SDK 5.0.200 and 5.0.104 can't load default styles of custom controls - Issue .NET SDK 5.0.200 and 5.0.104 can't load default styles of custom control microsoft/microsoft-ui-xaml#4414)

<ItemGroup>
  <!-- If you are targeting 18362 -->
  <FrameworkReference Update="Microsoft.Windows.SDK.NET.Ref" RuntimeFrameworkVersion="10.0.18362.13" />
</ItemGroup>

OR

<ItemGroup>
  <!-- If you are targeting 19041 -->
  <FrameworkReference Update="Microsoft.Windows.SDK.NET.Ref" RuntimeFrameworkVersion="10.0.19041.13" />
</ItemGroup>

12. Go to your MainWindow.xaml and paste in some Toolkit code, like our UniformGrid example from our Sample App:

    <controls:UniformGrid 
            FirstColumn="1"
            Orientation="Horizontal"
            Rows="0"
            Columns="0">
        <Border Background="AliceBlue" 
                Grid.Row="1" Grid.Column="1" 
                Grid.RowSpan="2" 
                Grid.ColumnSpan="2">
            <TextBlock Text="1"/>
        </Border>
        <Border Background="Cornsilk">
            <TextBlock Text="2"/>
        </Border>
        <Border Background="DarkSalmon">
            <TextBlock Text="3"/>
        </Border>
        <Border Background="Gainsboro">
            <TextBlock Text="4"/>
        </Border>
        <Border Background="LightBlue">
            <TextBlock Text="5"/>
        </Border>
        <Border Background="MediumAquamarine">
            <TextBlock Text="6"/>
        </Border>
        <Border Background="MistyRose">
            <TextBlock Text="7"/>
        </Border>
        <Border Background="LightCyan">
            <TextBlock Text="8"/>
        </Border>
        <Border Background="Salmon">
            <TextBlock Text="9"/>
        </Border>
        <Border Background="Goldenrod">
            <TextBlock Text="10"/>
        </Border>
        <Border Background="Pink">
            <TextBlock Text="11"/>
        </Border>
    </controls:UniformGrid>

Don't forget the xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" in your Page tag!

(And if you replace the existing template's XAML remove the event handler in the code-behind!)

13. Hit F5 and Voila! 🎉🎉🎉

Known Issues/Limitations

• ⚠ See .NET SDK 5.0.200 and 5.0.104 can't load default styles of custom controls - Issue .NET SDK 5.0.200 and 5.0.104 can't load default styles of custom control microsoft/microsoft-ui-xaml#4414

• The Windows Community Toolkit 8.x previews are currently only geared towards .NET 5 Desktop development. The toolkit has been tested against the 'UWP' sandboxed versions of WinUI as well, but won't ship a public package until .NET 5 tooling is supported for that environment. (See tracking on dotnet and Project Reunion.)

• Any component relying on Win2D as a dependency will not function or throw an exception. (See their WinUI tracking issue here.)

• The new TabbedCommandBar control hasn't been updated yet.

• ThemeListener is not working due to APIs being removed in WinUI Preview 4, see their known issue list in link below.

• GridSplitter cursor doesn't change discussed here because of changes to CoreWindow and Cursor property internal issue.

• Be sure to also read the Project Reunion 0.5 Preview Known Issue List.

[liquidboy]

Just want to mention that i lost some time when i newed up a new WinUI3 + UWP project in VS2019 preview .. And then nuget referenced the windows toolkit 7.x ..

It all appeared fine BUT when i started using the TabView, which is why i wanted to use the toolkit as the TabView in WinUI wasnt working, it threw up errors..

Didnt read any doco ahead of newing up the project .. BUT after the fact after going to the github issues for the toolkit i found that WinUI3+UWP wasnt supported for the toolkit yet..

No biggie, just wasted cycles for me :)

[and at the time after being so productive hacking on the early bits, and hitting this wall , was sort of deflating ... BUT i understand its a beta]

[alvinashcraft]

The timeline for WinUI on UWP sandboxed apps running on .NET 5 is sometime in 2021, correct? Are there any 'non-public' packages for UWP/WinUI that can be shared?

[RaoHammas]

It's not working with WinUI ! i followed exact steps and it gives followinf error (so nuget isn't installing).
Microsoft.Toolkit.Uwp.UI.Controls 8.0.0-preview1 is not compatible with uap10.0.17763

can someone help me here ?

[alvinashcraft]

It's not working with WinUI ! i followed exact steps and it gives followinf error (so nuget isn't installing).
Microsoft.Toolkit.Uwp.UI.Controls 8.0.0-preview1 is not compatible with uap10.0.17763

can someone help me here ?

Are you using it with a "WinUI on Desktop" project? The current preview only works with the .NET 5 projects, not the WinUI on UWP projects.