CommunityToolkit.WinUI.Controls.SettingsControls Causes UI Issues with SelectorBar (WinUI 3)

[Zakariathr22]

Describe the bug

In a WinUI 3 app, adding the CommunityToolkit.WinUI.Controls.SettingsControls NuGet package breaks the rendering of a SelectorBar control. The SelectorBar visually malfunctions after the package is installed, despite functioning correctly before.

Steps to reproduce

1. Start with a blank window (in WinUI 3 App) and add a straightforward SelectorBar as shown below:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="App.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <SelectorBar>
            <SelectorBarItem x:Name="SelectorBarItemRecent" Text="Recent" Icon="Clock" />
            <SelectorBarItem x:Name="SelectorBarItemShared" Text="Shared" Icon="Share" />
            <SelectorBarItem x:Name="SelectorBarItemFavorites" Text="Favorites" Icon="Favorite" />
        </SelectorBar>
    </StackPanel>
</Window>

At this point, everything functions as expected when you run the app.

2. Navigate to the NuGet Package Manager, search for CommunityToolkit.WinUI.Controls.SettingsControls, and install the most recent stable version (in my case, it’s 8.0.240109). This package comes with four transitive packages:

• CommunityToolkit.Common (version 8.2.1 in my case)
• CommunityToolkit.WinUI.Extensions (version 8.0.240109 in my case)
• CommunityToolkit.WinUI.Helpers (version 8.0.240109 in my case)
• CommunityToolkit.WinUI.Triggers (version 8.0.240109 in my case)

3. Run the app again. At this point, the issue manifests:
   

• Call Stack:

>	App.dll!App.App.InitializeComponent.AnonymousMethod__4_2(object sender, Microsoft.UI.Xaml.UnhandledExceptionEventArgs e) Line 74	C#

Expected behavior

After adding the CommunityToolkit.WinUI.Controls.SettingsControls package to the WinUI3 application, the SelectorBar should function as intended without blocking or causing the application to break. The application should run smoothly without throwing any unhandled exceptions, regardless of the addition of the SettingsControls package. The SelectorBar should be responsive and interactive, allowing for the proper selection of items.

Screenshots

Code Platform

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 10 21H2 (Build 19044)
• Windows 10 22H2 (Build 19045)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Windows 10, version 2104 (Build 20348)
• Windows 11, version 22H2 (Build 22000)
• Other (specify)

Other SDK version

No response

Visual Studio Version

No response

Visual Studio Build Number

No response

Device form factor

No response

Additional context

No response

Help us help you

Yes, I'd like to be assigned to work on this item.

[niels9001]

Duplicate of: #365

WCT 8.1 should resolve this issue. @Zakariathr22 could you try the preview packages to see if the issue is resolved? More info here: https://github.com/CommunityToolkit/Windows/wiki/Preview-Packages

You're looking for the MainLatest feed: https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-MainLatest/nuget/v3/index.json. That'll have the latest builds from our main branch.

[Zakariathr22]

I appreciate your response, @niels9001. I’ve installed the most recent prerelease of CommunityToolkit.WinUI.Controls.SettingsControls (version 8.1.240405-build.1014) from the source you suggested. But this error appeared when I attempted to run the app just now.

• Error:
  WMC1006 Cannot resolve Assembly or Windows Metadata file 'Type universe cannot resolve assembly: Uno.UI, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null.'

Is there something I might have overlooked?

• Screenshots:
  
  

[tobi1449]

I'm having the same issue, both with the latest rc from nuget.org (8.1.240328-rc) and the latest one from the repo you posted (8.1.240405-build.1014).
As a side note, I'm trying to access the FrameEventArgs.VideoFrame property, which results in a CS0012: The type 'VideoFrame' is defined in an assembly that is not referenced. You must add a reference to assembly 'Uno, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null'.
Once I remove the line accessing the property, I'm getting the same exception as Zakariathr22 in the post above.

[Zakariathr22]

Potential Solution Identified, Although Temporary:

There's no requirement to install the Prerelease of CommunityToolkit.WinUI.Controls.SettingsControls for the SelectorBar to function as expected. Simply installing the most recent version of CommunityToolkit.WinUI.Controls.Segmented should suffice.

Rationale:

I observed that all controls operate smoothly when CommunityToolkit.WinUI.Controls.SettingsControls is present, with the exception of SelectorBar. This control was not available in earlier versions of Windows App SDK and only appeared in version 1.5. Upon examining the details of the stable channel release notes for the Windows App SDK, I discovered that this control was formerly known as "SegmentedControl" on the 1.5 roadmap, which is identical to the control exists in WCT.

I also noticed that the WinUI3 Gallery App employs the Settings Controls with SelectorBar without any issues. When I inspected the source code, I noticed that CommunityToolkit.WinUI.Controls.Segmented was installed in the project, but it wasn't being used at all!!??

When I attempted the same approach (merely adding CommunityToolkit.WinUI.Controls.Segmented without utilizing it), I was finally able to use SelectorBar without any issues. As a result, I suspect that the issue lies not with CommunityToolkit.WinUI.Controls.SettingsControls, but rather with Windows App SDK 1.5, which provided us with the same control found in CommunityToolkit.WinUI.Controls.Segmented, albeit under a different name. (Furthermore, it only functions in the presence of CommunityToolkit.WinUI.Controls.Segmented if you use other WCT packages.)

About The Second Error

For now, the latest two versions of the Segmented and SettingsControls packages (version 8.0.240109) are suitable for me, particularly because they are compatible with .net 6 (which I use in most of my projects). This is in contrast to their preview versions (version 8.1.240405-build.1014), which are incompatible with .net 6 for some reason and even when I used .net 8, they displayed another error for which I couldn't find a solution (WMC1006 Cannot resolve Assembly or Windows Metadata file 'Type universe cannot resolve assembly: Uno.UI, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null.').

Code

This is a XAML code for a Windows application interface that includes a SelectorBar with three items, a Segmented control with four items, and a SettingsCard with a dropdown menu containing three options.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="NewApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:NewApp"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel>

        <SelectorBar>
            <SelectorBarItem Text="Recent" Icon="Clock" />
            <SelectorBarItem Text="Shared" Icon="Share" />
            <SelectorBarItem Text="Favorites" Icon="Favorite" />
        </SelectorBar>

        <controls:Segmented>
            <controls:SegmentedItem >Item 1</controls:SegmentedItem>
            <controls:SegmentedItem >Item 2</controls:SegmentedItem>
            <controls:SegmentedItem >Item with long label</controls:SegmentedItem>
            <controls:SegmentedItem >Item 4</controls:SegmentedItem>
        </controls:Segmented>

        <controls:SettingsCard Description="This is a default card, with the Header, Description and Content set."
                               Header="This is the Header">
            <ComboBox SelectedIndex="0">
                <ComboBoxItem>Option 1</ComboBoxItem>
                <ComboBoxItem>Option 2</ComboBoxItem>
                <ComboBoxItem>Option 3</ComboBoxItem>
            </ComboBox>
        </controls:SettingsCard>

    </StackPanel>
</Window>

Screenshots