Post
Ask Question

UI Virtualization In Windows Phone

Usually I use ListBox to list the item,s but if we load 1000 records (items) at a time may reduce the performance and consume more memory.

ListBox offers UI virtualization that means loading items on demand to increase the performance.

Data Virtualization

Data virtualization is the concept of only loading “enough” data to fill out your UI and use it. A Stack Virtualization Stack panel manages the viewport by ordering the visual items in a stack layout. Items at the top and bottom edges of the stack are recycled to be further reused depending on the direction of scrolling.

Create new windows phone 8 project and add the ListBox control in your MainPage.xaml.

Now design the page as in the following XAML code.

XAML Code

  1. <!--ContentPanel - place additional content here-->  
  2. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
  3.     <ListBox x:Name="listbox" ItemsSource="{Binding}" >  
  4.         <ListBox.ItemsPanel>  
  5.             <ItemsPanelTemplate>  
  6.                 <VirtualizingStackPanel VirtualizingStackPanel.VirtualizationMode="Recycling"/>  
  7.             </ItemsPanelTemplate>  
  8.         </ListBox.ItemsPanel>  
  9.         <ListBox.ItemTemplate>  
  10.             <DataTemplate>  
  11.                 <StackPanel>  
  12.                     <Image Source="{Binding Photo}" Width="50" Height="50"/>  
  13.                     <TextBlock Text="{Binding Name}" Foreground="Wheat" FontSize="25" TextWrapping="Wrap" Width="166"/>  
  14.                 </StackPanel>  
  15.             </DataTemplate>  
  16.         </ListBox.ItemTemplate>  
  17.     </ListBox>  
  18. </Grid>
Set VirtualizingStackPanel VirtualizationMode property for recycling to virtualize the UI.

I am going to load some random images and text in the list, so I am writing the following code to perform the task.

C# Code
  1. ObservableCollection < Chapters > NewsList = new ObservableCollection < Chapters > ();  
  2. Random random = new Random();  
  3. static long totlaBytes;  
  4. static long currentBytes;  
  5. static long peakBytes;  
  6. // Constructor  
  7. public MainPage()   
  8. {  
  9.     InitializeComponent();  
  10.     // Sample code to localize the ApplicationBar  
  11.     //BuildLocalizedApplicationBar();  
  12. }  
  13. private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e) {  
  14.     LoadNews(250);  
  15.     this.DataContext = NewsList;  
  16.     CheckMemory();  
  17. }  
  18. void LoadNews(int Length)   
  19. {  
  20.     for (int i = 0; i < Length; i++)   
  21.     {  
  22.         NewsList.Add(new Chapters   
  23.         {  
  24.             Name = "C# Corner Chapter " + random.Next(1, 22),  
  25.             Photo = "Assets/Images/" + random.Next(0, 3) + ".png"  
  26.   
  27.         });  
  28.     };  
  29. }  
  30. public class Chapters: System.ComponentModel.INotifyPropertyChanged   
  31. {  
  32.     string name;  
  33.     public string Name   
  34.     {  
  35.         get   
  36.         {  
  37.             return name;  
  38.         }  
  39.         set   
  40.         {  
  41.             if (value != name)   
  42.             {  
  43.                 name = value;  
  44.                 NotifyPropertyChanged("Name");  
  45.             }  
  46.         }  
  47.     }  
  48.     string photo;  
  49.     public string Photo   
  50.     {  
  51.         get   
  52.         {  
  53.             return photo;  
  54.         }  
  55.         set   
  56.         {  
  57.             if (value != photo)   
  58.             {  
  59.                 photo = value;  
  60.                 NotifyPropertyChanged("Photo");  
  61.             }  
  62.         }  
  63.     }  
  64.     public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;  
  65.     public void NotifyPropertyChanged(string propertyName)   
  66.     {  
  67.         if (PropertyChanged != null)   
  68.         {  
  69.             PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));  
  70.         }  
  71.     }  
  72. }  
  73. //---------------------------------------------//  
  74. static System.Windows.Threading.DispatcherTimer dispacherTimer;  
  75. void CheckMemory() {  
  76.     dispacherTimer = new System.Windows.Threading.DispatcherTimer();  
  77.     dispacherTimer.Interval = TimeSpan.FromSeconds(1);  
  78.     dispacherTimer.Tick += new EventHandler(dispacherTimer_Tick);  
  79.     dispacherTimer.Start();  
  80. }  
  81. void dispacherTimer_Tick(object sender, EventArgs e)   
  82. {  
  83.     totlaBytes = (long) Microsoft.Phone.Info.DeviceExtendedProperties.GetValue("DeviceTotalMemory");  
  84.     currentBytes = (long) Microsoft.Phone.Info.DeviceExtendedProperties.GetValue("ApplicationCurrentMemoryUsage");  
  85.     peakBytes = (long) Microsoft.Phone.Info.DeviceExtendedProperties.GetValue("ApplicationPeakMemoryUsage");  
  86.     memory.Text = string.Format("Current:{0:F2}MB; Peak:{1:F2}MB; Total:{2:F2}MB", currentBytes / (1024 * 1024.0), peakBytes / (1024 * 1024.0), totlaBytes / (1024 * 1024.0));  
  87. }  
  88. }
Now see the output to optimise the memory usage and performance.



Figure 1: Output


Similar Articles