What is new in NetAdvantage for XAML LoB and DV

[Infragistics] Mihail Mateev / Saturday, April 28, 2012

When we talk about NetAdvantage for XAML we mean WPF and Silverlight. Now  NetAdvantage offers many new XAML cross-platform components and new features for the existing controls. This article is about new features and innovations in NetAdvantage for Silverlight and NetAdvantage for WPF 2012 Vol.1. For the first time, Infragistics Data Visualization tools are included with our Line of Business XAML products, and will no longer be offered as a separate product. 

The key new features are:

  • Support for Visual Studio 11 Beta
  • Metro Touch-Friendly Styles across all controls
  • Touch Gesture Support
  • Color Tuner support across all controls
  • Point Chart
  • OLAP Axis Chart
  • Overview Plus Detail Pane
  • OLAP PieChart
  • XamSparkline control
  • More Business Intelligence capabilities in Pivot Grid
  • Geographic Map control (XamGeographicMap)
  • XamGrid new features
  • Infragistics Undo/Redo Framework
  • Infragistics Excel Engine
  • XamRibbon Customization dialog
  • XamBarcode human-readable barcode text

Visual Studio 11 (Beta) Support

You could use IG Controls and Components in VS 11 Beta!

Metro Theme

In NetAdvantage 12.1 Metro style  can be applied to all controls. This theme is using white, gray and black colors, with cyan as a highlight/accent color. Since this is a theme made especially for touch environment, the controls have larger touch areas for easier use.

Metro theme for XamGrid and XamMap

Metro style for Infragistics Data Chart and Pivot Grid

 Touch Gesture Support

Starting from the 12.1 release the NetAdvantage for XAML controls supports touch gestures. There are many improvements in the controls to support touch gestures, like larger touch targets and invisible touch buffers so that the controls can be easily operated in a touch environment. Also to make controls even more easy to use with fingers you can apply a specially created Metro Theme.

  • Supported Gestures

 

Gesture Description Activity
Tap

Briefly touch the surface once.

  • Clicks buttons
  • Selects items
  • Selects cells in lists
    Selects grids
Long Press

Touch the surface for an extended period of time and release when an indicator is shown.

  • Shows contextual information /contextual menus
  • Acts as a tap action if no other functionality applies
Double Tab

Touch the surface twice in a short period of time.

  • a mouse double click
  • zoom in
  • open
  • edit
Pan

Touch the surface and then move your finger without losing contact.

  • Scrolls an area (if in scrollable area)
  • Moves an element (if over an element)
  • Resizes (windows, dialogs or other resizable elements)
Flick

Touch and quickly brush the surface.

  • Used for inertial scroll of scrollable content

 

XAML Color Tuner

The Color Tuner allows developers to easily style their entire application with a few clicks of the mouse.  Implemented as a Visual Studio extension, a developer can open the Color Tuner within their project, choose one of the available themes and apply any color to that theme. This creates the updated XAML which is inserted into the App.xaml file and applied globally to the entire application.

The Color Tuner helps developers achieve the following:

  • Easily apply application-wide themes for the Infragistics controls.
  • Color-tune a theme without writing any XAML code.
  • Save color tuning configurations.
  • Share color tuning configurations.

How it works

XAML Color Tuner works using Resource Washer™ component. Basically, what XAML Color Tuner is doing is shown in the code sample below and it does the following:

  • It adds Resource Washers to App.xaml application resources. If Application.Resources is not defined, it will be added automatically.
  • Resource Washers will be added inside a ResourceDictionary.
   1: <Application.Resources>
   2:  <ResourceDictionary>
   3:   <ResourceDictionary.MergedDictionaries>
   4:    <!--Resource Washers will be inserted here-->
   5:   </ResourceDictionary.MergedDictionaries>
   6:  </ResourceDictionary>
   7: </Application.Resources>

 

You open the tool using the Microsoft Visual Studio Standard Toolbar and selecting View->Other Windows -> Infragistics Color Tuner

In the Color Tuner window you could select projects from the current solution, containing Infragistics components.

You can change the current theme or to create your own themes by color tuning the default Infragistics themes. To do so, choose one of the default themes shown in the Themes window, in Installed themes panel, and click on Color Tune… button

XamSparkline control

Spark Chart (Line, Bar, Area & Win Loss)

The primary benefit of Sparkline compared to other charting controls is that it can render in a limited space such as a grid cell with all its visual elements shown. With that in mind, the Sparkline cannot display every label of the data points. It only allows showing high and low values on Y axis, and first and last values on X axis.

Spark charts are minified versions specific chart types that are typically used in dashboards or data grid cells so users can spot trends, variations and patterns in the data in clear and compact graphical representation.

Sparklines are small data-intense, design-simple, word sized graphics. In the grid, sparklines are placed next to the range of data on which they are plotted. In XamGrid, a dedicated column/ row is created for displaying the sparkline and information associated with it is either placed next to the range of data selected or after the last row/column in the grid.

NetAdvantage 12.1 contains 4 variations of Spark Charts:

  • Sparkline Line Chart
  • Sparkline Bar Chart
  • Sparkline Area Chart
  • Sparkline Win/Loss Chart

Some of the general features of the Spark Charts are:

  • Markers - Show First / Last Marker, Negative Markers, High Markers, Low Markers
  • Trend Lines
  • Ranges
  • Tooltips

Sparklines were first introduced with Office 2010 and more information on it can be found here:

http://en.wikipedia.org/wiki/Sparkline

With the new NetAdvantage 2012 Vol.1 you cab have a dedicated Sparkline Column type available for the XamGrid!

 

 

XamDataChart new features

  • Point Chart (Point Series for XamDataChart)

The xamDataChart has introduced another type of series called PointSeries. It intends to display the data points as markers or points using small shaped icons identifying them.

The Point Series is one of the chart types in XamDataChart’s family of category series. It is designed to render the data as points or markers on the chart. The numeric values correspond to Y axis, and the X axis is used for displaying the labels.

The XamDataChart supports single or multiple point series objects to be rendered, meaning one collection or more than one collection of data.

Data Chart with a single point series objects

Data Chart with a multiple point series objects

  • OLAP Axis Chart

An OLAP Axis Chart presents a graphical representation of the OLAP data source. Integrating Infragistics XamDataChart control with an OLAP data source gives developers an opportunity to deliver a true end-user drill-down experience with large volumes of data in a highly visual way.

Infragistics OLAP Axis Chart has three main parts:

  • DataSource – the OLAP data source, which is shared with one or more XamPivotGrid and / or XamPivotGrid Slicers
  • OlapAxisSource – indicates where the data will for axis will be read from (rows or columns)
  • YAxis – the data chart Y axis that will be used for value data

An OLAP Chart displays data series, categories, data tooltips, and axes just as standard charts do.

Common scenarios include sales, financial dashboards:

  • In a sales dashboard, OLAP Chart can be used to show multi-dimensional sales data of an organization. It can depict sales totals across an entire country, state or any region, and also display further details for sites where sales are particularly strong or weak.
  • Hierarchical Financial data: OLAP chart can be used for reporting income statements and balance sheets that include all subsidiaries. It can also show the financial data in a specified local currency at each level or subsidiary.

  • Overview Plus Detail Pane

The XamDataChart has introduced an overview of chart content is represented by the XamOverviewPlusDetailPane control. This control provides preview of all types of supported series as well as navigation functionalities.

OLAP Pie Chart

The XamOlapPieChart is released as CTP in 12.1. The control represents the OLAP data like sequence of connected pie charts. Each pie chart represents one chunk of data from OLAP data source. The user can choose which slice to be shown as pie chart and which to be shown as data of single pie chart.

The new XamOlapPieChart control is fairly simple to use. You need to add the required assembly references, add the appropriate namespace and provide an OLAP data source to the control instance’s data source property. Read here to see how to do that

Pivot Grid new features 

In NetAdvantage 2012 Vol.1 for XAML Pivot Grid comes with many new features:

  • Define calculative rows & columns and calculated measures – allow the ability to add custom filed with custom calculated logic.
  • Excel-like Filter/Query Dialog with Expressions (CTP) – give ability to apply different predefined filters to data source. Expose convenient UI for specify user parameters.
  • Template Column – Allow user to apply different template for defined hierarchy. Using this feature user can fully customize the data look and view.
  • Highlighted Row(s) State (Template) - Allow ability to select header cells from rows or columns. These cell are also added to selected collection.
  • Dynamic Field Lists – give ability to control dimensions shown in DataSelector’s dimensions tree. In this way user can load different dimension depending from logic he has.
  • Data Selector Lockable Sub Components - Allow the ability to enable/disable the sub components of the data selector. Depending on the user logic, one or more sub components can be enabled/disabled.
  • Restrict Sub Component Fields – allow the ability to restrict dropping of specific dimension on specific area.
  • Field Chooser – Show convenient dropdown from which user can choose the dimensions which populate grid with data.

XamGeographicMap

The XamGeographicMap control allows you to display data that contains geographic locations from view models or geospatial data loaded from shape files on geographic imagery maps. This control is shipped as a CTP in 11.2.

XamGeographicMap  component offers:

  • Unified geographic and charting API
  • Nice User interaction: Tooltips, OPD, Zoombars (same as DataChart)
  • Many series-specific features

Some of the key features are :

  • Map Progression - Display multiple shape series in the Geographic Map control to show progression of the values in the different places.
  • Series Drilldown - Load and display different shape files based on zoom distance in Geographic Map control.
  • Overview Pane – Use the map overview pane to navigate the maps in an intuitive and easy to use display.
  • Imagery Tile Source (including OpenStreetMap, Bing Maps, etc.)
  • Many Geographic Series – You could use
    - GeographicShapeSeries
    - GeographicPolylineSeries
    - GeographicContourShapeSeries
    - GeographicContourLineSeries
    - GeographicScatterAreaSeries
    - GeographicXYTriangularySeries
    - GeographicSymbolSeries

 

XamGrid new features

NetAdvantage 2012 Vol.1 comes with several new features for XamGrid:

XamSparkline column The Sparkline column type allows the display of a Sparkline chart in a grid cell by inserting the XamSparkline control.
XamMultiColumnCombo column

The MultiColumnCombo column is column type that displays multiple columns in a drop down list.

DateTimeColumn column The DateTimeColumn displays dates using the xamDateTimeInput control.
Copy and Paste Helper Methods The copy and paste helper methods facilitate the data copying and pasting in the XamGridcontrol
Support for implicit data templates The XamGrid supports applying implicit data templates on specific data type in a TemplateColumn.
Custom Filter Dialog The dialog interface can be used by the end user to create complex filters on data in a column.

The XamSparkline is a light-weight charting control capable of displaying data markers for the highest and lowest values, first/last/negative values and markers for all data point.

The difference between the MultiColumnCombo column and the ComboBoxEditor column is that MultiColumnCombo can display more information for each data item, using multiple grid-like columns.

When a DateTimeColumn is added to the XamGrid control to visualize the DateTime values of the underlying data  a mask is applied to format the display DateTime value.

Infragistics Excel Engine

Excel library now supports accessing built-in styles, parent styles, format options, numerous Microsoft Excel behaviors regarding styles, and possibility for determining resolved cell formats.

The key new features are:

Named Table Reference The Excel library now supports the ability to access and create named Tables with data from the worksheet. The tables can be sorted, filtered, and aggregated.

Get Cell by Name Reference

Now it is possible to get cell by name reference 

 

Sorting Tables Sorting is done by setting a sorting condition on a table column. When a sorting condition is set on a column, all sort conditions in the table will be reevaluated to determine the order of the cells in the table. When cells need to be moved to meet their sort criteria, the entire row of cells in the table is moved as a unit. If the data in the table is subsequently changed, the sort condition will not be reevaluated.

Excel 2007 Color Model

This release introduces an updated color object model. Using Excel 2007 Color model you can specify a color, work with Workbook palette and use new Fill property for filing a cells.
Filtering on Exported Table Filtering is done by applying a filter. When the filter is applied on a column, all filters in the table will be reevaluated to determine which rows should be visible. This operation will show rows where all cells meet their table columns’ filter criteria.

Load Excel w/o Losing Formatting

Excel library now supports accessing built-in styles, parent styles, format options, numerous Microsoft Excel behaviors regarding styles, and possibility for determining resolved cell formats.

XamRibbon Customization dialog

The Infragistics Silverlight XamRibbon got a configuration dialog in NetAdvantage 2012.1!

When you open it you have two tabs with configs. The first one is the Ribbon config and the second is the Quick Access Toolbar.

 

XamBarcode human-readable barcode text

The XamBarcode™ has introduced a property called ShowText for the purpose of hiding or showing the human readable text also known as the data of the bar code. The bar code text is located underneath the barcode. By default, the text is visible.

Undo/Redo Framework

The Infragistics Undo/Redo Framework provides support for undo/redo functionality available in the most applications. Using the framework API, you can implement unlimited multi-level undo and redo of the end-user operations.

Key features of the Undo Framework include:

  • Undo/Redo History Stacks – The UndoManager automatically manages the Undo/Redo history stacks. The collections raise change notifications and therefore may be used as a source for providing a UI that displays the entries in the history stacks.
  • Built-In UndoUnits – The framework includes a number of built in undo units that providesupport for undoing/redoing property and collection changes.
  • Delegate UndoUnit – The framework makes it easy to add a method/delegate as an operation in the undo/redo history.
  • ObservableCollectionWithUndo – The framework includes a derived ObservableCollection that makes it easier to add support for undo/redo of collection changes.
  • Transactions – Provides the ability to group one or more operations into a single history entry. One may also rollback a transaction performing the operations that were stored up to that point.
  • Custom UndoUnits – The framework allows developers to create their own custom UndoUnit to support undo/redo of other types of operations.
  • Commands – A number of built in commands are provided to make it easier to invoke an Undo/Redo operation from within your UI.

The UndoManager automatically manages the Undo/Redo history stacks. This provides the functionality for performing undo/redo operations and maintaining the undo/redo history.

   1: this.DataContext = new CustomersViewModel();
   2: UndoManager.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(UndoManager_PropertyChanged);
   3:  
   4:  
   5: void UndoManager_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
   6: {
   7:     if (btnUndo != null)
   8:         btnUndo.IsEnabled = UndoManager.CanUndo;
   9:     if (btnRedo != null)
  10:         btnRedo.IsEnabled = UndoManager.CanRedo;
  11: }
  12:  
  13:  
  14: private UndoManager UndoManager
  15: {
  16:     get 
  17:     { 
  18:         return ((CustomersViewModel)this.DataContext).UndoManager; 
  19:     }
  20: }
  21:  

 

Infragistics Undo/Redo Framework can work different controls. For example in the XamSchedule control you can create, edit and delete appointments, each operation can be reverted using the underlying framework.

Undo Redo Framework could be  used with the XamGrid control. As you create new records, edit existing data or delete records, each of these operations can be reverted by the underlying framework.

If you need more information about Undo/Redo Framework you could read this blog.

CTP Stuff

NetAdvantage for XAML  2012 Vol.1 also offers many new CTP features like:

  • XamDataGrid Performance Enhancements

     -Sorting
     -Grouping
     -Filtering
     -Summaries

  • XamDataGrid and XamCalculation Manager Integration

And more…

I want to mention, not least the new and more convenient and more intuitive NetAdvantage 12.1 Install Wrapper, you can use to install the latest version of the Infragistics products.

You can try this product very soon. Follow news from Infragistics in https://www.infragistics.com/ and twitter: @infragistics for more information about new Infragistics products.