UWP - MVVM Listbox with ObservableCollection Need Filter and Update UI.

Question

UWP - MVVM Listbox with ObservableCollection Need Filter and Update UI.

In Simple Words : Need MVVM Listbox Filter Collection...

Someting Similar to this in UWP :
https://markheath.net/post/list-filtering-in-wpf-with-m-v-vm

list-filtering-in-wpf-with-m-v-vm

Answer 1

Hi,
here is another approach to load data asynchnously without blocking UI.

XAML:

<Page  
    x:Class="App1.Page14"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="using:App14"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d"  
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  <Page.DataContext>  
    <local:ViewModel/>  
  </Page.DataContext>  
  <StackPanel>  
    <TextBox Text="{Binding Filter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>  
    <ListBox ItemsSource="{Binding View}" DisplayMemberPath="Info" Height="400"/>  
  </StackPanel>  
</Page>  

and classes:

It's impossible to include in this buggy forum software code, see attached txt: 25142-x.txt

Result:

Answer 2

Hi,
try following demo:

<Page  
    x:Class="UWP10App1VB.Page20"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="using:UWP10App1VB.App20"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d"  
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  <Page.DataContext>  
    <local:ViewModel/>  
  </Page.DataContext>  
  <StackPanel>  
    <TextBox Text="{Binding Filter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>  
    <ListBox ItemsSource="{Binding View}" DisplayMemberPath="Info" Height="400"/>  
  </StackPanel>  
</Page>  

and classes:

Namespace App20  
  Public Class ViewModel  
    Implements INotifyPropertyChanged  
  
    Private _filter As String  
    Public Property Filter As String  
      Get  
        Return Me._filter  
      End Get  
      Set(value As String)  
        Me._filter = value  
        OnPropertyChanged(NameOf(View))  
      End Set  
    End Property  
    Private col As ObservableCollection(Of Data)  
  
    Public ReadOnly Property View As IEnumerable(Of Data)  
      Get  
        If col Is Nothing Then col = LoadData()  
        Return col.Where((Function(d As Data)  
                            Return String.IsNullOrEmpty(Me._filter) OrElse d.Info.Contains(Me._filter)  
                          End Function))  
      End Get  
    End Property  
  
    Private Function LoadData() As ObservableCollection(Of Data)  
      Dim col As New ObservableCollection(Of Data)  
      For i = 1 To 200  
        col.Add(New Data With {.ID = i, .Info = $"Row {i}"})  
      Next  
      Return col  
    End Function  
  
    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged  
    Friend Sub OnPropertyChanged(<CallerMemberName> Optional propName As String = "")  
      RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propName))  
    End Sub  
  
  End Class  
  
  Public Class Data  
    Public Property ID As Integer  
    Public Property Info As String  
  End Class  
  
End Namespace  

Result: