I can't use the new TokenView component in WinUI, what am I doing wrong?

[WillyWoe]

My csproj:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net6.0-windows10.0.19041.0</TargetFramework>
    <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
    <RootNamespace>LabsTests</RootNamespace>
    <ApplicationManifest>app.manifest</ApplicationManifest>
    <Platforms>x86;x64;arm64</Platforms>
    <RuntimeIdentifiers>win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>
    <PublishProfile>win10-$(Platform).pubxml</PublishProfile>
    <UseWinUI>true</UseWinUI>
    <EnableMsixTooling>true</EnableMsixTooling>
  </PropertyGroup>

  <ItemGroup>
    <Content Include="Assets\SplashScreen.scale-200.png" />
    <Content Include="Assets\LockScreenLogo.scale-200.png" />
    <Content Include="Assets\Square150x150Logo.scale-200.png" />
    <Content Include="Assets\Square44x44Logo.scale-200.png" />
    <Content Include="Assets\Square44x44Logo.targetsize-24_altform-unplated.png" />
    <Content Include="Assets\StoreLogo.png" />
    <Content Include="Assets\Wide310x150Logo.scale-200.png" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="CommunityToolkit.Labs.WinUI.TokenView" Version="0.0.4" />
    <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.2.230118.102" />
    <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.22621.1" />
    <Manifest Include="$(ApplicationManifest)" />
  </ItemGroup>

  <!-- 
    Defining the "Msix" ProjectCapability here allows the Single-project MSIX Packaging
    Tools extension to be activated for this project even if the Windows App SDK Nuget
    package has not yet been restored.
  -->
  <ItemGroup Condition="'$(DisableMsixProjectCapabilityAddedByProject)'!='true' and '$(EnableMsixTooling)'=='true'">
    <ProjectCapability Include="Msix" />
  </ItemGroup>

  <!-- 
    Defining the "HasPackageAndPublishMenuAddedByProject" property here allows the Solution 
    Explorer "Package and Publish" context menu entry to be enabled for this project even if 
    the Windows App SDK Nuget package has not yet been restored.
  -->
  <PropertyGroup Condition="'$(DisableHasPackageAndPublishMenuAddedByProject)'!='true' and '$(EnableMsixTooling)'=='true'">
    <HasPackageAndPublishMenu>true</HasPackageAndPublishMenu>
  </PropertyGroup>
</Project>

My xaml:

<Window
    x:Class="LabsTests.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LabsTests"
    xmlns:labs="using:CommunityToolkit.Labs.WinUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <labs:TokenView AllowDrop="True"
                        CanReorderItems="True"
                        IsWrapped="True"
                        SelectedIndex="2"
                        SelectionMode="Single">
            <labs:TokenItem Content="All" />

            <labs:TokenItem Content="Apps">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xECAA;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Work">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE821;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Documents">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE8A5;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Web">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE12B;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Settings">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE115;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="People">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE13D;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Folders">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE8B7;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Photos">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE91B;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
        </labs:TokenView>
    </Grid>
</Window>

and this is the exception:

Error HRESULT E_FAIL has been returned from a call to a COM component.
at WinRT.ExceptionHelpers.g__Throw|20_0(Int32 hr)
at CommunityToolkit.WinUI.UI.Controls.WrapPanel.MeasureOverride(Size availableSize)
at Microsoft.UI.Xaml.FrameworkElement.Microsoft.UI.Xaml.IFrameworkElementOverrides.MeasureOverride(Size availableSize)
at ABI.Microsoft.UI.Xaml.IFrameworkElementOverrides.Do_Abi_MeasureOverride_0(IntPtr thisPtr, Size availableSize, Size* result)
--- End of stack trace from previous location ---
at WinRT.ExceptionHelpers.g__Throw|20_0(Int32 hr)
at Microsoft.UI.Xaml.FrameworkElement.MeasureOverride(Size availableSize)
at Microsoft.UI.Xaml.FrameworkElement.Microsoft.UI.Xaml.IFrameworkElementOverrides.MeasureOverride(Size availableSize)
at ABI.Microsoft.UI.Xaml.IFrameworkElementOverrides.Do_Abi_MeasureOverride_0(IntPtr thisPtr, Size availableSize, Size* result)

What am I doing wrong?

[michael-hawker]

Looks like a Layout exception, what happens if you use a StackPanel over a Grid or turn off IsWrapped? FYI @niels9001

[WillyWoe]

Nope, same error, I tried a StackPanel over a Grid, turned off IsWrapped, added the TokenView XAML to a Page and put that within the Window, nothing seems to work, btw my SO is Windows 10 Version 22H2.

[niels9001]

Nope, same error, I tried a StackPanel over a Grid, turned off IsWrapped, added the TokenView XAML to a Page and put that within the Window, nothing seems to work, btw my SO is Windows 10 Version 22H2.

Would you mind creating a repro project and attach it to your comment? That allows us to test it on both W10/W11 and makes sure we have the same proj config.

[WillyWoe]

Sure, this is the project
LabsTests.zip

[niels9001]

@WillyWoe Thanks! That helped. We were using specific brushes for the button that is shown when IsRemoveable on a TokenItem is set to true. I thought these brushes were available in WinUI itself, but those were defined in the Labs Gallery itself - that's why it worked in the samples itself.

Made the changes, and validated with your repro that it no longer crashes. PR is up: #423

[WillyWoe]

Thank you!, now it works.