title: Xamarin Forms CollectionView doesn't show properly
body: <p>I have a problem. I created a CollectionView with a custom ViewPage to place a grid with rowspan. The ItemSource is set using a ViewModel. Now when I scroll in the CollectionView the rows are randomly placed on the screen, even inside each other.</p>
  
  <p>Here is my xaml code:</p>
  
  <pre><code>&lt;CollectionView ItemsSource="{Binding agentOrderList}" Margin="5,0,5,0" HeightRequest="450"&gt;
      &lt;CollectionView.ItemsLayout&gt;
          &lt;LinearItemsLayout Orientation="Vertical" ItemSpacing="0"/&gt;
      &lt;/CollectionView.ItemsLayout&gt;
  
      &lt;CollectionView.ItemTemplate&gt;
          &lt;DataTemplate&gt;
              &lt;local:OrderView BindingContext="{Binding }"/&gt;
          &lt;/DataTemplate&gt;
      &lt;/CollectionView.ItemTemplate&gt;
  &lt;/CollectionView&gt;
  </code></pre>
  
  <p>Here is the ViewModel:</p>
  
  <pre><code>public class VM_AgentsPage : INotifyPropertyChanged
  {
      public event PropertyChangedEventHandler PropertyChanged;
      protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
      {
          PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
      }
  
      private ObservableCollection&lt;OrderBundle&gt; _agentOrderList;
      public ObservableCollection&lt;OrderBundle&gt; agentOrderList
      {
          get
          {
              return _agentOrderList;
          }
          set
          {
              if (_agentOrderList != value)
              {
                  _agentOrderList = value;
                  OnPropertyChanged();
              }
          }
      }
  
  
      public VM_AgentsPage()
      {
          agentOrderList = new ObservableCollection&lt;OrderBundle&gt;();
          LoadAgentOrders_Handler();
      }
  
  
      public Task LoadAgentOrders_Handler()
      {
          return LoadAgentOrders();
      }
      private async Task LoadAgentOrders()
      {
          IsRefreshingAgentOrders = true;
  
          App.AgentOrderList = await App.RestService.GetAgentOrders(App.AgentId);
  
          ObservableCollection&lt;OrderBundle&gt; tempAgentOrderList = new ObservableCollection&lt;OrderBundle&gt;();
  
          foreach (OrderBundle orderBundle in App.AgentOrderList)
          {
              tempAgentOrderList.Add(orderBundle);
          }
  
          agentOrderList = tempAgentOrderList;
  
          IsRefreshingAgentOrders = false;
      }
  }
  </code></pre>
  
  <p>And finally the OrderView.xaml.cs:</p>
  
  <pre><code>public partial class OrderView : ContentView
  {
      Grid grid;
  
      public OrderView()
      {
          InitializeComponent();
  
  
          grid = new Grid
          {
              ColumnDefinitions =
          {
              new ColumnDefinition{ Width = new GridLength(1, GridUnitType.Star)},
              new ColumnDefinition{ Width = new GridLength(1, GridUnitType.Star) },
              new ColumnDefinition{ Width = new GridLength(1, GridUnitType.Star) },
              new ColumnDefinition{ Width = new GridLength(1, GridUnitType.Star) },
              new ColumnDefinition{ Width = new GridLength(1, GridUnitType.Star) }
          }
          };
  
          grid.RowSpacing = 0;
  
          this.Content = grid;
  
  
          this.BindingContextChanged += View1_BindingContextChanged;
      }
  
      private void View1_BindingContextChanged(object sender, EventArgs e)
      {
          var obj = this.BindingContext as OrderBundles;
  
          if (obj != null)
          {
              List&lt;Trade&gt; list = obj.Trades;
  
              for(int i = 0; i &lt; list.Count; i++)
              {
  
                  grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20) });
  
                  Trade trade = list[i];
                  grid.Children.Add(new Label
                  {
                      Text = trade.Date
                  }, 0, i);
                  grid.Children.Add(new Label
                  {
                      Text = trade.Action
                  }, 1, i);
                  grid.Children.Add(new Label
                  {
                      Text = trade.Coin
                  }, 2, i);
                  grid.Children.Add(new Label
                  {
                      Text = trade.Price.ToString()
                  }, 3, i);              
              }
  
              Label label = new Label
              {
                  Text = list[0].ProfitUSDT,
                  TextColor = Color.Green ,
                  VerticalTextAlignment = TextAlignment.Center
              };
  
              grid.Children.Add(label, 4, 0);
  
  
              Grid.SetRowSpan(label, list.Count);
          }
      }
  }
  </code></pre>
  
  <p>This is what it looks like in the beginning:
  <a href="https://i.stack.imgur.com/xABd9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xABd9.jpg" alt="enter image description here"></a></p>
  
  <p>But when I scroll it starts looking like this:
  <a href="https://i.stack.imgur.com/AhhPC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AhhPC.jpg" alt="enter image description here"></a></p>
  
  <p>What is causing this?</p>