SettingsExpander clashed on packaged application but run success on both Visual Studio Debug / Release mode

[wtcpython]

Describe the bug

First, My English is poor, the next content maybe have some grammar error, I'm sorry about it.

As the Title say, I can't use the SettingsExpander when I want to open it and get the extra content.

My XAML File is like:

<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="Edge.HistoryItem"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Edge"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    mc:Ignorable="d">
    <ScrollView>
        
        <StackPanel Spacing="10" Margin="15">

            <TextBlock Text="选择每次关闭浏览器时要清除的内容" Style="{ThemeResource FlyoutPickerTitleTextBlockStyle}" Margin="5,10,0,0"/>

            <controls:SettingsExpander
                x:Name="ClearBrowsingDataButton"
                Header="立即清除浏览数据"
                ItemsSource="{x:Bind BrowserDataKindList}">

                <Button Content="清除数据" Click="ClearBrowsingData"/>
                
                <controls:SettingsExpander.ItemTemplate>
                    <DataTemplate x:DataType="local:BrowserDataKind">
                        <CheckBox Content="{x:Bind Name}" IsChecked="{x:Bind IsChecked, Mode=TwoWay}" Margin="20,5,0,5"/>
                    </DataTemplate>
                </controls:SettingsExpander.ItemTemplate>
            </controls:SettingsExpander>
        </StackPanel>
        
    </ScrollView>
</Page>

And my C# Code is like:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.Web.WebView2.Core;
using System;
using System.Collections.Generic;

namespace Edge
{
    public class BrowserDataKind
    {
        public CoreWebView2BrowsingDataKinds Kind { get; set; }
        public string Name { get; set; }
        public bool IsChecked = false;
    }
    public sealed partial class HistoryItem : Page
    {
        public List<BrowserDataKind> BrowserDataKindList =
        [
            new() { Kind = CoreWebView2BrowsingDataKinds.BrowsingHistory, Name = "浏览历史记录"},
            new() { Kind = CoreWebView2BrowsingDataKinds.CacheStorage, Name = "缓存资源" },
            new() { Kind = CoreWebView2BrowsingDataKinds.Cookies, Name = "Cookies和网站数据" },
            new() { Kind = CoreWebView2BrowsingDataKinds.DownloadHistory, Name = "下载历史记录" },
            new() { Kind = CoreWebView2BrowsingDataKinds.DiskCache, Name = "磁盘缓存" },
            new() { Kind = CoreWebView2BrowsingDataKinds.IndexedDb, Name = "IndexedDB 数据存储" },
            new() { Kind = CoreWebView2BrowsingDataKinds.LocalStorage, Name = "本地存储数据" },
            new() { Kind = CoreWebView2BrowsingDataKinds.PasswordAutosave, Name = "密码自动填充" },
            new() { Kind = CoreWebView2BrowsingDataKinds.WebSql, Name = "WebSQL 数据库" },
        ];

        public HistoryItem()
        {
            this.InitializeComponent();
            //ClearBrowsingDataButton.ItemsSource = BrowserDataKindList;
        }

        private async void ClearBrowsingData(object sender, RoutedEventArgs e)
        {
            foreach (var item in ClearBrowsingDataButton.ItemsSource as List<BrowserDataKind>)
            {
                if (item.IsChecked)
                {
                    await SettingsPage.webView2.CoreWebView2.Profile.ClearBrowsingDataAsync(item.Kind);
                }
            }
            ClearBrowsingDataButton.Description = "已清理选择的项目";
        }
    }
}

When I run my Application by Visual Studio with both Debug / Release mode, It worked as expected. But When I packaged it and run it, the SettingsExpander doesn't work as expected. It was crashed and exited.

I try to use the App.UnhandledException to get the error, and I get the Error text:

System.Runtime.InteropServices.COMException (0x800F1000): 没有检测到已安装的组件。

Cannot apply a Style with TargetType 'CommunityToolkit.WinUI.Controls.SettingsCard' to an object of type 'Microsoft.UI.Xaml.Controls.CheckBox'.
   at WinRT.ExceptionHelpers.<ThrowExceptionForHR>g__Throw|39_0(Int32 hr)
   at ABI.Microsoft.UI.Xaml.IFrameworkElementMethods.set_Style(IObjectReference _obj, Style value)
   at Microsoft.UI.Xaml.FrameworkElement.set_Style(Style value)
   at CommunityToolkit.WinUI.Controls.SettingsExpander.ItemsRepeater_ElementPrepared(ItemsRepeater sender, ItemsRepeaterElementPreparedEventArgs args)
   at WinRT._EventSource_global__Windows_Foundation_TypedEventHandler_global__Microsoft_UI_Xaml_Controls_ItemsRepeater__global__Microsoft_UI_Xaml_Controls_ItemsRepeaterElementPreparedEventArgs_.EventState.<GetEventInvoke>b__1_0(ItemsRepeater sender, ItemsRepeaterElementPreparedEventArgs args)
   at ABI.Windows.Foundation.TypedEventHandler`2.Do_Abi_Invoke[TSenderAbi,TResultAbi](Void* thisPtr, TSenderAbi sender, TResultAbi args)

When I look at the offical website https://learn.microsoft.com/zh-cn/dotnet/communitytoolkit/windows/settingscontrols/settingsexpander , I find the similar way of using the SettingsExpander, So I think maybe It's a bug.

Steps to reproduce

1. Use Visual Studio 2022 Community to create a Blank App, Packaged (WinUI3 in Desktop), and use NuGet to add the SettingsControls.
2. Copy the Xaml and C# code to replace what is provided by default in the MainWindow.xaml and MainWindow.xaml.cs 
3. And Run it, don't use it in VS2022, open the StartMenu, find it and open it.
4. Maybe you can get the same error.

Expected behavior

The SettingsExpander runs as excepted.

Screenshots

No response

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

Windows 11 24H2 (Build 26090.112)

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

2022, Preview

Visual Studio Build Number

17.10.0 Preview 2.0

Device form factor

Desktop

Additional context

No response

Help us help you

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

[niels9001]

@wtcpython You are using a CheckBox in the DataTemplate, where as the SettingsExpander is expecting a SettingsCard.

See binding samples here:

Windows/components/SettingsControls/samples/SettingsExpanderItemsSourceSample.xaml

Line 26 in 426b887

<controls:SettingsCard Description="{x:Bind Info}"

So you'd need to change your XAML to this:

<controls:SettingsExpander.ItemTemplate>
   <DataTemplate x:DataType="local:BrowserDataKind">
      <controls:SettingsCard>
            <CheckBox Content="{x:Bind Name}" IsChecked="{x:Bind IsChecked, Mode=TwoWay}" Margin="20,5,0,5"/>
      <controls:SettingsCard>
  </DataTemplate>
</controls:SettingsExpander.ItemTemplate>

Related to #302 and #199

[wtcpython]

@niels9001 Thank you very much!

[RobertK66]

you also have related: #191 ( still open as 'documentation' issue 😄 )
@niels9001 : any new plans there (or with #199 )?