Introducing Running Total – a reference app for Infragistics' Windows 8 controls

Today it gives me great pleasure to introduce you to Running Total. Running Total is a reference app for Windows 8 built using infragistics NetAdvantage for Windows UI. It allows runners to visualize their running data.  Not only is the application a showcase for these wonderful new controls, it has also been built with best practices for Windows 8 and features beautiful visual design by Infragistics’ own Tommy Rausch. The Running Total application is also what you will need to download to access the beta of our NetAdvantage for Windows UI controls so I would like to walk you through some of the key features of the application and show you how the features of these new controls can enhance the applications you build.

Getting Running Total working on your machine

Here are the steps to get the reference application working on your machine:

1. Download the reference application from this page.
2. Unzip the reference application to your machine.
3. Open the "RunningTotal.sln" solution on your Windows 8 machine in Visual Studio 2012.
4. Build and run the application in either the Simulator or Local Machine.

What is Running Total?

Running Total is a Windows Store application that allows runners to visualize the data they save using RunKeeper.  It was built using XAML and C#.  In it's preview form for this release of NetAdvantage for Windows UI, Running Total does not require a RunKeeper account and simply uses data that is stored locally in the application.  The app uses our chart and geographic map controls to present running data in an aesthetically pleasing and engaging fashion.  

Dashboard

The visualization starts right on the hub screen when the app is launched with the "monthly totals section:

This section uses a column chart to show mileage totals for the months of the current year.  This is a quick way for runners to see if they are keeping up with their running frequency as the year progresses.  This is a good example of how small charts can be used to create beautiful Windows 8 dashboards.  Notice also that you can also compliment your NetAdvantage for Windows UI controls with standard controls in the creation of these dashboards.  The "This Year's Totals" section on this screen is nothing more than TextBlock controls inside of a StackPanel.  However, they are a perfect companion to the data shown in the chart below.

Main hub

The main portion of the application hub screen (the top level screen for the application) shows up to 10 runs per month from the user's RunKeeper account:

The data shown here allows for a quick view of some summary information for each individual run that is shown.  This allows for a user to take a quick look at their run data.  If they want to drill in for more detail they have 2 options: tap the header (e.g. "May - 14 runs >") to get a month view or tap an individual run for details on that specific run.

Month view

The month view for Running Total shows an interesting way to visualize the "group" concept for a Windows 8 application.  Instead of providing a typical summary style group view like you would find in the standard Grid Application template, Running Total provides a more engaging data visualization experience:

This view allows for some summary data to be shown at the top alongside an Infragistics column chart wherein each column represents a day of the month.  The bar height indicates the amount of miles run on that day.  Future improvements to this screen could include an average page line series laid overtop of the columns.  Tapping on an individual column will navigate to the run details for that date similarly to tapping a run from the main hub screen.

Individual run details

The best usage of data visualization in Running Total has been saved for the actual individual run details themselves.  One thing that is fairly common in visualizing this type of data is the combination of a geographic map view of the data  and a chart showing elevation and pace.  This is exactly what I chose to provide for Running Total:

This view takes advantage of our NetAdvantage for Windows UI geographic map control and our chart with area and line series.  The geographic map is using a PolylineSeries to overlay the run route over the map and a marker (the GPS dot) to indicate the current point being shown on the chart below.  The chart uses an Area series to show elevation data and a Line series to indicate average pace at various points of the run.  Mousing over or panning over the chart with your finger on a touch device will make the GPS point move on the map to the point where tooltips are being shown on the chart.  The data is synced between the chart and the map by using the same GPS data as a data source for both the PolylineSeries and the chart series'.  This synchronization requires a bit of application code which I will show in my upcoming Windows 8 tutorial that will show you how to build this application.

Other niceties

There are a few other features this application implements that help it fit into the Windows 8 UI.  One is a snapped view which allows you to use Running Total while doing other things on your machine:

Another is a semantic zoom for the main hub:

Call to action

Windows 8 is out and it is now time for developers to start building the applications users will be installing on their new devices such as the Microsoft Surface.  NetAdvantage for Windows UI can help you build amazing experiences for your users.  Our map control will allow you to use markers and polylines to help visualize all kinds of geographic information.  Our chart control features touch-first panning and zooming with over 50 chart types!  Download the reference app and get started on your Windows 8 journey today.

Really quickly I want to acknowledge the work done by Tommy Rausch on the visual design of the application as well as the work my brother Aaron Schooley did on the GPS math used in the application.  I also couldn't have made some of theses features work at all without the help of Graham Murray.

If you need any assistance with getting Running Total up and running, please feel free to email me at bschooley@infragistics.com or find me on Twitter @brentschooley.  I hope you enjoy the Running Total application and get the most out of our NetAdvantage for Windows UI controls.