Live Shaping

live shaping

Properties required for Live Shaping

  1. IsLiveFiltering = true;
  2. LiveFilteringProperties.Add("Value");
Example Live Sorting

In the following example, we have created a class named student. The class implements an INotifyPropertyChanged interface and is used for the Property’s value changes. Also a StudentCollection was created that populates the student information at runtime. On a Window_Loaded event we created an object of StudentCollection that is already populated with the student information and binds it with a dataGrid.

Also created a:
  1. DispatcherTimer dispTimer = new DispatcherTimer();
The dispatcher times that will update the Price property after a specific duration? On the click on the button the Sorting will start. It uses the following programming features:
  1. public class Student : INotifyPropertyChanged
  2. {
  3. int _StudentId;
  4. public int StudentId
  5. {
  6. get { return _StudentId; }
  7. set
  8. {
  9. _StudentId = value;
  10. OnPropertychanged("StudentId");
  11. }
  12. }
  14. string _StudentName;
  15. public string StudentName
  16. {
  17. get { return _StudentName; }
  18. set
  19. {
  20. _StudentName = value;
  21. OnPropertychanged("StudentName");
  22. }
  23. }
  26. string _StudentCity;
  27. public string StudentCity
  28. {
  29. get { return _StudentCity; }
  30. set
  31. {
  32. _StudentCity = value;
  33. OnPropertychanged("StudentCity");
  34. }
  35. }
  37. decimal _StudentFee;
  38. public decimal StudentFee
  39. {
  40. get { return _StudentFee; }
  41. set
  42. {
  43. _StudentFee = value;
  44. OnPropertychanged("StudentFee");
  45. }
  46. }
  49. public event PropertyChangedEventHandler PropertyChanged;
  50. private void OnPropertychanged(string pName)
  51. {
  52. if (PropertyChanged != null)
  53. {
  54. PropertyChanged(this, new PropertyChangedEventArgs(pName));
  55. }
  56. }
  58. }
  59. public class StudentCollection : ObservableCollection<Student>
  60. {
  61. public StudentCollection()
  62. {
  63. Add(new Student() { StudentId = 1,StudentName = "Pete Brown", StudentCity = "Chicago", StudentFee = 100 });
  64. Add(new Student() { StudentId = 2, StudentName = "Mikey Aurthor", StudentCity = "Phoenix", StudentFee = 150 });
  65. Add(new Student() { StudentId = 3, StudentName = "Dyna Mike", StudentCity = "Chicago", StudentFee = 800 });
  66. Add(new Student() { StudentId = 4, StudentName = "Rachel Dave", StudentCity = "Phoenix", StudentFee = 200 });
  67. Add(new Student() { StudentId = 5, StudentName = "Nikky Chre", StudentCity = "Phoenix", StudentFee = 180 });
  68. Add(new Student() { StudentId = 6, StudentName = "Karl Nas", StudentCity = "Chicago", StudentFee = 2200 });
  69. Add(new Student() { StudentId = 7, StudentName = "Bruce Wayne", StudentCity = "Seattle", StudentFee = 100 });
  70. Add(new Student() { StudentId = 9, StudentName = "Johan Surg", StudentCity = "Austin", StudentFee = 300 });
  71. Add(new Student() { StudentId = 10, StudentName = "Tony ", StudentCity = "Austin", StudentFee = 300 });
  72. Add(new Student() { StudentId = 11, StudentName = "Peterson J", StudentCity = "Seattle", StudentFee = 300 });
  73. Add(new Student() { StudentId = 12, StudentName = "Jack Russel", StudentCity = "Chicago", StudentFee = 300 });
  74. }
  75. }
XAML Design
  1. <Window x:Class="Wpf_Live_Shaping.LiveSorting"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="LiveSorting" Height="400" Width="500" Loaded="Window_Loaded">
  5. <Grid>
  6. <DataGrid Name="DGData" Margin="10,40,10,10"></DataGrid>
  7. <Button Content="Start Sorting" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Click="ButtonStartSirting_Click"/>
  8. <Button Content="Stop Sorting" HorizontalAlignment="Left" Margin="100,10,0,0" VerticalAlignment="Top" Width="75" Click="ButtonStopSorting_Click"/>
  10. </Grid>
  11. </Window>
Code Behind
  1. public partial class LiveSorting : Window
  2. {
  3. DispatcherTimer dispTimer = new DispatcherTimer();
  4. ObservableCollection<Student> ListStudent = new ObservableCollection<Student>();
  5. public LiveSorting()
  6. {
  7. InitializeComponent();
  8. }
  10. private void Window_Loaded(object sender, RoutedEventArgs e)
  11. {
  12. var studentCollection = new StudentCollection();
  13. DGData.ItemsSource = studentCollection;
  14. Random random = new Random();
  15. var Students = new StudentCollection();
  16. foreach (var item in Students)
  17. {
  18. ListStudent.Add(new Student()
  19. {
  20. StudentId = item.StudentId,
  21. StudentName = item.StudentName,
  22. StudentCity = item.StudentCity,
  23. StudentFee = item.StudentFee
  24. });
  25. }
  26. DGData.ItemsSource = ListStudent;
  27. }
  29. void dispTimer_Tick(object sender, EventArgs e)
  30. {
  31. Random random = new Random();
  32. foreach (var pc in ListStudent)
  33. {
  34. pc.StudentFee += random.Next(100) - 5;
  35. }
  36. }
  38. private void ButtonStartSirting_Click(object sender, RoutedEventArgs e)
  39. {
  40. ICollectionView pView = CollectionViewSource.GetDefaultView(ListStudent);
  41. pView.SortDescriptions.Add(new SortDescription("StudentFee", ListSortDirection.Ascending));
  42. var productview = (ICollectionViewLiveShaping)CollectionViewSource.GetDefaultView(ListStudent);
  43. productview.IsLiveSorting = true;
  44. dispTimer.Interval = TimeSpan.FromMilliseconds(600);
  45. dispTimer.Tick += dispTimer_Tick;
  46. dispTimer.Start();
  47. }
  49. private void ButtonStopSorting_Click(object sender, RoutedEventArgs e)
  50. {
  51. dispTimer.Stop();
  53. }
  54. }
Result

live sorting

live sorting image

table

Example Live Filtering

In this example we will filter information that exists in a datagrid on the basis of StudentCity.

XAML Design
  1. <Grid>
  2. <Grid.RowDefinitions>
  3. <RowDefinition Height="100*"></RowDefinition>
  4. </Grid.RowDefinitions>
  5. <Grid.ColumnDefinitions>
  6. <ColumnDefinition Width="80*"></ColumnDefinition>
  7. <ColumnDefinition Width="30*"></ColumnDefinition>
  8. </Grid.ColumnDefinitions>
  10. <DataGrid Name="DGData" Margin="10,40,10,10" Grid.Row="0" Grid.Column="0"></DataGrid>
  11. <ListBox x:Name="lstCity"
  12. Height="160" Grid.Row="0" Grid.Column="1"
  13. SelectionChanged="lstCity_SelectionChanged"/>
  14. </Grid>
Code Behind
  1. public partial class LiveFilterWindow : Window
  2. {
  3. StudentCollection Students;
  4. List<string> Cities;
  5. public string CityName { get; set; }
  6. public LiveFilterWindow()
  7. {
  8. InitializeComponent();
  9. }
  11. private void Window_Loaded(object sender, RoutedEventArgs e)
  12. {
  13. Students = new StudentCollection();
  14. DGData.ItemsSource = Students;
  16. Cities = Students.Select(d => d.StudentCity).Distinct().ToList();
  17. lstCity.ItemsSource = Cities;
  19. }
  21. private void lstCity_SelectionChanged(object sender, SelectionChangedEventArgs e)
  22. {
  23. ListCollectionView studentView = CollectionViewSource.GetDefaultView(DGData.ItemsSource) as ListCollectionView;
  24. studentView.IsLiveFiltering = true;
  25. studentView.LiveFilteringProperties.Add("StudentCity");
  26. CityName = lstCity.SelectedItem.ToString();
  27. studentView.Filter = new Predicate<object>(IsCityFound);
  28. studentView.Refresh();
  29. }
  31. bool IsCityFound(object d)
  32. {
  33. bool result = false;
  34. Student std = d as Student;
  35. if (std.StudentCity == CityName)
  36. {
  37. result = true;
  38. }
  39. return result;
  40. }
  41. }
Output

chicago

seattle

chicago filter