How can I change BackgroundColor of CustomLabel in Selected Action State Event CreateCustomLableNavigationState method Similar to ListviewItemSelection Event

Question

            

                

                    

                        

                                

                                

                                    

									

									

                                    

                                

                                        

                                            

                                                

                                            

                                            

                                                

                                            

                                            

                                                

                                            

                                            

                                                

                                            

                                        

                                    

                                    

                                

                                    

                                    

                                

                                    

                                

                                    

                                

                                    

                                    

                                

                        

                    

                

            

			

			        private HardKeyNavigationState CreateCustomLableNavigationState(View view, int rowIndex, int columnIndex, ObservableCollection itemList_obj)

    {

        // creates new navigation state for list item

        HardKeyNavigationState navigationState = new HardKeyNavigationState($"Cell-Row{rowIndex}-Column{columnIndex}")

        {

            Selected = () =>

            {

                Device.BeginInvokeOnMainThread(() =>

                {

                    CustomLable customLabel = view as CustomLable;

                    int r = rowIndex;

                    int c = columnIndex;

                    CustomLable targetLabel = FindCustomLable(rowIndex, columnIndex);

                    if (targetLabel != null)

                    {

                    }

;

                });

            },

            Unselected = () =>

            {

                Device.BeginInvokeOnMainThread(() =>

                {

                    CustomLable targetLabel = FindCustomLable(rowIndex, columnIndex);

                    if (targetLabel != null)

                    {

                    }

                });

            }

        };

        // handling of 'Enter' hard key pressed for this state

        navigationState.EnterPressed = () =>

        {

            Listitemlongpress(view as CustomLable, null);

            return navigationState;

        };

        return navigationState;

    }

    private CustomLable FindCustomLable(int classId, int columnIndex)

    {

        View listViewItem = (listView.TemplatedItems[classId] as ViewCell).View;

        Grid grid = listViewItem as Grid;

        foreach (var child in grid.Children)

        {

            if (child is CustomLable customLabel)

            {

                if (customLabel.ClassId == classId.ToString() && customLabel.ColumnIndex == columnIndex)

                {

                    return customLabel;

                }

            }

        }

        return null;

    }

	

	    public class DetailPageModel : BaseViewModel

{

    private int columnIndex;

    public int Index { get; set; }

    public string MeasurementLable { get; set; }

    public string MeasurementRange { get; set; }

    public string Value { get; set; }

    public string Min { get; set; }

    public string Max { get; set; }

    public string Avg { get; set; }

    public string Unit { get; set; }

    public string ParameterStatus { get; set; }

    public bool IsShowMinMaxAvg { get; set; }

    public int ColumnIndex

    {

        get

        {

            return columnIndex;

        }

        set

        {

            columnIndex = value;

            OnPropertyChanged();

        }

    }

Answer

Hello,

You can do this with data binding and ValueConverter. Please refer to the steps and documentation below.

Step 1. Add a bool attribute to the model class to mark whether this Item is selected or not.


public class Item : INotifyPropertyChanged

{

    public string Id { get; set; }

    public string Text { get; set; }

    public string Description { get; set; }

 

    private bool isSelected { get; set; }

 

    public bool IsSelected

    {

        get => isSelected;

        set

        {

            isSelected = value;

            OnPropertyChanged();

        }

    }

    public event PropertyChangedEventHandler PropertyChanged;

 

    public void OnPropertyChanged([CallerMemberName] string name = "") =>

   PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

}

Step 2. Implement ValueConverter to return different colors by whether the item is selected or not.


    public class BoolToBrushConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            if ((bool)value == true)

            {

                return Color.Red;

            }

            else

            {

                return Color.Green;

            }

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            return (bool)value ? Color.Red : Color.Green;

        }

    }

Step 3. Setting the binding for a Label in ListView

Step 4. Since the notification feature was previously implemented in the Item, you can have the ValueConverter automatically change the color when selected and unselected by simply changing the value of IsSelected.


private void ItemsListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)

{

    var item = e.SelectedItem as Item;

    if (item != null)

    {

        item.IsSelected = true;

    }

}

Binding value converters.

Xamarin support ended on May 1, 2024 for all Xamarin SDKs including Xamarin.Forms. For more information, please check: Xamarin official support policy | .NET (microsoft.com). We will recommend you upgrade Xamarin projects to . NET MAUI, please see the Upgrade from Xamarin to .NET & .NET MAUI documentation.

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

How can I change BackgroundColor of CustomLabel in Selected Action State Event CreateCustomLableNavigationState method Similar to ListviewItemSelection Event

1 answer