Xamarin.forms add dynamic view cell in behind code with stack layout and grid

Question

I am trying to create a dynamic view cell shown below and add in to the tableview. However i somehow can't seemed to display the data when using xaml.cs. I cannot create a grid inside of the view cell with the stack layout property. Below are my codes which i had tried. Someone please help me i am stuck and i can't seem to find the answers to it on google:(

Below is the codes which i wrote on the xaml form :

 <ViewCell x:Name="viewCellM">
    <StackLayout Orientation="Horizontal">
        <Grid>
            <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="10">
                 </ColumnDefinition>
                 <ColumnDefinition Width="250">
                 </ColumnDefinition>
                 <ColumnDefinition Width="*">
                 </ColumnDefinition>
             </Grid.ColumnDefinitions>
             <Label x:Name="M" Text="Block M" YAlign="Center" Grid.Row="0" Grid.Column="1"></Label>
             <Image x:Name="ImageM" Source="check_mark.jpg" Grid.Row="0" Grid.Column="2"></Image>
          </Grid>
     </StackLayout>
 </ViewCell>

Below are the codes which i had tried to work on but it does not display anything, hope someone can guide me on this:

 for (int m = 0; m < filterList.Count; m++) 
        {
            Grid gridAdd = new Grid
            {
                ColumnDefinitions = 
                {
                    new ColumnDefinition { Width = new GridLength(10,GridUnitType.Absolute)},
                    new ColumnDefinition { Width = new GridLength(250,GridUnitType.Absolute)},
                    new ColumnDefinition { Width = new GridLength(1,GridUnitType.Star)},
                }
            };

            gridAdd.Children.Add (new Label { TextColor = Color.Black, Text = "Block L Level 2" }, 1, 0);

            blockSection.Add(new ViewCell()
            {
                    View = new StackLayout {
                        Orientation = StackOrientation.Horizontal,

                        Children = gridAdd
                    }
            });
                ForceLayout();
        }
    }

Help would be much appreciated:)

Answer 1

I'm not exactly sure what your code is trying to achieve, but I assume you want a list of all your filterList items to show up in the UI?

Here's a rough outline how to do that.

First make your filterList an ObservableCollection<FilterItem> and FilterItem should implement INotifyPropertyChanged

public class FilterItem: INotifyPropertyChanged{

   public event PropertyChangedEventHandler PropertyChanged;

   bool _IsChecked
   public bool IsChecked{
     get { return _IsChecked;}
     set { SetProperty(ref _IsChecked, value);}
   }

   bool _BlockM
   public bool BlockM{
     get { return _BlockM;}
     set { SetProperty(ref _BlockM, value);}
   } 

   private void SetProperty<T>(ref T backingField, T newValue, [CallerMemberName] string propertyName = null){
     if (backingField!=newValue){
       backingField = newValue;

       if (PropertyChanged!=null)
         PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
     }
   }
}

Then in XAML do

...

<ListView x:Name="lvFilter">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell> 
        <Grid>
            <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="10">
                 </ColumnDefinition>
                 <ColumnDefinition Width="250">
                 </ColumnDefinition>
                 <ColumnDefinition Width="*">
                 </ColumnDefinition>
             </Grid.ColumnDefinitions> 
             <Image Source="check_mark.jpg" Grid.Column="0" IsVisible="{Binding IsChecked, Converter={...}}"/>
             <Label Text="Block M" YAlign="Center" Grid.Column="1"/>
             <Label Text="{Binding BlockM}" YAlign="Center" Grid.Column="2"/>
          </Grid> 
      </ViewCell>
    </DataTemplate>
 </ListView.ItemTemplate>
</ListView>

In the code-behind you can set the ItemsSource:

public class MyView: ..

... 
   private readonly ObservableCollection<FilterItem> filterList = new ...;
...

  public MyView(){
     InitializeComponent();
     lvFilter.ItemsSource = filterList;
  }
}