从ViewModel移除ListBoxItem

Question

I develop CRUD app for WindowsPhone 8.1. I can add data to ObservableCollection collection and this data is displayed on ListBox. I use MVVM pattern.

Full repository https://github.com/OlegZarevych/CRUD_WP81

View :

<ListBox x:Name="Storage" ItemsSource="{Binding Path=Models, Mode=TwoWay}" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid  Height="30" Width="450">
                            <TextBlock x:Name="nameblock" Text="{Binding Name}" />
                        </Grid>
                        </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

And ViewModel class

 public class ViewModel
    {
        public string NewName { get; set; }
        public string NewSurname { get; set; }
        public int NewAge { get; set; }
        public int i=0 ;
        public ObservableCollection<DataStorageModel> Models { get; set; }
        //Event Handlers
        public ICommand CreateClickCommand { get; set; }
        public ICommand UpdateClickCommand { get; set; }
        public ICommand DeleteClickCommand { get; set; }
        public ViewModel()
        {
            CreateClickCommand = new RelayCommand(arg => CreateClickMethod());
            UpdateClickCommand = new RelayCommand(arg => UpdateClickMethod());
            DeleteClickCommand = new RelayCommand(arg => DeleteClickMethod());

            Models = new ObservableCollection<DataStorageModel>()         {};
        }
        private void CreateClickMethod()
        {
            Models.Add(new DataStorageModel() { Name = NewName, Surname = NewSurname, Age = NewAge, Count=i++ });

        }
        private void UpdateClickMethod()
        {}
        private void DeleteClickMethod()
       {}

}

I want to change data and delete it. As i good understand, I need select count from ListBoxItems and delete(update) this count in ObservableCollection. How can I work with XAML code from ViewModel class ? How can I initiliaze Storage in ViewModel ?

Or in MVVM is the better way to resolve this problem ?

Answer 1

When you want to delete a model from the ListBox you typically need some way to identify the selected ListBoxItems (or models) that you want to delete; for that, consider having an IsSelected property on your models and bind it to a CheckBox inside the ListBoxItem data template.

Now, when you click on delete, the delete command can then easily look into the Models list and see which items are selected for deletion. After it deletes the items, it can then enumerate over the collection and recalculate the count value for the remaining items and update the field in the view model.

So, you don't have to access the XAML to update the count of the models. If you make the count property mutable then you wouldn't have to reinitialize the storage after you delete items from the list.

Answer 2

I added code t the Model

    private bool _isSelected;
    public bool IsSelected
    {
        get { return _isSelected; }
        set
        {
            if (_isSelected != value)
            {
                _isSelected = value;
                OnPropertyChanged("IsSelected");
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

Also added checkbox with bindin to View.

        <ListBox x:Name="Storage" Background="Gray" FontSize="14" ItemsSource="{Binding Path=Models, Mode=TwoWay}" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid  Height="60" Width="400" >
                        <CheckBox  x:Name="checkbox" IsChecked="{Binding Path=IsSelected, UpdateSourceTrigger=PropertyChanged}" />
                        <TextBlock x:Name="nameblock" Text="{Binding Name}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

But IsSelected var doesn't change when I check checkbox in item Why ?