[Preview 4] x:Bind does not work in a custom MenuFlyoutItem

[lhak]

Describe the bug

x:Bind does not work in a custom MenuFlyoutItem in winui 3, preview 4 while it does work in XAML islands

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Create the following custom MenuFlyoutItem and place it into a MenuFlyout

<local:MenuFlyoutCustomItem>
                       <local:MenuFlyoutCustomItem.Template>
                            <ControlTemplate TargetType="local:MenuFlyoutCustomItem">
                                <StackPanel Orientation="Horizontal">
                                    <Slider Minimum="0" Maximum="100" Width="150" Value="{x:Bind Value, Mode=TwoWay}" />
                                    <TextBlock Text="{x:Bind Value, Mode=OneWay}"/>
                                </StackPanel>
                            </ControlTemplate>
                        </local:MenuFlyoutCustomItem.Template>
                    </local:MenuFlyoutCustomItem>

   public class MenuFlyoutCustomItem : MenuFlyoutItem, INotifyPropertyChanged
    {
        public MenuFlyoutCustomItem()
        {
            this.DataContext = this;
        }

        public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(MenuFlyoutCustomItem), new PropertyMetadata(0));

        public int Value
        {
            get { return (int)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); OnPropertyChanged(); }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

2. Observe that the TextBlock value does not update when the slider is moved
3. Change x:Bind to Binding -> it works

Expected behavior

Works like in XAML islands + .net core 3.1

Screenshots

Version Info

NuGet package version:

[Microsoft.WinUI 3.0.0-preview4.210210.4]

Windows app type:

UWP	Win32
	Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
October 2020 Update (19042)	Yes
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

[StephenLPeters]

@lhak Same question here, do you know if this is a preview 4 regression from preview 3?

[lhak]

I could not test the actual code in the application with preview 3 due to a bug that has now been fixed. However, the repro code above shows that this issue is also present in preview 3.

[MikeHillberg]

Unfortunately I'm not able to repro. As I move the slider the TextBlock stays up to date.

[lhak]

@MikeHillberg It seems that this issue only occurs if there is another UI element on that page that also uses x:Bind (content is a string property of the page):

<Button Content="{Binding content}">
      <Button.Flyout>
        <MenuFlyout>
          <local:MenuFlyoutCustomItem >
            <local:MenuFlyoutCustomItem.Template>
              <ControlTemplate TargetType="local:MenuFlyoutCustomItem">
                <StackPanel Orientation="Horizontal">
                  <Slider Minimum="0" Maximum="100" Width="150" Value="{x:Bind Value, Mode=TwoWay}" />
                  <TextBlock Text="{x:Bind Value, Mode=OneWay}"/>
                </StackPanel>
              </ControlTemplate>
            </local:MenuFlyoutCustomItem.Template>
          </local:MenuFlyoutCustomItem>
        </MenuFlyout>
      </Button.Flyout>
    </Button>

If Binding is changed to x:Bind in the first line, the TextBlock will be empty. Same code works fine in a non-winui 3 UWP project.

[JeanRoca]

@RealTommyKlein could you confirm if this is expected behavior?

[RealTommyKlein]

Thanks for the report - this will be fixed in the Project Reunion 0.8 release. This is caused by using x:Bind in a ControlTemplate when x:Bind is also used in the parent namescope. As a workaround, you can isolate the ControlTemplate in its own ResourceDictionary file that also has its own code-behind (you can use the "Blank Page (WinUI)" template and change the base classes to be ResourceDictionary instead of Page). Example of what the rewritten code would look like:

New TemplateDictionary.xaml file that contains your ControlTemplate, based on the "Blank Page (WinUI)" template:

<ResourceDictionary
    x:Class="WinUI3Preview4CSharpDesktop.TemplateDictionary"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3Preview4CSharpDesktop"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <ControlTemplate TargetType="local:MenuFlyoutCustomItem" x:Key="controlTemplate">
        <StackPanel Orientation="Horizontal">
            <Slider Minimum="0" Maximum="100" Width="150" Value="{x:Bind Value, Mode=TwoWay}" />
            <TextBlock Text="{x:Bind Value, Mode=OneWay}"/>
        </StackPanel>
    </ControlTemplate>
</ResourceDictionary>

In TemplateDictionary.xaml.cs that was created from the blank page template, just change TemplateDictionary's base class from Page to ResourceDictionary.

Then modify your original .xaml to create an instance of the new TemplateDictionary resource dictionary and reference your ControlTemplate from it using StaticResource:

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
         <StackPanel.Resources>
            <local:TemplateDictionary />
        </StackPanel.Resources>
        <Button Content="{x:Bind content}">
                <Button.Flyout>
                <MenuFlyout>
                    <local:MenuFlyoutCustomItem Template="{StaticResource controlTemplate}"/>
                </MenuFlyout>
            </Button.Flyout>
        </Button>
    </StackPanel>

[anawishnoff]

Hi @lhak, you should see a fix for this bug in the upcoming WinUI 3/Project Reunion 0.8 Preview, which you can expect soon. Thanks for filing this!

[lhak]

Can confirm that this is fixed in 0.8. Thanks!