MSDN Magazine - March 2009 - (Page 129) CHARLES PETZOLD FOUNDATIONS Writing More Efficient ItemsControls There comes a time in the life of every Windows Presentation Foundation (WPF) programmer when the true power of the DataTemplate suddenly becomes evident. This epiphany is usually accompanied by the realization, “Hey, I can use a DataTemplate to create a bar chart or a scatter plot with virtually no coding.” A DataTemplate is most commonly created in conjunction with an ItemsControl or a class that derives from ItemsControl, which includes ListBox, ComboBox, Menu, TreeView, ToolBar, StatusBar—in short, all the controls that maintain a collection of items. The DataTemplate defines how each item in the collection is displayed. The DataTemplate consists mostly of a visual tree of one or more elements, with data bindings that link the items in the collection with properties of these elements. If the items in the collection implement some kind of property-change notification (most often by implementing the INotifyPropertyChanged interface), the ItemsControl can dynamically respond to changes in the items. The disappointment might come a little later. If you need to display lots of data, you might discover that the ItemsControl and DataTemplate don’t scale well. This column is about what you can do to combat those performance issues. public class DataCollection { public DataCollection(int numPoints) { DataPoints = new ObservableCollection (); new DataRandomizer (DataPoints, numPoints, Math.Min(1, numPoints / 100)); } public ObservableCollection DataPoints { set; get; } } ObservableCollection has a CollectionChanged property that is fired whenever items are added to or removed from the collection. This particular DataCollection class creates all the data items in its constructor by using a class named DataPointRandomizer that generates random data for testing purposes. The DataPointRandomizer object also sets a timer. Every tenth of a second, the timer-tick method changes the VariableX or VariableY property in % of the points. Therefore, on average, all the points change every seconds. Now let’s write some XAML that displays this data in a scatter plot. Figure 2 shows a UserControl that contains an ItemsControl. Figure 1 The DataPoint Class Represents a Data Item public class DataPoint : INotifyPropertyChanged { int _type; double _variableX, _variableY; string _id; public event PropertyChangedEventHandler PropertyChanged; public int Type { set { if (_type != value) { _type = value; OnPropertyChanged("Type"); } } get { return _type; } } public double VariableX [ ] public double VariableY [ ] public string ID [ ] protected virtual void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } An ItemsControl Scatter Plot Let’s create a scatter plot from an ItemsControl and a DataTemplate. The first step is to create a business object representing the data item. Figure 1 shows a simple class with the generic name DataPoint (slightly abridged). DataPoint implements the INotifyPropertyChanged interface, which means that it contains an event named PropertyChanged that the object fires whenever a property has changed. The VariableX and VariableY properties indicate the point’s position in a Cartesian coordinate system. (For this column, the values range from to .) The Type property can be used to group data points (it will have values from through and be used to display information in six different colors), and the ID property identifies each point with a text string. In a real-life application, the following DataCollection class might contain more properties, but for this example it has only one, DataPoints, of type ObservableCollection : Send your questions and comments to mmnet30@microsoft.com. Code download available at code.msdn.microsoft.com/mag200903Foundations. March 2009 129 http://code.msdn.microsoft.com/mag200903Foundations
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.