Bind background color to boxview in attached behavior

Sebastian Schabbach 1 Reputation point
2022-11-24T19:24:07.383+00:00

Hi,

i tried to bind some view models to an grid to create an n x m matrix of boxview controls, which are bound to my view model. The initial state is displayed correctly, but if i change the state of a viewmodel, the change is not reflected to the ui. Anyone here able to help?

   public class TetrisBoxCellModel : BindableBase  
           {  
               private TetrisState _state;  
         
               public TetrisState State  
               {  
                   get => _state;  
                   set => SetProperty(ref _state, value, nameof(State));  
               }  
           }  
     
   var items = GetTetrisCellsItemSource(control);  
               for (int i = 0; i < rows; i++)  
                   for (int j = 0; j < columns; j++)  
                   {  
                       var itemsEnumerator = items.GetEnumerator();  
                       itemsEnumerator.MoveNext();  
     
                       var boxView = new BoxView();  
                       boxView.BindingContext = itemsEnumerator.Current;  
                       var backgroundColorBinding = new Binding("State", BindingMode.TwoWay, new CellStateToBackgroundColorConverter());  
                         
                       boxView.SetBinding(VisualElement.BackgroundColorProperty,  
                           backgroundColorBinding);  
     
                       control.Children.Add(boxView, i, j);  
                   }  
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,325 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 72,011 Reputation points Microsoft Vendor
    2022-11-29T05:58:56.063+00:00

    Hello,

    You change the State by Items.ElementAt(row * Columns + col).State = TetrisState.Locked;, but you set the BindingContext by boxView.BindingContext = itemsEnumerator.Current;. there are different DataSource. So, you cannot change the background color at the runtime.

    Firstly, we can create ObservableCollection<TetrisBoxCellModel>

       //I create 3 Rows and 3 Columns Gird.  
        int Rows=3;  
        int Columns=3;  
         
       ObservableCollection<TetrisBoxCellModel> Items = new System.Collections.ObjectModel.ObservableCollection<TetrisBoxCellModel>();  
         
       //I add 9 records to Items for testing, you can add remaining 6 records.   
        Items.Add(new TetrisBoxCellModel() { State = TetrisState.Released });  
       Items.Add(new TetrisBoxCellModel() { State = TetrisState.Released });  
       Items.Add(new TetrisBoxCellModel() { State = TetrisState.Used });  
                    
       for (int i = 0; i < Rows; i++)  
          for (int j = 0; j < Columns; j++)  
             {  
                  var boxView = new BoxView();  
                  //set the binding with current index.  
                  boxView.BindingContext = Items[i * Columns + j];  
                  var backgroundColorBinding = new Binding("State", BindingMode.TwoWay, new CellStateToBackgroundColorConverter());  
                  boxView.SetBinding(VisualElement.BackgroundColorProperty,  
                  backgroundColorBinding);  
                   control.Children.Add(boxView, i, j);  
             }  
       }  
    

    When you need to change the value of the State in the ExecuteStartCommand method, you can set it with Items[row * Columns + col].State = TetrisState.Locked;

    You can also try to use this XAML data binding diagnostics - Visual Studio (Windows) tools in Visual Studio to detect and resolve data binding errors in XAML projects.

    Best Regards,

    Leon Lu


    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.