CheckBox create a string from the values of the selected objects

Issue

I have a collection view with a checkbox. It looks like the following: [Image][PetName][Checkbox]

I want to create a string with all the names of the pets which have been selected the pass this value through a function.

I have tried the following code but I am getting object reference is null in selectedPets.Add(ob) I'm sure Im proably going the wrong way with this but I am new to coding.

 public List<PetProfile> selectedPets;

private void CheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        var checkbox = sender as CheckBox;
        
        var ob = checkbox.BindingContext as PetProfile;
      
        if (ob != null)
        {
            selectedPets.Add(ob);
        }
     
    }



private string CreatePetName()
    {
        var stringBuilder = new StringBuilder();
        var listlenght = selectedPets.Count;
        
        foreach (var pet in selectedPets)
        {
            if (selectedPets.Count == 0)
            {
                stringBuilder.Append(pet.PetName);
            }
            else if (listlenght > 0 && pet == selectedPets[0] )
            {
                stringBuilder.Append(pet.PetName + " ");
            }
            else if (pet == selectedPets[listlenght])
            {
                stringBuilder.Append(" " + pet.PetName );
            }
            else
            {
                stringBuilder.Append(" " + pet.PetName + " ");
            }               
        }
        return stringBuilder.ToString();
    }


private async void SubmitBtn_Clicked(object sender, EventArgs e)
    {
        var Petnames = CreatePetName();                               
    }

XAML:

<CollectionView  x:Name="petCollectionView"  ItemsSource="{Binding EmptyPetInfo}" HeightRequest="200">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="10" RowDefinitions="80" ColumnDefinitions="120,60,60">
                            <Image Grid.Column="0"
                               Grid.Row="0"
                               x:Name="PetImage"
                               Source="{Binding imageUrl}"/>
                            <Label Grid.Column="1"
                               Grid.Row="0"
                               Text="{Binding PetName}"
                               FontAttributes="Bold"
                               x:Name="labelpetname" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                            <CheckBox  Grid.Row="0" Grid.Column="2" HorizontalOptions="End" IsChecked="{Binding Selected, Mode=TwoWay}" BindingContext="{Binding .}" CheckedChanged="CheckBox_CheckedChanged"/>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

Solution

I want to create a string with all the names of the pets which have been selected the pass this value through a function.

I suggest you don't need to use CheckBox_CheckedChanged event to get selected PetName, you can create one class name Petclass, implementing INotifyPropertyChanged, to notify Selected property changed.

 public class Petclass:ViewModelBase
{
    public string imageUrl { get; set; }
    public string PetName { get; set; }
    private bool _Selected;
    public bool Selected
    {
        get { return _Selected; }
        set
        {
            _Selected = value;
            RaisePropertyChanged("Selected");
        }
    }

}

public class ViewModelBase : INotifyPropertyChanged
{
   
    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Then loading some data to test in collectionview. foreach EmptyPetInfo Collectionview ItemsSource="{Binding EmptyPetInfo}" to check Selected property is true or false.

<CollectionView
            x:Name="petCollectionView"
            HeightRequest="200"
            ItemsSource="{Binding EmptyPetInfo}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid
                        Padding="10"
                        ColumnDefinitions="120,60,60"
                        RowDefinitions="80">
                        <Image
                            x:Name="PetImage"
                            Grid.Row="0"
                            Grid.Column="0"
                            Source="{Binding imageUrl}" />
                        <Label
                            x:Name="labelpetname"
                            Grid.Row="0"
                            Grid.Column="1"
                            FontAttributes="Bold"
                            HorizontalTextAlignment="Center"
                            Text="{Binding PetName}"
                            VerticalTextAlignment="Center" />
                        <CheckBox
                            Grid.Row="0"
                            Grid.Column="2"
                            HorizontalOptions="End"
                            IsChecked="{Binding Selected, Mode=TwoWay}" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

public partial class Page17 : ContentPage
{
    public ObservableCollection<Petclass> EmptyPetInfo { get; set; }
    public Page17()
    {
        InitializeComponent();

        EmptyPetInfo = new ObservableCollection<Petclass>()
        {
            new Petclass(){imageUrl="check.png",PetName="pet 1"},
            new Petclass(){imageUrl="delete.png",PetName="pet 2"},
            new Petclass(){imageUrl="favorite.png",PetName="pet 3"},
            new Petclass(){imageUrl="flag.png",PetName="pet 4"}

        };
        this.BindingContext = this;
    }

    private void btn1_Clicked(object sender, EventArgs e)
    {
        var stringBuilder = new StringBuilder();
        foreach (Petclass pet in EmptyPetInfo)
        {
            if(pet.Selected)
            {
                stringBuilder.Append(pet.PetName + " ");
            }
        }
        string str = stringBuilder.ToString();
    }
}

Using ObservableCollection Class, represent a dynamic data collection that provides notifications when items get added, removed, or when the whole list is refreshed.

Answered By - Cherry Bu - MSFT