Windowscommunitytoolkit: [WinUI3] Windows Community Toolkit 8.0.0-preview3 for WinUI 3 Preview 3

[michael-hawker]

Windows Community Toolkit 8.0.0 Preview 3 💗 WinUI 3 Preview 3

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 Preview 3!

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 3 the same 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!

Requirements

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

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-preview3 version from the Version drop-down and click "Install"!

11. 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!)

1. Hit F5 and Voila! 🎉🎉🎉

Known Issues/Limitations

• 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.)

• There is a known issue with DropDownButton/SplitButton which will crash when opened on newer versions of Windows, this should be resolved in insider build 20262. This effects the Toolkit's new ColorPickerButton control as well and it can also effect the DataGrid control as well.

• Be sure to also read the WinUI 3 Preview 3 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.

[jtbrower]

For anyone who lands on this page and decides to give the above a shot, the tutorial will not work past .Net5.0 preview 5. At the time I am writing this comment, .Net5.0 preview 6 is out and it has breaking changes that require you to add a direct reference to the following NuGet package.

<PackageReference Include="Microsoft.Windows.CsWinRT" Version="0.1.0-prerelease.200623.5" />

If you don't, you will hit the following exception.

System.MissingMethodException: 'Method not found: 'Void System.Runtime.InteropServices.ComWrappers.RegisterAsGlobalInstance()'.'

[alvinashcraft]

For anyone who lands on this page and decides to give the above a shot, the tutorial will not work past .Net5.0 preview 5.

I was getting the same error with .Net5.0 preview 5 today. I had to roll back to preview 4 to get WinUI on Desktop projects that use WCT compiling with .Net 5.

[jtbrower]

Interesting. I had thought it was related to this change which I wasn't seeing until preview 6.

[michael-hawker]

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?

@alvinashcraft to support UWP currently with WinUI, the packages need to support the .NET Native toolchain. To support both Desktop and UWP, we'd need to multi-target our packages. Since this wouldn't make sense as the end-result, we just moved over early for the Desktop support, and are waiting on the .NET 5 support from the platform for UWP.

Before the move, we had done testing with the UWP side, so those should be working in the future. If WinUI 3/.NET 5 work is delayed for a while, then we'll re-evaluate doing multi-targeting as a stop-gap based on the feedback in this thread.

FYI @azchohfi

[michael-hawker]

@jtbrower I know the base WinUI 3 packages have issues with the new .NET 5 previews. I believe this should be all resolved in the upcoming Preview 2, we'll also refresh this Toolkit package at that time as well. But yes, for now you have to use .NET 5 Preview 4.

[jtbrower]

Hello @michael-hawker, I have been able to begin evaluation of WinUI with .Net 5 Preview 6 by adding a direct reference to the NuGet package below. This is the same workaround that I needed to apply to use the PointOfService namespaces with .Net5.0 preview 6. Although I am sure I might run into additional issues regarding version mismatches (what do you think) it has given me what I need to try out WinUI since I have already rolled past the required .Net version.

<PackageReference Include="Microsoft.Windows.CsWinRT" Version="0.1.0-prerelease.200623.5" />

I built a sample desktop application targeting .Net 5.0 preview 6 along with the latest public WinUI and am intrigued enough to attempt a conversion to WinUI 3 from WPF. This isn't a trivial effort for me but I have been praying for a UI solution since Microsoft first released the sandboxed UWP back in 2012. Stuck in limbo for 8 years, I cannot emphasize enough how excited I am to modernize a large enterprise app.

[alvinashcraft]

Thanks, @michael-hawker. I was working on the WCT chapter in my WinUI 3 book last week and over the weekend. I decided to write a simple sample app with WinUI on Desktop for the chapter. My original plan was to integrate some WCT controls into the WinUI on UWP sample app that spans multiple chapters.

Even with desktop/.NET5, I ran into some issues. No compile-time or runtime errors, but I couldn't get the DataGrid to render at all. The dropshadow panel was being flakey also (shadow rendering far from the child element). The same code on pure UWP works fine.

[michael-hawker]

Thanks @alvinashcraft for the feedback. The DataGrid should be working, but there is an issue tracking that over here, I'm not too sure what's causing the problem there, but @RBrid is taking a look, FYI @azchohfi.

As for the DropShadowPanel, it should mostly be using the composition APIs, so if there's a problem there too, it'd be good to probably file an issue on WinUI as well.

[Wigmund]

ItemsRepeater within the Expander control doesn't seem to work, ListView does though :)

[michael-hawker]

@Wigmund do you have a repro you could share and more details about what you're not seeing working? Feel free to file a new issue specifically for your scenario. Thanks!

[alvinashcraft]

Regarding the workaround to add Generic.xaml to App.xaml to get DataGrid to work, is a placeholder for the the name of my project's name or for the name of the WCT library we're referencing?

EDIT: Sorry, should have done some experimenting on my own before asking. I got DataGrid to display property by adding this to my App.xaml:

<ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls.DataGrid/Themes/Generic.xaml"/>

[michael-hawker]

@azchohfi noticed on stream that the EnumValues Markup Extension was crashing in WinUI 3 Preview 2 with a pretty cryptic error when binding to a ComboBox?

<ComboBox ItemsSource="{ex:EnumValues Type=model:Purpose}"/>

This would probably be something we report to the WinUI team? I can share a sample.

[azchohfi]

I think this is a CSWinRT issue. @stevenbrix , is this being tracked?

[stevenbrix]

@azchohfi that's most likely the case if this is happening in desktop but not uwp. Is there a call stack or small repro to look at?

[michael-hawker]

@stevenbrix sent you a copy of the project as it's not ready to publish yet. The error was just HRESULT E_FAIL, happened here on my stream yesterday.

[michael-hawker]

FYI anyone using the NuGet packages from the MyGet feed, we just switched over to our new DevOps feed, so you'll need to switch your feed url to the new one. I updated this info above. Info in the Wiki as well: https://github.com/windows-toolkit/WindowsCommunityToolkit/wiki/Preview-Packages

[huoyaoyuan]

When will new version targeting WinUI3 Preview3 be released?
Since Preview 3 has SDK side breaking change, older package is currently a blocker.

[michael-hawker]

@huoyaoyuan we had a bit of a delay updating our pipelines as the VS 16.8 SDK was required now to build. We've shipped the updates today though, sorry for the delay!

[rezss]

Unfortunately there are multiple issue with DataGrid in Preview 3.

E.g. if you add a DataGridTextColumn programmatically and give it a Star or Auto width (Width = new DataGridLength(1, DataGridLengthUnitType.Star)), there is an exception when calculating the width. Editing a column doesn't work either. As soon as you edit a cell (e.g. by pressing F2) there is a MissingMethodException (".ctor")

Edit: The Problem with the width occurs as soon as the columns are wider than the DataGrid itself. Thus, as a workaround, wrap it in a ScrollViewer with HorizontalScrollBarVisibility set to "Auto". As for the editing column, my workaround is using a DataGridTemplateColumn with a Cell- and CellEditTemplate. One with a TextBox and one with a TextBlock respectively.

Oh, and one question: Is it by design that the RowEditEnded event gets fired before the Datagrid switched the cell back the non-editing mode? I'd like to use the RowEditEnded event as a trigger to change the ItemsSource (flux/redux architecture), but got errors that the DataGrid is in the wrong state :/

[michael-hawker]

FYI @anawishnoff @rbrid for the comment above.

[Marv51]

Any update on UWP WinUI 3 support?
Sounds like UWP on .net 5 will not make it until after WinUI 3 release.

This transition is kind of painful for us 😥

[michael-hawker]

@Marv51 is there something specific you need from WinUI 3 currently? If you're already a UWP app, that's the best place to be at the moment still. The initial WinUI 3 release is really focused towards brining the Desktop Win32 developers forward to the modern UX stack.

From our Toolkit side, we won't align our main development and releases on top of WinUI 3 until WinUI 3 aligns their UWP/Desktop stories. Until then, we'll continue to ship Toolkit previews for WinUI 3 Desktop.

[Marv51]

@michael-hawker We have a WPF app with UWP components/windows (communicating over AppService and a custom URL-schema). Our goal is to unify that in one process asap.

We are thinking right now what the best way forward is.
Moving our UWP process to WinUI 3 (UWP) as a first step seemed like an easy first step.

Moving our UWP into the WPF process with WinUI 3 seems like the best way forward, but we are unable to get that to work right now. (https://github.com/microsoft/microsoft-ui-xaml/issues/3675)

(And we would like WebView2 in our UWP app 🙈)