Bind background color to boxview in attached behavior

Question

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);  
                   }  

Answer 1

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.