x:Bind on a ResourceDictionary with code behind results in error for WASM

[andrewkdci]

In WinUI and UWP, you can create a resource dictionary with a code-behind class, which then allows you to use x:Bind inside that resource dictionary. This works fine for WinUI when using Uno, but when I try this with a WASM head I get the following error:

1>CSC : error UXAML0001: Unable to find x:Class on the top level element

Does anyone know how to resolve this error? Or is it just impossible to use x:Bind from a Resource Dictionary for a WASM head?

As an example, I created a small project to demonstrate this.

App.xaml:

<Application
    x:Class="UnoResourceCodeBehind.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UnoResourceCodeBehind">
	
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Add resource dictionaries here -->
                <local:ResourceDictionary1 xmlns="using:UnoResourceCodeBehind"/>
            </ResourceDictionary.MergedDictionaries>
            <!-- Add resources here -->
        </ResourceDictionary>
    </Application.Resources>

</Application>

MainPage.xaml:

<Page
    x:Class="UnoResourceCodeBehind.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UnoResourceCodeBehind"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"    
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <local:MyControl Style="{StaticResource MyStyle}"/>
    </Grid>
</Page>

MyControl.cs:

using Microsoft.UI.Xaml.Controls;
using System;
using System.Collections.Generic;
using System.Text;

namespace UnoResourceCodeBehind
{
    internal class MyControl : Control
    {
        public string GetText() => "text from control";
    }
}

ResourceDictionary1.xaml:

<ResourceDictionary x:Class="UnoResourceCodeBehind.ResourceDictionary1"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="using:UnoResourceCodeBehind">

    <Style x:Name="MyStyle" TargetType="local:MyControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MyControl">
                    <Grid>
                        <TextBlock Text="{x:Bind GetText()}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

ResourceDictionary1.xaml.cs:

using Microsoft.UI.Xaml;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace UnoResourceCodeBehind
{
    partial class ResourceDictionary1 : ResourceDictionary
    {
        public ResourceDictionary1()
        {
            this.InitializeComponent();
        }
    }
}

This is the build error I get when building for WASM:

1>CSC : error UXAML0001: Unable to find x:Class on the top level element
1>C:\Users\user1\source\repos\UnoResourceCodeBehind\UnoResourceCodeBehind\UnoResourceCodeBehind.Shared\ResourceDictionary1.xaml(10,22,10,22): error UXAML0001: An error was found in Grid
1>CSC : error UXAML0001: Processing failed for file C:\Users\user1\source\repos\UnoResourceCodeBehind\UnoResourceCodeBehind\UnoResourceCodeBehind.Shared\ResourceDictionary1.xaml (Uno.UI.SourceGenerators.XamlGenerator.XamlParsingException: An error was found in Grid ---> System.Exception: Unable to find x:Class on the top level element
1>C:\Users\user1\source\repos\UnoResourceCodeBehind\UnoResourceCodeBehind\UnoResourceCodeBehind.Shared\MainPage.xaml.cs(27,18,27,37): error CS1061: 'MainPage' does not contain a definition for 'InitializeComponent' and no accessible extension method 'InitializeComponent' accepting a first argument of type 'MainPage' could be found (are you missing a using directive or an assembly reference?)
1>C:\Users\user1\source\repos\UnoResourceCodeBehind\UnoResourceCodeBehind\UnoResourceCodeBehind.Shared\ResourceDictionary1.xaml.cs(14,18,14,37): error CS1061: 'ResourceDictionary1' does not contain a definition for 'InitializeComponent' and no accessible extension method 'InitializeComponent' accepting a first argument of type 'ResourceDictionary1' could be found (are you missing a using directive or an assembly reference?)
1>C:\Users\user1\source\repos\UnoResourceCodeBehind\UnoResourceCodeBehind\UnoResourceCodeBehind.Shared\App.xaml.cs(26,18,26,37): error CS1061: 'App' does not contain a definition for 'InitializeComponent' and no accessible extension method 'InitializeComponent' accepting a first argument of type 'App' could be found (are you missing a using directive or an assembly reference?)
1>Done building project "UnoResourceCodeBehind.Wasm.csproj" -- FAILED.

My project is targeting .NET 7, btw.

[FrozDark]

Duplicate of #12495
Uno doesn't support x:Bind in a resource dictionary

[jeromelaban]

This is actually a bit different in that context, because this is an x:Bind inside a DataTemplate and should be working. Let's track in #13550.

[RSReswin]

Binding will support Inside ResourceDictionary ?

[RSReswin]

<Style x:Key="LikeButton_ToggleButton" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid x:Name="RootGrid">
                        <Border Width="55"
                                Height="30"
                                Background="{StaticResource CustomWhite}"
                                CornerRadius="25,0,0,25">

                            <StackPanel Orientation="Horizontal"
                                        Spacing="5"
                                        HorizontalAlignment="Left"
                                        Margin="8,0,0,0">

                                <Path x:Name="RootPath"
                                      Data="{StaticResource OutlineLike}"
                                      Fill="Black"
                                      Width="15"
                                      Stretch="Uniform"/>

                                <TextBlock Text="{Binding _viewMode.VideoStatistics.EngagementStatistics.Likes, Mode=OneWay}"
                                           FontSize="10"
                                           FontFamily="{StaticResource InterRegular}"
                                           Foreground="Black"
                                           VerticalAlignment="Center"/>
                            </StackPanel>
                        </Border>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommandState">
                                <VisualState x:Name="Normal">
                                    <VisualState.Setters>
                                        <Setter Target="RootPath.Fill" Value="Black"/>
                                        <Setter Target="RootPath.Data" Value="{StaticResource OutlineLike}"/>
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Checked">
                                    <VisualState.Setters>
                                        <Setter Target="RootPath.Fill" Value="Blue"/>
                                        <Setter Target="RootPath.Data" Value="{StaticResource FillLike}"/>
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="UnChecked">
                                    <VisualState.Setters>
                                        <Setter Target="RootPath.Fill" Value="Black"/>
                                        <Setter Target="RootPath.Data" Value="{StaticResource OutlineLike}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

[jeromelaban]

@RSReswin Would you mind opening another discussion with a repro of what you posted? Bindings are supported inside styles.