UWP ColorPickerButton in UWP DataGrid cell won't be selected

Question

I use DataGrid and ColorPickerButton from here

xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls

When I click on the ColorPickerButton it keeps open and no color property changed.

How to fix it? Thank you!

XAML

 <toolkit:DataGrid    
                    x:Name="dataGridLayers"
                    Margin="0,0,0,0"
                    VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                    HorizontalScrollBarVisibility="Visible"
                    VerticalScrollBarVisibility="Visible"
                    AlternatingRowBackground="Transparent" 
                    AreRowDetailsFrozen="False"
                    AreRowGroupHeadersFrozen="True"
                    AutoGenerateColumns="False"
                    CanUserSortColumns="False"
                    CanUserReorderColumns="True"
                    RowGroupHeaderPropertyNameAlternative=""
                    CanUserResizeColumns="True"
                    ColumnHeaderHeight="32"
                    MaxColumnWidth="400"
                    FrozenColumnCount="0"
                    GridLinesVisibility="None"
                    HeadersVisibility="Column"
                    IsReadOnly="False" 
                    Height="400"
                    RowDetailsVisibilityMode="Collapsed"
                    SelectionMode="Single">
                                <toolkit:DataGrid.Columns>
                                    <toolkit:DataGridTextColumn Header="Name" Binding="{Binding LayerName}"  Tag="LayerName" IsReadOnly="True" />
                                    <toolkit:DataGridCheckBoxColumn IsThreeState="False"  Header="Включить в карту" Binding="{Binding LayerVisibility,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  Tag="LayerVisibility"  />
                                    <toolkit:DataGridTextColumn Header="Stroke" Binding="{Binding LayerStroke, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"   Tag="LayerStroke" />
                                    <toolkit:DataGridTemplateColumn  Header="Color"  Tag="LayerColor">
                                        <toolkit:DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate >
                                                <toolkit:ColorPickerButton SelectedColor="{Binding LayerColor, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                                            </DataTemplate>
                                        </toolkit:DataGridTemplateColumn.CellTemplate>
                                    </toolkit:DataGridTemplateColumn>
                                </toolkit:DataGrid.Columns>
                            </toolkit:DataGrid>
                     

C#

 public abstract class EtherMapLayerBase : INotifyPropertyChanged
    {
        public Windows.UI.Color _layerColor { get; set; }
        public Windows.UI.Color LayerColor
        {
            get
            {
                return _layerColor;
            }

            set
            {
                if (_layerColor != value)
                {
                    _layerColor = value;
                    OnPropertyChanged();
                }
            }
        }


        public int _layerStroke { get; set; }
        public int LayerStroke
        {
            get
            {
                return _layerStroke;
            }

            set
            {
                if (_layerStroke != value)
                {
                    _layerStroke = value;
                    OnPropertyChanged();
                }
            }
        }


        public string _layerName { get; set; }
        public string LayerName
        {
            get
            {
                return _layerName;
            }

            set
            {
                if (_layerName != value)
                {
                    _layerName = value;
                    OnPropertyChanged();
                }
            }
        }


        public bool _layerVisibility { get; set; }
        public bool LayerVisibility
        {
            get
            {
                return _layerVisibility;
            }

            set
            {
                if (_layerVisibility != value)
                {
                    _layerVisibility = value;
                    OnPropertyChanged();
                }
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;

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

        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)
        {
            if (object.Equals(storage, value))
            {
                return false;
            }
            else
            {
                storage = value;
                OnPropertyChanged(propertyName);
                return true;
            }
        }
    }

    public class EtherMapLayerView : EtherMapLayerBase
    {
        public EtherMapLayerView()
        {
            LayerStroke = 1;
            LayerColor = Colors.Black; // using Windows.UI;
            LayerVisibility = true;
        }
    }

Update #1 It seems like a bug...

So when you select color in the first TAB nothing happen but if do the same on others TABs it works and color could be selected successfully.

Answer 1

When I click on the ColorPickerButton it keeps open and no color property changed.

The problem is you have set the base color as Black LayerColor = Colors.Black, and that will make the color wheel can't be selected.

Please try to set the default color as Transparent, and it will work as expect.

LayerColor = Colors.Transparent