Regression in 8.2: ColorPicker resets inital value

[Marv51]

Describe the bug

This is very likely a regression from #579.

I use a ColorPickerButton in my app, and TwoWay x:Bind that to a property. The value of that property is not reflected in the ColorPicker that opens when the user clicks the ColorPickerButton, instead the x:Bind updates the property to transparent.

After I open the picker once and choose a color, it seems to work properly on subsequent opens — only the first one is affected.

Steps to reproduce

In a blank WinUI/WinAppSDK 1.7 project, add a Frame and an empty page.

Modify the page to this:

<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="App9.Main"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <controls:ColorPickerButton SelectedColor="{x:Bind MySelectedColor, Mode=TwoWay}" />
    </Grid>
</Page>

Code behind:

public sealed partial class Main : Page, INotifyPropertyChanged
{
    private Color _mySelectedColor = Colors.Blue;

    public Color MySelectedColor
    {
        get => _mySelectedColor;
        set
        {
            if (_mySelectedColor != value)
            {
                _mySelectedColor = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(MySelectedColor)));
            }
        }
    }

    public Main()
    {
        this.InitializeComponent();
    }

    public event PropertyChangedEventHandler? PropertyChanged;
}

Expected behavior

I expect clicking the ColorPickerButton not to modify the value of the bound property. If the user dismisses the ColorPicker, then the value of the property should still be the same as if nothing happened.

Setting the value to transparent, makes just clicking the ColorPickerButton a 'destructive' operation.

Screenshots

No response

Code Platform

• [ ] UWP
• [x] 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)
• [x] Other (specify)

Other Windows Build number

26100

App minimum and target SDK version

• [x] Windows 10, version 1809 (Build 17763)
• [ ] Windows 10, version 1903 (Build 18362)
• [ ] Windows 10, version 1909 (Build 18363)
• [x] 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

Visual Studio Build Number

Version 17.13.6

Device form factor

Desktop

Additional context

No response

Help us help you

No, I'm unable to contribute a solution.

[Marv51]

I created this issue from the ColorPickerButton perspective, but looking into this a bit more ColorPicker alone does not work either.

I modified my page to also include a plain ColorPicker, but left the code behind the same:

<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="App9.Main"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <controls:ColorPickerButton SelectedColor="{x:Bind MySelectedColor, Mode=TwoWay}" />


        <controls:ColorPicker Color="{x:Bind MySelectedColor, Mode=TwoWay}" />
    </Grid>
</Page>

When you launch this app, you notice that the ColorPicker does not show the blue color that the property is initialized with. Instead transparent is selected.

[Marv51]

A couple months have gone by since the release of 8.2. For me this is a pretty common use-case for the ColorPicker(-Button) component. Does anybody who is familiar with how this component works have capacity to look at this issue?

I can look into it and suggest a fix, but I do not understand what behavior was even fixed in #579, I've been using ColorPicker for many years and it always worked. Can that change simply be reverted?

[hexawyz]

IIRC, the way I fixed this in my program after going crazy, was by not using the ColorPickerButton, together with custom binding code to work around the problem. Anyway, I used an AppBarButton, which fitted my use case better, so in the end I also just got something better looking 🤷‍♂️

[AndrewKeepCoding]

The issue here is that the palette GridView (the second option in the Segmented control) is setting its selection even when it's hidden and no color is selected. I'll push a PR to address this later.