Matev's Blog

WPF Heatmap - Switch the lights on your 2D data

2013-04-30T16:32:33Z

The increasing amounts of data that users need to consume before they make a decision places increasing demands on presenting it in a way that’s easy to understand. One of the controls used to visualize 3D data is to use a heatmap. Our NetAdvantage for WPF product contains many advanced UI data visualization controls such as a chart, map, timline, treemap, but until this point lacked a heatmap control. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes these controls is available. Over the last couple of months, we’ve been busy creating a heatmap control which we’d like to make available for your use and feedback. This control will not be supported before its official inclusion into the product, but already contains the functionality you need to create a rich color-coded display of your 2D data. At this time, this control is available as a CTP.

This blogpost illustrates the functionality of the heatmap control using a sample project, which includes a DLL with the control itself, ready for use in your own applications. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. The sample project contains all the libraries it needs, so you can build and run it without any additional downloads. Here’s a screenshot of the sample project:

In the subsequent sections, I’ll briefly describe how to use the API and features provided by the control.

How to use the sample

The sample is setup with a binding to a 2D array of data, which binds to properties containing the rows, columns and objective value (to be represented by a color).

We’re using a linear scale for the value-to-color mapping and are using red to green color range to represent the values in the interval from 0 to 1. You can use the slider on the right to modify the width of the grid lines or press the grid button to toggle their visibility. You can smooth the heatmap values over the rows/columns by clicking the Smooth Rows and Smooth Columns buttons.

You can also start a timer which updates the data by clicking the Update button. In this sample, there’s also a tooltip showing the current value when an element is hovered to enable users to easily access any additional data associated with that element.

API

The API of this control has been designed for simplicity and completeness and also for coherence with other controls (it uses a shared color scale with other data visualization controls).

Data Binding

DataBinding is implemented using the standard mechanism which lets you bind to a view model through the ItemsSource property, and specify the path to the data using the ValueMemberPath property. Once you’ve bound to the data, you can set the name of the properties storing the rows and columns of the 2D data using the RowsSource and ColumnsSource properties.

Property	Description
ItemsSource	Gets/sets the object to be used as a data source
ColumnsSource	Gets/sets the System.Collections.IEnumerable for the columns
RowsSource	Gets/sets the System.Collections.IEnumerable for the rows
ValueMemberPath	Gets/sets the name of the property that will be represented with color

Formatting and appearance

The heatmap gives you the full range of capabilities to control the axis value formatting and appearance of your data.

Property	Description
ColumnFormat	Gets/sets the format for the column axis label formatting
DisplayMode	Gets/sets whether value smoothing is applied across rows or columns
GridDisplayMode	Gets/sets the grid rendering order – before and after the heatmap elements
ItemToolTip	Gets/sets the tooltip for the hovered heatmap item
RowFormat	Gets/sets the format for the row axis label formatting

Interaction

The heatmap enables you to handle events generated by the user interacting with the heatmap elements.

Property	Description
ItemMouseEnter	Invoked when the mouse pointer enters a heatmap element.
ItemMouseLeave	Invoked when the mouse pointer leaves a heatmap element.
ItemMouseLeftButtonDown	Invoked when the left mouse button is pressed in a heatmap element
ItemMouseLeftButtonUp	Invoked when the left mouse button is released in a heatmap element
ItemMouseMove	Invoked when the mouse pointer is moved in a heatmap element

These are the mouse events you can handle to provide extra information about the hovered/clicked item in a separate control. The event arguments provide the indexes of the row/column and the item represented by the heatmap item.

Coloring

The heatmap supports two types of value scales you can use to color the elements in the heatmap – Linear and Logarithmic. In the sample, we’re using the linear one. You’d typically use the Linear one when you don’t have a lot of variance between the values represented by the color, and the Logarithmic one when you do. The scales used for the coloring work just like chart axes with auto-ranging across multiple series or controls and with separately settable Minimum and Maximum values.

While at least two colors are required, more can be used. You can use this color scheme to build a choropleth view of your data. By having full control over the color scheme, you can easily implement sequential and diverging scales to adequately color your data – in the case of a diverging color scale, you’ll need to specify at least three colors.

Both of these value scales have the following properties:

Property	Description
Colors	Gets/sets the colors for the brushes to be used in the interval to color the elements
MaximumValue	Gets/sets the maximum value for the color value range
MinimumValue	Gets/sets the minimum value for the color value range
ActualMaximumValue	Gets/sets the actual maximum value for the color value range
ActualMinimumValue	Gets/sets the actual minimum value for the color value range

Disclaimer

The control is freely available as a CTP for the time being, and can be used without limitations in your commercial projects. It will be added to our paid for product at a later stage, and from that point on will be serviced and supported.

Summary

This blogpost described the functionality and API of a freely available WPF heatmap control. This control can help you visualize 2D data in an easily understandable way, and can also serve as a navigation control, allowing users to quickly identify important pieces of data and act on it. In addition to facilitating navigation, it can also help you reduce clutter in your application’s layout and replace sophisticated hierarchical grid controls showing the same data. This being said, please take a look at the data presented in your application, and identify data which is three dimensional, with one of the dimensions being a number, and the other two being discrete values. Also, talk to your users about the availability of a heatmap control – they’re sure to have ideas on data to visualize with it.

Please send me an email if you have any questions – kmatev@infragistics.com

Webinar: Optimizing WPF and XamDataGrid Performance

2013-03-29T11:55:29Z

Overwhelmingly, WPF has been the platform of choice for desktop applications over the course of the last couple of years. It enables developers to quickly build flexible desktop applications which can be easily customized and styled. However, due to the fact that the platform enables customization on such a granular level, very often such extensive customization starts having a negative impact on performance. In this webinar I described the major points to keep in mind to ensure a high level of performance.

As the grid control is the mainstay of the vast majority of applications, I covered the API and approaches you can use to improve the performance of the grid control we provide as part of the NetAdvantage for WPF product - XamDataGrid. The XamDataGrid is the fastest fully-featured WPF grid control on the market, and our customers are using it to handle the full range of scenarios from the most visually customized to the high-performance real-time data displays. The webinar will illustrate how to improve the performance of WPF applications in general, and how to specifically improve sorting/filtering, scrolling and startup times of views using the XamDataGrid.

You can watch the full webinar here.

You can find the slides for this webinar here.

You can download the samples I used during the webinar here:

External operations blogpost + demo - http://bit.ly/QNPmUF
Simplified templates blogpost + demo - http://bit.ly/LIo6Wh
Sorting update blogpost + demo - http://bit.ly/SPxk6s
Preloading blogpost + demo - http://bit.ly/14sjLEm

Using WPF and XamDataGrid in high-performance settings requires customizations which are covered in the blog posts above and in the webinar. You can now reach out to your users to find the key areas in need of improvement and use this guidance to improve the performance of your application.

By popular request–A Dark Theme for the WPF XamDataGrid

2013-02-26T09:55:00Z

There has been quite a bit of interest in dark themes recently. This is because more users are finding the white background of applications straining their eyes, especially when they are spending a lot of time in front of the computer screen. The convenience of having a darker theme was also recognized by Microsoft in Visual Studio 2012, which comes with such a dark theme built-in. We have received a number of requests for dark themes for our NetAdvantage for WPF controls, and until now, we could only advise on how customers could build such a dark theme by themselves. We’ve now been able to build such a dark theme for select WPF controls and are happy to provide it freely.

We decided to start the theming work with the most-often used Infragistics control in WPF line of business applications - the XamDataGrid (a part of NetAdvantage for WPF) - a high-performance, fully-featured, richly stylable control. This blogpost features a dark theme for the XamDataGrid and editor controls, which can readily be extracted and used to produce a UI that’s easy on the eyes.

Please download the sample project – it integrates the XamDataGrid with a XamFormulaEditor and includes the dark theme for these two controls. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses the XamDataGrid in the the 12.2 NetAdvantage for WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes the XamDataGrid is available. Here’s a screenshot of the XamDataGrid themed in the dark theme:

How to access the theme

The XamDataGrid Metro Dark theme is in DataPresenter_MetroDark.xaml and Editors_MetroDark.xaml files. As part of this, we’re also making available dark styles for XamFormulaEditor - in DataTree_MetroDark.xaml and FormulaEditor_MetroDark.xaml. These contain both the control templates, and the brushes and colors used to style these controls.

Modifying the theme

You can modify the colors of the brushes directly in the DataPresenter_MetroDark.xaml and Editors_MetroDark.xaml. While this approach may work for a few brush settings, if you’d like to change all the colors of the theme into a particular color hue, it’s much easier to use a ResourceWasher. Resource washing lets you change the colors of all brushes in the resource dictionary, thus giving you the capability to customize the visual appearance of a control, while keeping the relative shades of colors in different elements of the control. You can read more about how to use a ResourceWasher here. This approach is illustrated in the sample.

In the sample we’re using a Transparent WashColor on the ResourceWasher in the MainWindow in order to show the dark theme as it is defined in the styles. If you’d like to activate the resource washing, please change the WashColor setting to a different color.

In this case we’re washing the entire theme in a single color. Resource washing has much greater capabilities and can wash different groups of brushes in different colors if your scenario demands it. This more advanced approach is presented here.

Summary

Styling is ever more important in desktop applications, as desktop applications are competing with the interactivity and theming in mobile applications. In this blog post, we presented a dark theme for the XamDataGrid and XamFormulaEditor, which lets you achieve a dark look for your application. You can use the these styles as they are, or you can easily use them as a base for resource washing, which will let you produce a variety of color combinations to suit your applications.

Optimizing XamDataGrid Performance Using External Data Operations

2012-08-28T08:54:00Z

A number of line of business applications use XamDataGrid for its rich feature set, high customizability and performance. If there’s been one constant development in the use of the XamDataGrid across all industries, it’s been the increasing amount of data displayed in the XamDataGrid. Traditionally, grid controls perform data operations such as sorting, filtering and grouping by themselves on the UI thread. However, with increasing data loads, developers are looking for ways to perform these operations on a separate thread, or on a different machine altogether. This is why developers have asked us to have the XamDataGrid pass the arguments of these operations, and without performing this operation, to display the processed result. We’ve added this functionality in the 12.1 release, and it has enabled us to significantly improve performance when large datasets are bound to the XamDataGrid. This blog post describes how to take advantage of this functionality, and describes its implications for performance in terms of memory footprint and time it takes to perform an operation.

Please download the sample project – it illustrates how to activate off-grid processing of data manipulations, and compares the performance of a XamDataGrid bound to the same dataset in the two cases – when internal and external operations are used. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses a trial version of the 12.1 WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes the XamDataGrid is available. Here’s a screenshot of the sample project:

What’s in the sample

In the sample application, there are two XamDataGrids side by side - the one on the left uses internal operations, and the one on the right performs these operations through the CollectionView object instead. Both grids are bound to a dataset containing 100,000 records. In order to illustrate the difference in performance due to internal or external operations, we’ll compare the performance of sorting and grouping. However, the exact same results would also apply to filtering and summary computations.

Performance implications of using internal sort/group

By default, the XamDataGrid only creates record objects to represent the data items which are currently visible (as opposed to all the records in the dataset). However, when sort/group operations are performed by the XamDataGrid internally, it needs to create record objects to represent all the items in the data set, so it could sort/group them. Even though UI elements are not created for all these records due to the XamDataGrid UI virtualization logic, the record objects can have a substantial impact on the application’s memory footprint (as we’ll see in the performance comparison below), especially when the datasets bound to the XamDataGrid are large. So how does this impact performance? The first time a user sorts/groups a grid, there is a delay during which the XamDataGrid creates record objects for all the data items, and then performs the operation the user requested. This puts the entire dataset in memory in terms of record objects managed by the XamDataGrid. While this increases the memory footprint, and causes a delay the first time such an operation is executed, subsequent sort/group operations are quite fast, because the entire dataset is already in memory.

Let’s see how this impacts performance. Please run the sample, and sort, or group the XamDataGridon the left - you will see the time and memory footprint change (delta) reported above it. On my machine, when the internal operations grid is sorted for the first time, the operation takes 4.3 seconds and memory consumption increases by 40MB. Subsequent sorts take around 1 second, and memory footprint stays the same (since it’s already at its maximum – all data items are represented as record objects). Once the dataset is already fully loaded, grouping takes about 2.8 seconds, ungrouping 1.2 seconds.

Performance implications of using external sort/group

You can control how sorting, grouping, filtering and summary computations are performed using the SortEvaluationMode, GroupByEvaluationMode, FilterEvaluationMode and SummaryEvaluationMode properties. They give you the ability to to disable the internal sorting, grouping, filtering, and summary calculations, and to have those performed manually, or through the CollectionView object. This means that the grid doesn’t have to initialize record objects to represent the entire data set – instead, it relies on the backend to reorder the dataset. In the case of using the collection view (by setting the above properties to “UseCollectionView”), this requires no implementation of extra logic. However, if you have a backend server, where calculations/reordering are performed, you can use the Manual setting for the above properties. This will cause the XamDataGrid to fire the Sorting/Grouping/RecordFilterChanging events, enabling you to pass these onto the backend, where the calculations are performed. The XamDataGridwill display the reordered dataset once it’s been processed by the backend.

Using the UseCollectionView and Manual settings for the sorting/grouping saves the XamDataGrid the need to instantiate record objects for the entire dataset, thus keeping the memory footprint constantly low. The time component of performance is up to the backend you’re using for the processing of these operations. In this sample, in the XamDataGridon the right, we’re using the CollectionView object for handling these operations instead of the internal logic.

How about performance in this case? Please run the sample, and sort, or group the XamDataGridon the right – the time and memory footprint change will be reported right above. When sorting and grouping is performed by the collectionView (using the UseCollectionView value for SortEvaluationMode and GroupByEvaluationMode properties), the memory footprint stays the same, and the time it takes is as follows – sorting 2.5 seconds, grouping 4.9 seconds, ungrouping 2.5 seconds. There are three points to mention here:

1. The memory footprint stays constant, because no extra record objects are instantiated due to sorting/grouping

2. The time it takes to sort/group is constant, i.e. there’s no significant delay when performing the first sort/group (as is the case when internal operations are used, due to initializing record objects)

3. Time time it takes to sort/group is greater than the time it takes to perform the same operations if internal operations are used. However the time aspect of performance is entirely up to the backend you’d like to use for these operations. Even so, using the collectionView objects gives you low-memory consumption, and good first-time sort/group performance (while in the internal operations case you have an extra delay the first time an operation is performed) and may be useful in some cases.

Summary calculations

The default internal summary calculations require the grid to initialize record objects to represent the entire dataset. Using the SummaryEvaluationMode property, summary calculations can also be performed using Linq, or manually. While using Linq requires no extra implementation on your side, using the manual computation mode requires handling the QuerySummaryResultevent, where you can perform your own evaluation logic, and provide a value for the summary result. Using the manual mode enables you to keep the memory consumption low, and gives you the opportunity to improve the calculation time as much as you can by optimizing the backend.

Summary

In this blogpost, I presented how to set the XamDataGrid to perform sorting/grouping/filtering/summary calculations externally. We described the API to use for this purpose, and looked into the performance implications of using external operations. The sample project can be used to easily demonstrate the difference between the two scenarios and can be readily changed to let you see the improvement in performance you’d see when you bind your own data to it. Using manual mode, you can essentially remove any limitations on sorting/grouping/filtering/summaries imposed so far by the hardware of the client machine running your application – using a powerful calculation backend machines is the best way to process large datasets efficiently, while delivering a fast and responsive UI. You can start by talking to the users of your applications, and finding out about the views where they would benefit from larger amounts of data being displayed to help them make a decision. Once you find out about those, the XamDataGrid will help you meet the increasing hunger of your users for more data to be displayed, while delivering an excellent user experience.

Building Line of Business Applications using Infragistics WPF controls Webinar

2012-08-24T12:20:00Z

Thank you for attending our webinar on August 23rd. I presented the NetAdvantage for WPF product briefly, showed one of the showcase applications which ship as part of the free trial, and built a simple LOB application which uses the Ribbon, DockManager, Grid, Chart and PivotGrid controls.

You can view the recording of the webinar here. You can download the slides here, and the source code of the finished application I built during the webinar here.

Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses the 12.1 version of the NetAdvantage for WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes all the controls I used is available.

Here’s a screenshot of the sample application:

If you have any questions or comments, you can reach me at kmatev@infragistics.com

Quickly visualizing column value changes in the Infragistics WPF grid

2012-08-15T15:06:00Z

The vast majority line of business application rely on grids for showing record data. In your WPF applications, you can find the XamDataGrid (a part of NetAdvantage for WPF) especially useful for showing such data – it is a high-performance, fully-featured, richly stylable control. In many cases, the data you need to display is changing, showing the user an up-to-date status on a measurement value on a piece of equipment, a price on a stock, or the efficiency of an engine during a test. When a user makes a decision on whether to look more closely at a certain record in the grid, they need not only the latest value, but also the history of values to let them see the trend of the latest data. They’d like to know whether the trend is going up or down, or how often the values are outside of a given range. This is the kind of information that can only be displayed in a sparkline control.

This blogpost describes how you can add a XamSparkline control (WPF, Silverlight) to a WPF XamDataGrid column for a quick visualization of recent changes in the column values. This same functionality is available as standard using the XamGrid (available for both WPF and Silverlight), and is shown in this sample. Please download the sample project – it illustrates how to declare and bind a column to show the history of column value changes in a XamDataGrid. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses a pre-release of the 12.2 WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes the XamDataGrid is available.

Keeping track of value history

You can easily enable the XamDataGrid to keep track of data value changes using the approach described here. This approach uses the DataValueChangedNotificationsActive, DataValueChangedHistoryLimit, and DataValueChangedScope properties. In the specific case, we’re tracking the last 15 values for columns ColumnC and ColumnD. These columns are set up as shown below:

<Style x:Key="graphingCVPStyle"
        TargetType="{x:Type igDP:CellValuePresenter}">
    <Setter Property="Height" Value="25" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
                <Border Height="{TemplateBinding Height}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" VerticalAlignment="Center"
                            Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" />
                        <ig:XamSparkline Grid.Column="1"
                                ItemsSource="{Binding ValueHistory, RelativeSource={RelativeSource TemplatedParent}}"
                                ValueMemberPath="Value"
                                DisplayType="Line"
                                Width="80"
                                LineThickness="1" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The DataValueChangedScope property is set to a value of AllAllocatedRecords so the XamDataGrid keeps history for rows which are allocated, but aren’t currently visible. In order to have history kept for invisible records, we need to make sure the XamDataGrid instantiates records to represent all the records in the data source by setting the RecordLoadMode property to PreloadRecords. So this creates XamDataGrid rows for the entire dataset and keeps the data value changes for each cell in the ColumnC and ColumnD columns. This approach increases the memory footprint of our sample, because we’re no longer virtualizing the UI elements of the XamDataGrid. This is why I recommend using the PreloadRecords setting for the RecordLoadMode for relatively small datasets. I would suggest you try to strike a balance between what the user would like to have, and the size of the memory footprint required.

Visualizing value changes with XamSparkline

We’ll now have a XamSparkline (available for both Silverlight and WPF) added to the CellValuePresenter of the columns to display the value history for each cell in the ColumnC and ColumnD columns. The XamSparkline presents values in a small chart, where the goal is to show the values and richly format them, to give the user information about the trend and outliers, rather than a lot of interactivity (which is where a XamDataChart is more useful). Here’s are a few sample XamSparklines from our online samples:

We’ll retemplate the cell to show the latest value next to a XamSparkline showing all the historic values for the cell. We’ll declare the template as shown below:

<Style x:Key="graphingCVPStyle"
    TargetType="{x:Type igDP:CellValuePresenter}">
    <Setter Property="Height" Value="25" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
                <Border Height="{TemplateBinding Height}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" VerticalAlignment="Center"
                            Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" />
                        <ig:XamSparkline Grid.Column="1"
                                ItemsSource="{Binding ValueHistory, RelativeSource={RelativeSource TemplatedParent}}"
                                ValueMemberPath="Value"
                                DisplayType="Line"
                                Width="80"
                                LineThickness="1" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Please note the binding expressions for the TextBlock and XamSparkline controls. We’ve set a Width of 80 to comfortably show the 15 values, and we’re using a line to display the values in the XamSparkline, but you can set it to any of the other markers supported – area, column, WinLoss (sample). You can also add trendlines, highlight ranges and tooltips, as described in this walkthrough.

Having declared the template we’ll use for columns we’d like to have a sparkline in, we need to reference the style in the declarations of these columns – please note the reference to the static resource when setting the CellValuePresenterStyle.

<igDP:Field Name="ColumnD" Width="150">
  <igDP:Field.Settings>
      <igDP:FieldSettings 
        DataValueChangedHistoryLimit="15" 
        DataValueChangedScope="AllAllocatedRecords"
        CellValuePresenterStyle="{StaticResource graphingCVPStyle}"
        DataValueChangedNotificationsActive="True"/>
  </igDP:Field.Settings>
</igDP:Field>

Summary

In this blog post I demonstrated how to setup the XamDataGrid to track history changes and visualize them into a XamSparkline. This approach can readily be used to add context to your data, and enable your users to make better decisions based on a concise and rich presentation of data. You can add this enhanced presentation to grids in your applications where a user would benefit from seeing a history of value changes. Of course, you can customize the XamSparkline to visualize this data in a way to properly format and display its context, so that it can be easily understood by the user.

If you have any questions or comments, you can reach me at kmatev@infragistics.com

XamGrid Performance Optimization Using Simplified Templates

2012-08-13T08:37:00Z

The heart of the vast majority of Line of Business applications is the grid control. The XamGrid is a fully-featured, high-performance, highly-customizable grid control which is available as part of our NetAdvantage for Silverlight and NetAdvantage for WPF products. As the users spend a lot of their time examining lists of records, the perceived performance of an application is directly related to the performance of the grid. This blog post describes a simple method to give you a 30% performance improvement in XamGrid scrolling performance by using simpler templates. This blog post describes the approach and illustrates it with a sample project you can use to compare the scrolling performance of the XamGrid using the different setups.

In this blog post I will illustrate how to use simpler templates to replace DateColumn and DateTimeColumn cell templates in XamGrid, and demonstrate how this can significantly improve scrolling performance. Please download the sample project – it enables you to show/hide date columns in a XamGrid, and allows you to benchmark the time it takes to scroll through the dataset. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses the latest available service release of the 12.1 WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes the XamGrid is available.

Please see below a screenshot of the XamGrid which uses DateTimeColumn columns to display date values, together with the time it takes for the grid to page through the entire dataset.

Date value presentation

The default column type for date-typed columns is the DateColumn. Recently, we’ve introduced the DateTimeColumn as a replacement for this default column for visualization of date values. These editors provide a powerful UI for editing the date value, both using a formatted editor in the cell, and also using a date picker which is popped up when the user clicks the arrow button. However, this advanced functionality comes at the price of additional UI elements. Here’s an image showing the element tree of a cell in the DateTimeColumn. You can see it uses a total of 27 elements to represent this value and give the user the ability to edit it easily. When you have multiple date columns visible at one time, and when you have a number of records visible, this increased number of elements starts to have an impact on scrolling performance. When you need to edit these values, this may be a price you may be willing to pay. However, when you don’t need to edit these values, the extra functionality provided by the additional UI elements isn’t used. Simplifying the cell template to only present the value can yield a noticeable improvement in scrolling performance.

Simplified Templates for Date value presentation

If we use a simple TextColumn to represent a Date value we don’t get the editing capabilities, but we cut down 27 UI elements the standard DateTimeColumn cell uses by 4 times to only 7 elements as shown in the element tree below:

Using the TextColumn instead of the DateTimeColumn enables us to significantly reduce the load on the CLR which needs to go through the measure and arrange passes for a significantly smaller number of UIElements. This results in better scrolling performance. How much better exactly?

Performance Benchmarking

The sample includes a grid containing columns of different types, which can be paged automatically, with the scrolling time displayed once scrolling has completed. The XamGrid has (among many more) 4 date-typed columns – the first one is shown using a TextColumn, the other four are shown using DateTimeColumn. The column chooser functionality is enabled, and you can hide a column by clicking the button on the right of its title in the column header cell (you can show a hidden column by clicking its name in the list that pops up when you click the region where the column was collapsed into). Adjust the sample to fit your requirements by setting the ColumnWidth, and RowHeight properties on the XamGrid. You can leave them as they are if you’d like to see the general effect on scrolling performance.

1. Click the Benchmark button to start the automatic paging to get a baseline performance level with 4 DateTimeColumns columns shown. You can repeat a few times to get a more accurate idea of the time it takes to page through.

2. Hide one or more of the DateTimeColumn columns (Date1, Date2, Date3, Date4)

3. Click the Benchmark button to start the automatic paging with the new column configuration. You can repeat a few times to get a more accurate idea of the time it takes to page through.

Results

5 date-typed columns are visible, 1 date value shown in a TextColumn, and 4 shown using DateTimeColumns. The scroll time averages at 5.6s.

4 date-typed columns are visible, 1 date value shown in a TextColumn, and 3 shown using DateTimeColumns. The scroll time averages at 3.9s.

3 date-typed columns are visible, 1 date value shown in a TextColumn, and 2 shown using DateTimeColumns. The scroll time averages at 2.9s.

2 date-typed columns are visible, 1 date value shown in a TextColumn, and 1 shown using DateTimeColumn. The scroll time averages at 1.8s.

1 date-typed columns are visible, 1 date value shown in a TextColumn, and none shown using DateTimeColumn. The scroll time averages at 1.1s.

You can easily see the dramatic effect on performance achieved by using a simple TextColumn for the visualization of date values instead of DateTimeColumn columns. This performance win is easily achievable when you don’t allow users to edit date values, because you don’t sacrifice any aspect of functionality by using a TextColumn instead of a DateTimeColumn. The fact that the date columns are hidden doesn’t mean we improved performance by showing less data – the grid has more than 40 columns, and it shows the same amount of data, since all columns have equal width. The values which are coming in from columns on the right now that we’ve hidden the DateTimeColumn columns are numbers and simple text, which are displayed using simple TextColumns, which only use 7 UIElements to present their values. This is why even though we’re showing the same amount of data, we’re able to improve scrolling performance by about 4 times, a multiple of the DateTimeColumn columns we’ve been able to replace by TextColumns in view (the fact that these previously hidden from view TextColumns show different data types doesn’t impact the results).

Summary

in this blog post, I presented a simple way to improve performance on your XamGrid by replacing DateColumn and DateTimeColumn with TextColumns. As demonstrated by the sample, this substantially cuts down the load on the CLR and results in greatly improved scrolling performance. In addition to the general approach, you can also use the sample project for its automatic paging logic, which will enable you to benchmark the effect of different settings/templates on performance. Using this approach in XamGrids displaying read-only date values, you can easily improve scrolling performance and thus increase user satisfaction.

Optimizing XamDataGrid Scrolling Performance Using Simplified Templates

2012-07-23T16:28:00Z

The XamDataGrid control is a highly-functional high-performance grid control that’s a part of the NetAdvantage for WPF (samples), along with other controls for line of business applications, such as editors, docking, ribbon, scheduler, and others. These controls have been used in a number of industries to build richly-styled and highly-functional applications. However, users are using increasing quantities of data, which puts strain on the performance of highly-customizable UIs. In this blog post, I’ll present one approach to improving performance of the XamDataGrid to help you achieve up to 20% decrease in scrolling speed. For additional guidance on XamDataGrid performance optimization, please see this blogpost.

In this blog post I will present simplified cell templates for XamDataGrid, and illustrate how they can significantly improve scrolling performance. Please download the sample project – it enables you to switch between the different cell templates of a XamDataGrid, and allows you to benchmark the time it takes to scroll through the dataset. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses the latest available service release of the 12.1 WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes the XamDataGrid is available.

Please see below a screenshot of the XamDataGrid with the default cell templates, together with the time it takes for the grid to page through the entire dataset.

The above screenshot shows the default cell value template you get in the XamDataGrid cells – editors enabling your user to easily edit cell values for the corresponding data types. Each of these editors is made up of UIElements which need to be managed by the CLR. The more sophisticated an editor, the more UIElements need to be managed, and the higher the price we pay in terms of performance. With this in mind, we can improve XamDataGrid scrolling performance by using simpler ways to present a value, thus cutting down on the number of UIElements to be managed by the CLR.

CellValuePresenter Templates

A XamNumericEditor or XamCurrencyEditor uses 7 elements to display a single value because the user can edit the value using spin buttons. You can see the element tree below:

However, very often, especially when dealing with large volumes or rapidly updating data, most of the data shown is not editable. Setting the AllowEdit property in the FieldSettings doesn’t use a simpler template for presenting the value, just disables the editor and doesn’t improve performance. When we’re dealing with read-only data, we only need to present the data as a read-only label, instead of an editor. This will help us cut down the number of UIElements and hence improve performance. The simplest possible template is one where we use a single TextBlock element to present a value with a Border element, so we can have border and background styling. You can see the element tree of this template below:

You can see that a default CellValuePresenter is composed of 12 elements, while a slimmed-down one only has 3 elements. This is a 4-fold decrease in the number of elements per cell. The more cells you have in view, the bigger the total number of UIElements saved by using simple read-only styles. The more UIElements saved, the more performance will improve.

Performance Comparison

You can easily see the effect using slimmed down templates has on performance. The sample is a large dataset, with more than 50 columns, and 2000 rows. This data is grouped using three columns to provide a realistic scrolling scenario where group header rows are also present along with regular data rows. To test performance run the sample application, click the Expand all button, then click the Benchmark scrolling button. This will page through the entire dataset, and report the time that took on the top-right for the current CellValuePresenter template. You can change the CellValuePresenter template using the radio buttons on the top-left side. Go through the different templates (normal, read-only, grid lines read-only) and click the Benchmark scrolling button. The results will vary depending on the number of cells shown, with a smaller grid shown leading to better performance.

Using the window size as provided by the sample (1024x768), we had the following times:

Normal template: 12.561s

Read-only: 9.502s

Grid lines read-only: 10.29s

You may get different results due to the hardware you’re running the sample on, but you’ll certainly see about a 20% improvement in scrolling time when using read-only templates versus standard ones.

Editor recycling

When we changed the CellValuePresenter to use a simple TextBlock, it doesn’t contain a ValueEditor anymore. This prevents the XamDataGrid from determining if it should instantiate a cell if it isn’t in view (horizontally scrolled out of view). Since this uninitialized cell may affect the height of the record, the XamDataGrid lacking any other information will hydrate it. However, setting the ForceCellVirtualization to true (in the XAML code), we tell the XamDataGrid that the cell is safe to be virtualized. Once we’ve set this property to true, this lets us benefit from the slimmer CellValuePresenter.

Note: Setting ForceCellVirtualization to true doesn’t guarantee that the XamDataGrid will re-use the CellValuePresenter for another field’s cell when the user scrolls horizontally. If the data types, or styles don’t match, the XamDataGrid won’t re-use it for that field.

Implications

Using a slimmer CellValuePresenter template can impact your existing codebase in two ways – styling and value formatting.

You may need to change styles you’re using to target the elements of the slimmed down templates instead of the standard CellValuePresenter template elements. The read-only styles provided in this sample (both the regular and grid-lines one) include a border element which can be used to set the background and border of the cell. Depending on the richness you require, you may add additional elements you’d like to target using your styles.

The TextBlock doesn’t format the cell values the way a XamNumericEditor or XamCurrencyEditor can. With these full-fledged editors you have complete control over value formatting, with currency symbols, thousand separators and decimal places as examples. When using a simpler template with a TextBlock, you’ll need to format values as strings before you provide them to the UI layer, because without an editor in place they won't get formatted automatically.

Summary

The XamDataGrid control is the mainstay of line of business applications. Its flexibility, feature-richness, stylability, and performance have ensured its wide use in WPF applications in a variety of sectors with demanding requirements. In this blogpost, I described one way to enhance its performance in specific when dealing with read-only data. This sample also gives you the ability to easily compare the scrolling performance with different XamDataGrid settings because of its ready-to-use automatic scrolling and timing capabilities. In case you’d like to improve scrolling speed, armed with this sample and the guidance above, you will be able to customize the XamDataGrid to get the maximum level of performance and improve the experience your users have when using your application.

Optimizing Sorting Update Performance in XamDataGrid

2012-04-10T17:53:00Z

The XamDataGrid , the grid control which comes as a part of the NetAdvantage for WPF Line of Business product, has been in use for a few years in a variety of scenarios – from customizability and rich templating, to high data density and high-performance. Recently, we have made an important addition to its API, which lets developers handle sorting in update scenarios without sacrificing any aspect of performance (detailed performance optimization guidance is available here). This blog post describes this new capability and illustrates its implementation in a sample project. It also demonstrates its importance by comparing the number of calls to the repositioning logic made with the old and new approaches to handling record repositioning.

Please download the sample project – it implements both the old wasteful and the new optimized approach to record repositioning and keeps track of the number of repositioning logic calls made using the two. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses the latest available service release of the 11.2 WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF Line of Business product, which includes the XamDataGrid is available.

Please see the screenshot below and note the 7 times fewer invocations of repositioning logic using the new approach. The reason for this is that record repositioning is only done in response to an update on the sorted field, rather than every time there's an update on any of the fields of the record. This is why the performance improvement you will see will depend on the number of updated fields - the more fields you have updating, the bigger the performance improvement of using the new approach.

Handling record updates (old approach)

By default, the XamDataGrid doesn’t reposition a record in a sorted or grouped grid once its sorted/grouped property value changes. In this way, the XamDataGrid lets the developer have full control over the timing of the repositioning operation and doesn’t sacrifice any performance by automatic repositioning in case it’s not needed by the scenario. This applies when sorting and grouping is activated from the XamDataGrid itself, rather than bound to a data source which sorts the values intrinsically such as a ListCollectionView which has sort-descriptors set. In the latter case, the ListCollectionView handles the sorting and the XamDataGrid repositions the records automatically.

In case you’re not using a ListCollectionView, but the XamDataGrid sorting instead, you’ll have to reposition records manually when there’s an update in response to the user changing the value of the sorted column, or an update coming in from the data source. This requires the developer to handle the InitializeRecord routed event or its plain CLR event counterpart - InitializeRecordDirect where the RefreshSortPosition method is called on the record. Until now, this was typically performed using the code below:

private void xamDataGrid1_InitializeRecordDirect(object sender, Infragistics.Windows.DataPresenter.Events.InitializeRecordEventArgs e)
{

     //we have to call the RefreshSortPosition method, or else the records do not get their group placement updated after a data update      
     if (e.ReInitialize)      
     {          
           //logic to be performed before repositioning          
           e.Record.RefreshSortPosition();
           //logic to be performed before repositioning

Handling record updates (new approach)

The InitializeRecord event is called every time there is a change in any of the record’s fields. This means that if we have a record containing 10 fields, all of which are updated by the user or by a background process, the record repositioning logic is invoked regardless of whether the column the user has sorted on was updated. This is a rather wasteful approach, because assuming we have sorted by one of these fields, the repositioning logic is called 10 times, instead of just once in response to the sorted column being updated. This is why in the currently available service release version of the 11.2 release (build 2125), we have added the SortValueChanged property to the InitializeRecordEventArgs which lets the developer know whether the record is initialized because sorted column value has changed, allowing them to call the repositioning logic only when required. This new property appears in all subsequent versions, including the forthcoming 12.1 release. This changes the code above into the following:

private void xamDataGrid1_InitializeRecordDirect(object sender, Infragistics.Windows.DataPresenter.Events.InitializeRecordEventArgs e)
{
     //we have to call the RefreshSortPosition method, or else the records do not get their group placement updated after a data update
     if (e.SortValueChanged)
     {
         //logic to be performed before repositioning
         e.Record.RefreshSortPosition();
         //logic to be performed before repositioning

Summary

In this blogpost, I described the new API introduced in the 11.2 service release of the NetAdvantage for WPF Line of Business product, which lets you dramatically cut down the number of calls to repositioning logic in the XamDataGrid in response to data updates. This approach will let you achieve a finer level of control over when record positioning logic is invoked, and ultimately improve performance in these scenarios.

Implementing Modern Business Application Layout with XamTileManager

2012-01-20T12:00:00Z

WPF and Silverlight give developers the technology to easily create highly interactive UI. Our NetAdvantage for WPF Data Visualization (trial) and NetAdvantage for Silverlight Data Visualization (trial) products make use of that, and include a number of controls which allow you to visualize your data in an interactive way, such as a chart, geographic map, treemap, and so on (samples).

Another area where applications can clearly benefit from the increased interaction capabilities introduced by WPF is layout. This blog describes often used layout controls with their advantages and limitations, and presents the XamTilesManager, which is available for both WPF and Silverlight which can enable you to deliver a highly customizable and easy to use layout. Here is a screenshot of a flexible layout arrangement built using the XamTilesManager:

Grids, Splitters, Tabs – easy to implement, however inflexible

Layout in many Windows Forms and WPF applications is organized using a grid or tab metaphor – different groups of controls, or different views are placed within the same view, or on different pages in a tab strip. Even though this layout paradigm is probably the easiest to implement, it makes the UI inflexible, because the user has no control over the layout and ordering of the different views. As an application evolves, new screens get added to the existing layout paradigm, resulting in more difficult navigation and continual switching from one view to another. This in turn frustrates the user and causes dissatisfaction and low productivity, indicating that something needs to change.

Docking – highly customizable layout, however overly complex

When flexible layout is needed, developers implement that with a docking manager, which is also a part of our WPF and Silverlight products (samples). The docking manager enables users to customize the layout of different views on single or multiple monitors, and create floating and nested panes. One example of this layout paradigm is the Visual Studio coding and debugging docking layouts, which arrange views differently depending on the context of use of the application. The reason docking is quite appropriate for Visual Studio is that we as developers are primarily working with the code window, and are making occasional use of the other windows around it. We don’t need to change the layout much, because we’re focused on one of the views most of the time.

Docking is useful when the layout arrangement is relatively stable, because even as docking enables highly complex docking layouts, it does not enable the user to easily switch between different configurations. Furthermore, creating a good docking layout often takes time to produce, and is difficult to change, due to the overwhelming variety of ways panes can be rearranged. This makes docking a less-than-perfect candidate for the layout of an application where the user needs to often switch from one view to another.

Tiles – simpler layouts than docking, facilitates easy switching between them

In order to easily navigate an application with more than a few screens/views, and to easily focus on a view without needing to rearrange everything, users need layout to meet the following goals:

Layout should be easily rearranged to focus on different views at different times
While focusing on one or two views, layout should ensure all other views are out of focus, but still readily accessible
Layout should allow a view to present a concise version of itself when not in focus with only the relevant information presented (new leads, customer requests pending), without presenting the full view itself

The XamTileManager (available in both Silverlight and WPF products) enables the above interactions because of the following characteristics:

Supports different states of tiles – minimized, maximized, normal, minimized-expanded. This enables different content to be shown depending on whether the tile is currently the focus of the user’s attention (the tile is maximized), or is currently occupying a small part of the screen and should only show essential information about its status.
Contains a limited amount of interactions such as switching, resizing and changing the state of a tile (minimized, maximized, minimized-expanded). Does not support nesting and pinning of tiles, greatly reducing the possible number of configurations, making it easy for the user to rearrange a layout
Once a tile or tiles are maximized, all other tiles are automatically minimized

Summary

In this blogpost, different ways to organize layout were presented, along with their advantages and disadvantages. We demonstrated the limitations of simple layout, and the overly complex nature of docking, and the suitability of tiled layouts for applications that make the best use of available space. In a following post, we will demonstrate specifically how to setup the XamTileManager to fit one such scenario. For the time being, you can view the online samples (identical in Silverlight and WPF), or open the Equity Trading showcase, which is a part of the NetAdvantage for WPF Line of Business (trial) samples applications (source code included). It demonstrates how the tiling concept can be used to achieve a layout that’s flexible and easy to change, so you can decide whether and how this concept can enhance the layout experience in the applications you’re building.

If you have any questions or comments, you can reach me at kmatev@infragistics.com

Building the Sales Reporting Showcase - Use cases and controls

2011-12-29T09:06:00Z

The Infragistics Sales Reporting showcase, which is available here illustrates how to build a simple application using Silverlight. It implements the functionality found in a simple reporting system, and is built using Infragistics NetAdvantage for Silverlight Line of Business (download, samples) and Infragistics NetAdvantage for Silverlight Data Visualization (download, samples) suite of controls, showcasing their advantages over toolbox controls. This blogpost takes a look at the use cases we considered when building this showcase, and describes the decisions made in terms of application structure, UI design, and UI controls to meet these requirements. If you’d like to learn more on how these controls are used using code segments from the application, take a look at this blogpost. Here’s a screenshot of the application:

Use Cases and UI component choice

1. In order to better plan production volumes, marketing activities and product discounts, users would like to be able to look at sales figures from a variety of different perspectives, looking for growth opportunities in accounts, sales regions, and products. In order to gain this kind of insight, the user has to browse aggregated views of invoice data, and to easily modify the dimensions along which these aggregations are computed.

In order to meet the requirements of this use case and let users browse multidimensional data, we will use a XamPivotGrid control (samples). The XamPivotGrid control implements pivoting functionality, supporting both flat (sample), or OLAP data sources (sample), and Excel-like interaction allowing users to easily modify the aggregation dimensions and measures. Please see a screenshot of the XamPivotGrid below:

2. The user would like to easily modify customers’ details, and would like to also be able to edit orders placed by each customer within the same UI. The user would like to sort and filter customer records, as well as edit the attributes of a customer or an order with input validation, preventing them from entering invalid data (such as a non-numeric value for an order freight charge).

In order to meet this requirement, we will use a XamGrid control. This control implements sorting (sample), filtering (sample)and supports the on-demand retrieval of hierarchical records and their presentation in tabular form (sample), as well as rich data editing using specialized editors providing value formatting and validation (sample). Please see a screenshot of the XamGrid below:

3. Users process the data they see in the XamPivotGrid and XamGrid, either by printing, exporting it to Excel, or by adding and removing customers. The user would like to easily access these commonly used functions in an accessible location, visible at all times during their work with the application.

We will use the XamRibbon control (samples) to meet this requirement. It allows us to easily group related functionality in tabs and button groups (sample), and if appropriate to highlight relevant contextual functionality (sample). Please see a screenshot of the XamRibbon below:

4. One of the core requirements is to be able to view daily sales in a graphical way in order to see trends. The large volume of data requires an easy way of browsing it using zooming. Also, they would like to be able to easily see the sales value for any specific day, so they can then investigate what’s the product breakdown of that sale figure. Furthermore, they’d like to get a realistic expression of the sales volume over time, which filters out the noise from day to day differences in sales.

Meeting this charting requirement is possible using the XamDataChart control. This control binds quickly to high-volume data (sample), and allows users to zoom in and out using the mouse. The XamDataChart implements tooltips (sample) and trend lines (sample) to enable users to easily see specific values as well as the overall trends and patterns in the data. Please see a screenshot of the XamDataChart below:

Application Structure

As the application does not have strict performance requirements, and users would like to access the application remotely, it was built as a web application. The advanced data browsing capabilities it requires in the form of pivoting and charting led to the decision to use Silverlight, due to its rich interaction model, and its productivity as a development platform. The application uses an entity data model and RIA Services to make data available to the client. This approach was selected because of the ease with which it allows the data layer to be built.

UI structure

The relative isolation between the interactions required by different use cases allows us to simplify the UI by only presenting a single control at a time – the user either browses invoice data, or edits customers and orders, or views daily sales data in a chart. The user interface of this sample application consists of a single form with a tab control, which contains the different views of the application in different tabs. Above the tab control, a XamRibbon control contains buttons representing the most often performed tasks.

Summary

This blogpost summarized the use cases covered by the Sales Reporting showcase, and the rationale behind the choices made as to UI structure and components used. It provides an example of how Infragistics controls can be used to deliver a functional and richly interactive application to meet a certain set of requirements. Now that you’ve seen how easy it is to move from requirements to specific controls, and how to implement this, talk to your users and customers about these capabilities and find out how you can benefit from the advantages they provide.

If you have any questions or comments, you can reach me at kmatev@infragistics.com

Upgrading your charting experience using XamDataChart

2011-11-10T17:55:00Z

XamChart (samples no longer available as control has been retired since the 2012.1 release) is a charting control for Silverlight and WPF, available as a part of both the Line of business and Data Visualization products. With its support for interactive data browsing and a rich set of series, it has been a choice for a variety of charting scenarios for developers. However, to better handle scenarios with large amounts of data, and real-time data streams, the XamDataChart (samples) was introduced. It adds zooming, tooltips and a considerable degree of series and axis customizations to enable developers to implement sophisticated charting functionality. So, what are the differences in using the XamChart and the XamDataChart? In this blogpost I’ll describe how to build simple charting scenarios using the XamChart and XamDataChart, and what one needs to keep in mind when moving from the XamChart to the XamDataChart.

Using the XamChart

Please see below how to setup a XamChart with one line series:

1. There are no axes declared – these are automatically initialized according to the type of series

used

2. Series are specified using a single type – the Series type. Different kinds of series are specified using the ChartType property.

3. The DataMapping property sets the properties of the bound object to be used when initializing the chart series values

Using the XamDataChart

The XamDataChart offers powerful ways to interact with data, such as zooming, trendlines and chart synchronization. In addition to all the types supported by the XamChart, XamDataChart supports polar and radial series types. It enables developers not only visualize the data, but also enable users to interact with it. The XamDataChart only supports 2D chart types, and chart types which do not require an axis, such as a pie, and funnel are implemented by separate controls - XamPieChart, XamFunnelChart.

So, how do you use the XamDataChart?

1. Declare the axes (the XamDataChart supports string (CategoryXAxis, CategoryYAxis, CategoryAngleAxis), numeric (NumericXAxis, NumericYAxis, NumericRadiusAxis, NumericAngleAxis), and date (CategoryDateTimeAxis). In this case we’d like to have dates along the X axis, and numeric values along the Y axis, so we’re using the CategoryDateTimeXAxis and the NumericYAxis.

2. Declare the series, referencing the two axes

3. Declare a tooltip

Declaring a line series in a XamDataChart is illustrated below:

<ig:LineSeries
DateTimeMemberPath="Date"
Label="{}{Date:d}"
ItemsSource="{Binding}"
  XAxis="{Binding ElementName=xAxis}"
                        YAxis="{Binding ElementName=yAxis}"
                        ValueMemberPath="Sales"
                        ItemsSource="{Binding}"
TrendLineType="ModifiedAverage"
                        TrendLineBrush="Yellow"/>

Moving from XamChart to XamDataChart

If you’d like to move from the XamChart to using the XamDataChart because of its richer interaction capabilities and series type support, here are a few things to note:

1. The axes need to be declared and referenced in a series for it to be rendered

2. Each series type is implemented by a separate series type, such as LineSeries, ColumnSeries, BubbleSeries

3. The property of the bound object to be used for the chart series are specified using a member path property on the series

Summary

The XamDataChart is a powerful charting control, enabling users to browse and interact with data in a much richer way using zooming, inter-chart synchronization and tooltips. With a variety of series types and built-in trendlines, it’s fully capable of handing your charting scenarios. Talk to users of your applications and ask them where they can benefit from browsing their data in a visual say.

Using XamTimeline and XamDataChart to build an annotated view of your time-series data

2011-07-28T16:36:00Z

WPF allows developers to build highly interactive UIs, enabling users to browse large data sets displayed in charts using hardware-accelerated panning and zooming. However, when you’re building UIs featuring charts, your users will often request to have annotations displayed together with quantitative data. Even though the fast charting component XamDataChart (available both in Silverlight and WPF), doesn’t at this time have annotations out of the box, you can do this using the guidance in this blogpost. It describes an approach to display annotations in the XamDataChart, enabling you to integrate the quantitative and qualitative aspects of your data in a single screen. The approach is illustrated with a simple stock annotator containing a view showing the price of a stock, together with economy-level and company-level news shown using different templates (colors, fonts, styles) over the stock price. Annotations can be added, edited and deleted using a XamDataGrid control provided below the chart control.

Please download the sample project. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It includes early versions of the XamDataChart, XamTimeline, XamDataGrid 11.2 libraries, so you can build and run it without any additional downloads. Fully-functional free 30-day trials of the NetAdvantage for WPF Line of Business and NetAdvantage for WPF Data Visualization product are available.

Here’s a screenshot of the chart with the annotations displayed:

Why is this important

You would typically use a XamDataChart for presenting your quantitative time series data. The chart can quickly present large volumes of data, build trendlines, financial indicators, and many more. However, out of the box, it does not enable you to overlay your qualitative data on top of it. On the other hand, the XamTimeline is a control used for navigating a time series, which contains qualitative data. The approach described in this blog post combines the two to deliver both quantitative and qualitative data in the same control, allowing your users to see the data in context.

Approach specifics

The approach consists of the XamTimeline hosted in the plot area of the XamDataChart. The XamTimeline has had a number of customizations applied to it to adapt it to this scenario:

By default, the XamTimeline contains event panels both above and below the axis. In this case, the lower event panel is collapsed, together with the axis element.

The XamTimeline event title style is set up to display the clicked annotation details in the textbox on the right.

The XamTimeline details panel is set up to close when clicked, and to display the annotation details in the textbox on the right.

The XamTimeline event point has been styled to display the annotation details in the textbox on the right when clicked.

The XamTimeline minimum and maximum axis values are bound to the minimum and maximum values of the XamDataChart. Zooming in the XamTimeline and the XamDataChart is synchronized using an outside XamZoombar.

Please refer to the source code for implementation details.

Summary

This blog post presented an integration of the XamDataChart with the XamTimeline control in order to combine quantitative with qualitative time series data. Using this combination, which comes without any extensive styling customizations, user-code or control extensions, you are able to build on what’s been possible up to this point using out of the box functionality. Take a look at the data you present in the XamDataChart – if you do have any qualitative time-series data associated with it, and take advantage of the guidance presented here to integrate the two to enable your users to make decisions more quickly.

If you have any questions or comments, you can reach me at kmatev@infragistics.com

Optimizing Infragistics WPF Controls Startup Time

2011-07-07T17:15:00Z

The XAML platform allows us to deliver controls offering much richer interaction and flexibility when compared against Windows Forms. However, the many complex controls and elaborate themes, can increase the initial start up time in WPF applications, demanding specific attention to ensuring that users don’t have to wait when opening a form. One way to improve initial loading time of forms is to preload complex controls and themes they are using. This approach to improving initial startup time is illustrated in this blog post. If you'd like to learn about XamDataGrid performance optimization in terms of rendering and scrolling speed, please see this post.

The approach consists of opening on a different thread a window containing the components you will be using in your application, which is not shown to the user. The initialization of this window causes the control code to be JIT-ted, theme references to be resolved, and their definitions loaded. Once this CLR housekeeping work is done, subsequent initializations of the pre-loaded controls are significantly faster.

Please download the sample project. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It includes trial versions of the XamDataGrid 11.1 libraries, so you can build and run it without any additional downloads. A fully-functional free 30-day trial of the NetAdvantage for WPF Line of Business product is available. Below are screenshots of the project comparing initialization and rendering times with and without preloading, which illustrates the impact of preloading on initial startup time:

Sample Project UI

Running the sample opens two windows – the preload window, and the main window. The main window displays the amount of time the XamDataGrid window took to initialize and render. It also contains a button, allowing you to launch additional XamDataGrid windows.

How to use this sample

You can see the effect of preloading, by toggling it on and off using the value of the IsPreloaded property, defined in App.xaml.cs. By default it is set to true, causing the hidden window to be initialized and opened at application startup, thus preloading its contents – in this case the XamDataGrid, XamRibbon and XamDockManager. Set it to false and observe the much longer initial loading time. Click on the button in the form to launch additional windows, containing a XamRibbon, XamDockManager and XamDataGrid bound to sample data. The performance benefit is visible in the first invocation, as subsequent invocations use the code JIT-ted during the first invocation.

Please note that in case IsPreloaded is set to false, the first window takes substantially more time to open than any subsequently open grid window. This is because the first time a type is loaded, it has to JIT the MSIL, locate and load theme resources, and so on. This is actually what the hidden preloading window does (when the IsPreloaded property is set to true) – it causes the pre-JIT-ting of MSIL for controls shown int the window, ensuring that when the user actually opens a window containing the same controls, the window will appear much faster, because it can reuse the already JIT-ted code of these controls.

Approach Description

The application opens a window, which isn’t displayed to the user, because it’s shown outside of the bounds of the screen. This window contains controls that will be preloaded, and will subsequently be loaded significantly faster in other screens in the same application. Only controls appearing in the preload window will subsequently have a smaller initial loading time, i.e. unless you preload a component, its initial start up time will not decrease. A significant amount of the initial loading time is due to resolving and loading themes. This is why it's important to have the preload controls theme set to the same theme you'll be using them with in your application. In this sample, the XamDataGrid, XamRibbon and XamDockManager appear in the preload window, but depending on the controls you are using, you may wish to include them into the preload window, so they can have a smaller initial start up time in your application. Most often, you’d want to preload complex controls such as XamDataGrid, XamDockManager, XamTilesControl, XamRibbon and XamSchedule.

Preload Window Architectural Implications

This approach only speeds up the first rendering of the preloaded controls. In doing so, it adds to the structural complexity of your application, so you need to carefully consider its implications before adopting it. The preload window is initialized, opened and closed in the OnStartup event handler in App.xaml.cs. You might want to move it together with the rest of your application start-up code (authentication operations to servers, loading presisted data, etc). It uses a separate thread to open the window, in order to minimize the time your system spends initializing. Please consider the implications of the approach for your application before using it.

Summary

In this blog post we looked at how to preload complex components in order to improve the initial loading time. For runtime related performance optimizations, please see my blogposts on XamDataGrid performance optimization and XamDataChart real-time data performance optimization. In conjunction with this post, this advice would allow you to present your users with an application featuring complex controls such as XamDataGrid, XamRibbon, XamDockManager that’s not only functional and visually appealing, but also with a short initial loading time.

A Sample Sales Reporting Application Built Using Silverlight

2011-04-12T16:57:00Z

Many customers are choosing Silverlight for building line of business applications because of the productivity of the platform and the rich interaction it enables. We offer fully-featured products in the Silverlight area, including standard line of business controls such as a grid, menu, ribbon, outlook bar, chart, scheduler, as well as data visualization controls such as a chart, map, pivot grid, among others. Recognizing the interest among developers toward this platform we held the Building Data Access Applications using the Silverlight Data Grid, where I introduced a sample business reporting application, built using our products.

UPDATE: A recording of the webinar is now available. The application is now available here.

This blogpost presents how this sample is built, and highlights certain features which you may find valuable in your applications. The sample project is available for download. Please remember to unblock the ZIP archive before extracting it. It is built based on Silverlight and Visual Studio 2010, and uses RIA services for exposing data to the Silverlight application. The downloadable package includes trial versions of the NetAdvantage for Silverlight product libraries it needs to run, so no extra downloads are required to run this sample. Free fully functional trials are available of the line of busines and data visualization products. Here’s a screenshot of the application when run:

Setting up the sample

Even if you do not have the resources to fully setup the data tier of this application, its source code would be valuable to you, because it demonstrates the features, interoperability and styling of key controls in the NetAdvantage for Silverlight Line of Business and Data Visualization products.

Before you run the application, you need to setup a connection the Northwind database on a database server. You most probably have an SQL Express installed together with Visual Studio 2010, which you can use to host the Northwind database, which is freely available. Once the Northwind database is setup in your database server, you need to set the database server setting in the web.config file of the InfragisticsDemoApplication.Web project. Once you open the web.config file, please locate the <connectionStrings> element, and make sure that in the element inside, you set the path to the database server instead of the MYCOMPUTER\SQLEXPRESS text in the string below.

<add name="NorthwindEntities"

connectionString="metadata=res://*/ClientBin.NorthwindEntities.csdl|res://*/ClientBin.NorthwindEntities.ssdl|res://*/ClientBin.NorthwindEntities.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=MYCOMPUTER\SQLEXPRESS;initial catalog=Northwind;integrated security=True;multipleactiveresultsets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />

Using XamRibbon

The XamRibbon is setup using two tabs, with three button groups, each containing button tools. This is fairly easy to setup using the code below, setting up a single tab with one button group, containing two buttons:

<ig:XamRibbon Name="XamRibbon1" Grid.Row="0">             
  <ig:XamRibbon.Tabs>                 
     <ig:XamRibbonTabItem Header="Home" >                     
        <ig:XamRibbonGroup Caption="Customers" x:Name="customersGroup">                         
          <ig:ButtonTool x:Name="btnAddUser" Caption="Add Customer" LargeImage="../Images/UsersAdd.png" 
              Click="btnAddUser_Click" />                         
          <ig:ButtonTool x:Name="btnRemoveUser" LargeImage="../Images/UsersDelete.png" Caption="Delete Customer" 
              Click="btnRemoveUser_Click" />                     
        </ig:XamRibbonGroup>
     </ig:XamRibbonTabItem>
  </ig:XamRibbon.Tabs>
</ig:XamRibbon>

Setting up XamGrid and implementing CRUD

The UI is built using a TabControl which hosts a number of XamGrids and a XamPivotGrid. An Entity Data Model was generated for the tables in the Northwind table, together with a DomainService which exposes this data and handles committing any changes made by the Silverlight application. Once a DomainService is setup, code is automatically generated on the client to communicate with the service. This causes the entities exposed by the DomainService to appear in the Data Sources snap-in in Visual Studio. Within the Silverlight application, the XamGrids were setup by dragging the corresponding table from the Data Sources snap-in into the design surface of the form. This sets up a XamGrid (a more detailed walkthrough of this scenario is available) in the form, bound to data from the corresponding entity in the model.

In addition to hierarchical data and CRUD, the XamGrids in the sample also demonstrate filtering, selection, summaries and conditional formatting behaviors. Please take a look at the code for implementation details.

Binding to Hierachical Data

Binding to Hierarchical data is implemented in the Customers grid, which also shows the Order items for each customer. The approach uses a separate operation in the DomainService class, which retrieves customers together with associated Order objects. A detailed walkthrough of how to implement this is available.

Implementing CRUD

Once the XamGrids have been bound and record adding, editing and deleting has been enabled using row-based editing by setting the EditingSettings AllowEditing property to Row, we implement CRUD operations by handling the RowDeleted and RowExitedEditMode (called when a row was edited, as well as added) events. A detailed walkthrough of data editing in the XamGrid is available.The code in the handlers of these events calls the SubmitChanges method of the customerDomainDataSuurce, which commits changes made in the UI down to the database:

private void customerXamGrid_RowExitedEditMode(object sender, EditingRowEventArgs e)
{     
               //commit to the database changes made during a row add or row edit     
               customerDomainDataSource.SubmitChanges();
}
 
private void customerXamGrid_RowDeleted(object sender, RowEventArgs e)
{
               //commit to the database deleted rows     
               customerDomainDataSource.SubmitChanges();
}

Charting

The sample uses two of the charts we’re offering – XamWebChart and XamDataChart. They present sales data in dialog windows, which can be opened using the buttons in the ribbon. The charts have been bound to data from DomainService, including a breakdown of sales by product using an animated pie chart (using the XamWebChart), and a timeline of sales over more than two years (using the XamDataChart). The XamDataChart also has a trendline added, as well as a tooltip, allowing the user to easily see the values and dates when spikes in sales occur. The XamDataChart also has enabled horizontal zooming, allowing a business user to easily narrow down their analysis of the sales data. Please see how these charts are declared for details on how these features are implemented. Here's a screenshot of the daily sales chart:

Data Pivoting

The sample includes a pivot grid component, which is included in our NetAdvantage for Silverlight Data Visualization product. Using a data selector component, showing all the available dimensions and measures, the user can easily setup their own view of the data, using the familiar Excel-type of pivot table interface. In this case, the pivot grid is used to interactively slice and dice Invoice data from the Northwind database. Here's a screenshot of the pivot grid view:

Theming

All the Infragistics controls in the sample have been styled using the Office 2010 Blue theme using resource dictionaries, included in the sample. These resource dictionaries are added in the App.xaml file which makes these styles available across the application. The Office 2010 Blue theme is available for all our controls in all our products.

Printing

Printing is implemented using the standard Silverlight 4 printing. Pressing the print button prints the grid control in the currently active tab, including the pivot grid.

Excel Export

Excel export is provided for the grid control in the currently active tab. Excel export is implemented for both XamGrid and XamPivotGrid in a separate ExcelExporter class.

Summary

This blogpost describes a sample business reporting system built upon Silverlight. It presents how grids, charts and a pivot grid are used to deliver a rich user experience, offering interactive data browsing (XamPivotGrid and XamDataChart), CRUD operations and hierarchical data in a XamGrid, printing, excel export in an application themed using the Office 2010 blue theme. This sample gives you a basic scenario of how you can use Silverlight and NetAdvantage for Silverlight suite of products to quickly build a functional and visually-appealing business application.