Blog

Understanding NetAdvantage for Visual Studio LightSwitch - Dealing with Charts (Part 1)

[Infragistics] Mihail Mateev / Wednesday, August 3, 2011

Infragistics Inc. released the new NetAdvantage for Visual Studio LightSwitch 2011.1. This article is about where you can use this product and how to start use it. The complete list of Infragistics extensions for Visual Studio LightSwitch  can be found in the wonderful article from Jason Beres "Announcing NetAdvantage for Visual Studio LightSwitch".

Additional information how to install NetAdvantage for Visual Studio LightSwitch 2011.1 you could read in the article Installing the RTM version of NetAdvantage for Visual Studio LightSwitch.

NetAdvantage for Visual Studio LightSwitch is a product that offers a variety of components for data visualization, a great complement to the standard controls in Visual Studio LightSwitch 2011, designed primarily for business applications.
Package also provides themes and shell, which completely replaces the standard user interface of applications created with Visual Studio LightSwitch.

This Blog presents how to create an example application with Visual Studio LightSwitch, using Infragistics Extensions for LightSwitch.

Visual Studio LightSwitch control extensions are 3 main groups defined by the type of the bound data

  • Value based controls
  • Group based controls
  • Collection based controls

Detailed information about different types of LightSwitch controls you can find in the article "Announcing NetAdvantage for Visual Studio LightSwitch".

To be possible to create applications with NetAdvantage for Visual Studio LightSwitch you need to have:

For this sample you also need to have

Steps to cerate the application are very simple:

  • Create LightSwitch Application (Visual C#)
  • Add Data Source from Northwind database
  • Create screens in the LightSwitch Application, using Infragistics LightSwitch Extensions.
  • Additional settings of the controls and  the entire LightSwitch application
  • Deploy the application.

Before to start check Infragistics LightSwitch extensions availability.

You could check in Visual Studio IDE: Tools->Extensions Manager  if you have active Infragistics LightSwitch Extensions

Start new LightSwitch Application (Visual C#)

Make available Infragistics LightSwitch extensions in this application (check this extensions in the LightSwitch project –> Properties –> Extensions tab

Add data source from Northwind database.

Select 6 of the tables:

  • Customers
  • Orders
  • Order Details
  • Suppliers
  • Products
  • Categories

Create four screens:

  • EditableOrdersGrid
  • EditableProductsGrid
  • OrdersListDetail
  • ProductListDetail

The first two screens will be used just to edit data. These screens are not subject to this article.

The last two screens are from “List and Detail Screen” type. This screen template is more flexible when you want to show a list of data and details for the selected item from this list.

ProductListDetail screen

This screen contains :

  • Infragistics Data Chart
  • Infragistics Pie Chart
  • Infragistics Numeric Editor
  • Infragistics Numeric Slider
  • Infragistics Radial Gauge (group based)

- Infragistics Data Chart settings:

Data Chart cold be used to replace standard collection based controls like DataGrid and List controls.

When you add Infragistics Data Chart control there is only one possible child control: Series Group

Infragistics Data Chart supports 8 different category series:

  • Area Series
  • Bar Series
  • Column Series
  • Line Series
  • Spline Area Series
  • Spline Series
  • Step Area Series
  • Step Line Series

To be possible to use these series you should firstly select field for Category Axis (Product Name in this case). This field will be used in X axis

Add these series:

  • Column Series with filed Unit Price as a source
  • Spline Series with Units in Order as a source

- Infragistics Pie Chart settings:

This control could show pie chart using two fields (properties):

  • Pie Chart Labels
  • Pie Chart Values

The first one is used for pie labels and the second one – for pie values (sizes).

OrdersListDetail screen

This screen is a very similar to the first one. It contains information about orders. More details could be found in the sample application.

Run the application and select different screens.

Infragistics LightSwitch Shell

The shell could change the whole  LightSwitch application UI. It could display the screens, navigation  and command controls (Edit, New, Save) in different ways.

Infragistics LightSwitch Extensions contain Infragistics LightSwitch Shell. This shell arranges windows in the Tile View control. Navigation is based on Outlook Bar control.

To change the shell from LightSwitch project properties –> General Properties –> Shell select “Infragistics LightSwitch Shell”.

Run the application again and enjoy the nice UI, proposed via Infragistics LightSwitch Shell.

Infragistics LightSwitch Themes.

Infragistics proposes four themes for Visual Studio LightSwitch. More information you could find in the Jason Beres post: Using Custom Themes in Visual Studio LightSwitch.

You could change the theme from LightSwitch project properties –> General Properties –> Theme. In this sample we will select from the list “Infragistics Neo Metro Theme”.

Run the application again and enjoy the beautiful colors, applied to all controls.

 Deployment:

This article does not affect LightSwitch Application Deployment.

More information you could find in these posts: