c# - Enlazar ObservableCollection usando MVVM

windows-phone-8

Question

Estoy tratando de armar lo que debería ser una muestra de MVVM muy básica, pero estoy teniendo problemas para hacerlo funcionar. Básicamente, quiero vincular un ObservableCollection a un ListBox , y tengo una opción de búsqueda para que el usuario busque otros elementos. Al realizar una búsqueda, el ListBox debe actualizarse ya que la colección cambiará. Aquí está mi código:

Modelo:

public class Item
public string Name { get; set; }
}

ViewModel:

public class ViewModel : INotifyPropertyChanged
{
private ObservableCollection<Item> _items { get; set; }
public ObservableCollection<Item> Items
{
get { return _items; }
set
{
_items = value;
RaisePropertyChanged("Items");
}
}
public void GetDefaultItems()
{
ObservableCollection<Item> temp = new ObservableCollection<Item>();
temp.Add(new Item() { Name = "abc" + " 1" });
temp.Add(new Item() { Name = "def" + " 2" });
temp.Add(new Item() { Name = "ghi" + " 3" });
Items = temp;
}
public void Search(string query)
{
ObservableCollection<Item> temp = new ObservableCollection<Item>();
temp.Add(new Item() { Name = query + " 1" });
temp.Add(new Item() { Name = query + " 2" });
temp.Add(new Item() { Name = query + " 3" });
Items = temp;
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}

Ver:

<Grid x:Name="LayoutRoot">
<ListBox ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="Name" Text="{Binding Name}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

MainPage.xaml:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBox x:Name="txtSearch"/>
<TextBlock Text="Items:" />
<views:ItemView x:Name="ItemsOnPage" />
</StackPanel>
</Grid>

y finalmente, MainPage.xaml.cs:

public partial class MainPage : PhoneApplicationPage
{
private ViewModel vm;
// Constructor
public MainPage()
{
InitializeComponent();
txtSearch.KeyUp += txtSearch_KeyUp;
vm = new ViewModel();
}
void txtSearch_KeyUp(object sender, System.Windows.Input.KeyEventArgs e)
{
if (e.Key == Key.Enter)
{
vm.Search(txtSearch.Text);
}
}
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
vm.GetDefaultItems();
ItemsOnPage.DataContext = vm.Items;
}
}

Entonces, lo que sucede es que puedo ver que los elementos predeterminados se cargan la primera vez, pero cuando realizo una búsqueda, la lista no se actualiza. Está todo codificado en este momento, así que si la búsqueda funciona , debería ver 3 elementos para lo que buscan.

Sin embargo, lo que he notado es que si configuro un punto de interrupción en ViewModel en RaisePropertyChanged , this.PropertyChanged siempre es nulo , por lo que nunca this.PropertyChanged dentro de la declaración if . He visto ejemplos que usan INotifyPropertyChanged en el modelo, pero en este caso, dado que necesito que se me notifique cuando cambia la colección, me pareció correcto usarlo en el modelo de visualización. Esto podría estar mal, pero no estoy seguro de cómo configurarlo.

¿Alguien puede ver lo que estoy haciendo mal?

Answer 1

Parece que el valor de la recopilación de elementos no se actualiza en la IU.

Prueba esto-

Código en MainPage.cs

 private ViewModel _viewModel;

Constructor de MainPage

 _viewModel = new ViewModel();
this.DataContext = _viewModel ;

Enlace en MainPage XAML

<views:ItemView x:Name="ItemsOnPage" DataContext="{Binding Path=Items,UpdateSourceTrigger=PropertyChanged}"/>

Answer 2

intenta hacer esto

1. establecer ItemSource a los artículos

2. Borrar y agregar elementos de datos

   String preQuery="";
   public void Search(string query)
   {
   if(preQuery==query)
   return;
   Items.Clear();
   Items.Add(new Item() { Name = query + " 1" });
   Items.Add(new Item() { Name = query + " 2" });
   Items.Add(new Item() { Name = query + " 3" });
   }

Espero que esto ayude.