ComponentArt

Developing Mobile Dashboards for ComponentArt Dashboard Server

milos — Fri, 14 Oct 2011 18:16:00 GMT

What is ComponentArt Dashboard Server?

Since our recent announcement of ComponentArt Dashboard Server, there has been a lot of interest and excitement about the technology, and understandably so:

We can now target any mobile device including iPads, iPhones, Android phones and tablets, BlackBerry phones, PlayBooks, upcoming Windows 8 tablets in addition to all desktop and laptop browser environments.
We can develop our entire application in the XAML environment we know and love.
We can use all of Data Visualization for .NET, with its extensive and mature feature set and high degree of graphical sophistication, and get pixel-perfect rendering and rich interactivity on all HTML5 devices.

How does Dashboard Server work?

A key part of the Dashboard Server system is the Dashboard Server SDK. Delivered as a Visual Studio extension package, the SDK provides a quick way to get started with a Mobile Dashboard project and proceed as one would with any XAML development. The Mobile Dashboards are developed entirely in this familiar environment.

At compile time, the SDK build environment produces a XAP containing Silverlight dashboards to be deployed to Silverlight-capable clients, as well as an EXE containing server-side (WPF) versions of the same dashboards to be processed on the server and translated to HTML5 and other formats at runtime. The procedure adds very little overhead to the compilation process and is entirely removed from the developer-facing experience.

The result is a web application ready to be deployed to an IIS web server. It includes all the assemblies it depends on and can be configured in its web.config file or by using a separate Dashboard Server Admin application.

Requests to the application are directed to the Dashboard Server HTTP handler, which determines the best possible output based on client capabilities, screen dimensions and orientation. Out of the box, Dashboard Server produces pixel-perfect rendering on any device, with interactive features where supported. In general, all Data Visualization for .NET controls have animation and interactivity support for HTML5 devices.

So, we have two parallel client output scenarios in each Dashboard Server web application: Silverlight XAP output and server-side rendering with custom HTML5 renderers for Data Visualization controls.

Developing Mobile Dashboards for DS

To ensure that a Mobile Dashboard application works perfectly in the Dashboard Server environment, we must satisfy three main requirements:

The application must strictly follow MVVM architecture. Using MVVM lets us abstract out the semantics of the application from its implementation (and client-side output) so we can ensure that XAML views can be processed, serialized, rendered and cached independently and safely. The SDK comes with starter templates and base view model classes which are useful for getting off the ground quickly.
The application must use Data Visualization for .NET controls for animated and/or interactive visualizations. All other controls will be static in HTML5.
The application must use UI controls that come with the Dashboard Server SDK for basic interactivity – these come with out-of-the-box HTML5 renderers. A mechanism exists for creating a custom HTML5 renderer for any XAML control, but this requires a non-trivial development effort.

Let’s Do This!

With the Dashboard Server SDK installed on our workstation, we can open Visual Studio 2010 and start a new project. We select a basic Dashboard Server project template and give the project a name:

The SDK produces a starter solution with a familiar layout: a Silverlight project, and a Web project to host the Silverlight application:

When we look inside, we notice some additions to the solution: references have been pre-configured, the projects are set up with automated build tasks for compile-time processing, and the web application is set up with the Dashboard Server HTTP handler and a useful start page with links to it.

In the Silverlight project, there is a folder named Xaml which contains a sample dashboard template, DashboardTemplate.xaml. This template implements a base class which facilitates rendering in the Dashboard Server environment; it is recommended that your application continue this practice. In DashboardTemplate.xaml.cs, we implement the ApplyDefaultView method, which is there to help us set up a fresh dashboard view and in this case is also used to populate the dashboard with some static sample data. Next to the template, in DashboardTemplateViewModel.cs, is a view model implementation, which inherits from DashboardViewModelBase. This base class is useful for implementing dashboards driven by TimeNavigator; it and others like it are provided in the project template as a development aid.

The template itself consists of a single instance of the DashboardLayout control, which contains a TimeNavigator at the top (with embedded XyChart visualization), another XyChart below that, bound to the data subset selected in TimeNavigator, and a RadialGauge, bound to the Value property of DashboardTemplateViewModel.

We can already compile and run this application, and examine its output in all the various formats supported by Dashboard Server.

In our browser, we can view and interact with the Silverlight dashboard.

We can also grab our tablet and visit the same application, which gives us HTML5 output and touch interaction.

From here, we can start setting up data access (preferably via WCF web services), re-designing our dashboard screen, and adding new screens to the application.

We hope you are excited as we are about our approach to mobile dashboard development, and we look forward to your feedback.

ComponentArt's Technology is Ready for Windows 8 Today

miljan — Thu, 22 Sep 2011 15:49:00 GMT

Last week at the 2011 BUILD conference Microsoft unveiled their grand strategy for Windows 8. In the process they really set the direction for all Microsoft-based client technologies for the next decade. It is worth acknowledging the magnitude of this occasion. We should also note the difficult position from which the Redmond-based software giant had to make its move. There is immense pressure from all of the modern, touch-centric tablet devices – most notably Apple’s iPad – that represent the fastest-growing segment in the industry and are actually starting to chip away from the PC market share. At the same time, Microsoft **must** support millions of applications already written for Windows that their legions of customers expect to work flawlessly in the next version of Windows. To remain relevant, Microsoft had to come up with an answer that somehow satisfies both extremes of the app spectrum.

As it turns out, Microsoft came up with something quite compelling:

Windows 8 will provide two UI operation modes or “shells”:

“Metro Style”. This is the new “immersive experience” mode, optimized for touch input and designed to compete with all modern tablet devices. Metro style applications can be built in HTML5 and JavaScript or XAML and C, C++, C#, or VB. Note that the Metro version of IE doesn’t allow plug-ins, so Silverlight or Flash are not supported in the Metro browser. Reasons cited for this are: battery life, security, reliability and privacy.
“Classic Desktop”. This mode will be very familiar to anyone using Windows 7. The classic mode will continue to be appropriate for “work at your desk” scenarios and all applications that run on Windows 7 will run happily in this mode. Silverlight and other browser plugins will continue to be supported the way they work today. Interestingly, when a user in Metro mode encounters a web page that requires a Silverlight plugin, they can instantly switch to desktop mode and run the Silverlight app.

To make things even more interesting, Microsoft is extending the Metro application model to Windows Phone and Xbox – making a truly unified development platform for all client devices. It is great to see that Microsoft is willing to make bold moves like this and declare a “multi-front war”, as our friend David Wihl from SoftArtisans put it.

What makes us at ComponentArt excited about Microsoft’s new direction is the fact that our technology perfectly fits into this model. In fact:

ComponentArt is the only vendor that provides the tools today to target both “Metro” and “Classic” Windows 8 experience through a single XAML code base, thanks to our new Dashboard Server product that converts XAML dashboards to HTML5 in real time without the need to write a single line of JavaScript code.

Anything you build with our XAML-based Data Visualization tools today will run on Windows 8, either as a native XAML application or HTML5 app – your choice! The key point is that you develop your dashboard only once in XAML and deploy either as XAML or HTML5 through ComponentArt Dashboard Server.

The best way to experience this XAML-HTML5 rendering parity delivered by our new Dashboard Server product is to try our live mobile dashboard demos in a desktop browser and switch between Silverlight and HTML5 outputs. As you will see, the product features pixel-identical rendering between XAML and HTML5 and near feature parity.

We hope that you will enjoy our new technology and are looking forward to your feedback!

MSDN Webcast: Leveraging DataMarket to Create Cloud-Powered Digital Dashboards

milos — Mon, 16 May 2011 19:08:00 GMT

Hi everyone,

The ComponentArt production team has been very busy wrapping up Data Visualization 2011, which is coming very soon, but I'll be taking some time out next Tuesday to talk about cloud-powered digital dashboards. If you'd like to learn a bit about Microsoft's Azure DataMarket, or just see some cool visualizations in action, go ahead and register for the webcast. Hope to see you all there!

UPDATE: Thanks to all who tuned in! Hope you found it informative. If you couldn't make it, no problem! You can see a replay of the webcast here.

Introducing Mobile Dashboards for Windows Phone 7

miljan — Mon, 14 Feb 2011 22:05:00 GMT

I am very pleased to announce our latest release -- ComponentArt Data Visualization for Windows Phone 7 -- the industry's first complete framework for building interactive mobile dashboards targeting Microsoft's new mobile operating system. There are several exciting elements of our product release, however, before I get into those details, I would like to start off by sharing some thoughts on the Windows Phone 7 platform itself.

My Quick Take on Windows Phone 7

We started playing around with WP7 late last year with relatively low expectations. Common sense would dictate that the feature set of the first release would leave a lot to be desired and that it would take Microsoft some time to catch up to Apple, Google or even RIM.

As it turns out, we were up for a series of pleasant surprises, first of which was Metro – WP7's amazing user interface paradigm. It is flat, smooth, modern-looking and it gives so much real estate and breathing room when developing apps through its vertical-scrolling-with-horizontal-swiping concept. Apps that take full advantage of Metro definitely come off big and powerful. To illustrate this point, take a side-by-side look at the official IMDB app for Windows Phone 7 and the official IMDB app for iPhone. After using these apps for a few minutes I think most people will agree that the iOS version feels dated. The notion that Microsoft would be beating Apple on user experience is unexpected and almost unbelievable, but it appears to be true.

The deeper we looked into Windows Phone 7, the more apparent it became that the entire platform and the ecosystem behind it are real, ready for prime time and have immense potential. App developers are already there in large numbers through Silverlight and Visual Studio. The current lineup of apps in the Marketplace speaks for itself. Top notch games are also already plentiful thanks to the Xbox development community and XNA. Music and other media are available through the very clean Zune application (I sure don't miss the iTunes client!). As for the enterprise, it is no surprise that Microsoft comes through with great back office integration and productivity apps.

All in all, Windows Phone 7 is a real contender in the mobile space. Nokia's announcement on Friday should come as no surprise to anyone who has taken a deep look at Microsoft's new mobile platform. If you want to participate in the growth of the WP7 ecosystem, all you need to get started is Visual Studio 2010 and rudimentary Silverlight skills. Please see Jeremy's blog post for more details.

Our Windows Phone 7 Release

With Data Visualization for Windows Phone 7, our goal was to enable the development of next-generation mobile business intelligence applications. We have created specialized versions of Windows Phone 7 charts, gauges, maps, datagrids and time navigators by porting almost the entire Data Visualization for Silverlight codebase. This allowed us to deliver an extensive feature set from the very first release. Each component has been extensively optimized for smaller screens and mobile CPUs, touch interface support, including fine-tuned interactivity, pinch and flick gestures, customized skins and minified Map shape files.

Going beyond the standard data visualization controls, ComponentArt's TimeNavigator for Windows Phone 7 proves to be an invaluable element of interactive mobile dashboards. Designed to enable quick, easy and intuitive date range selections, the control has been re-engineered specifically for touch screens in order to deliver an optimal experience to end users.

The entire effort took about 6 man-months, which is relatively quick considering the size of our Data Visualization codebase. An important point is that our mobile and desktop Data Visualization product lines are now based on the same code, enabling new feature additions to both platforms simultaneously as well as customer code reuse between desktop and mobile applications.

To see our Windows Phone 7 controls in action (and to experience ComponentArt’s Metro implementation in our demo app) simply search for “ComponentArt” in the App Marketplace on your Windows Phone. If you don’t have access to a physical WP7 device, simply download our demo app and run it in the Windows Phone emulator within Visual Studio.

ComponentArt’s long-term goal is to deliver the most sophisticated data visualization technology available on any mobile platform. This is just the first of many releases to come, so please let us know your thoughts on how we can expanded and improve our current product.

Getting Started with DataVisualization for Windows Phone 7

jrodgers — Fri, 04 Feb 2011 19:37:00 GMT

Windows Phone 7 represents a huge advance in mobile technology from Microsoft, ComponentArt is proud to support this exciting new platform with a full suite of DataVisualization controls for Windows Phone 7 Apps.

GETTING STARTED

Windows Phone 7 development requires the Windows Phone Developer Tools for Visual Studio 2010. They can be downloaded from http://create.msdn.com/en-us/home/getting_started.

INCLUDED CONTROLS

The following is a list of the controls included in the Silverlight 4 and Windows Phone 7 editions:

DEVELOPMENT

Developing for Windows Phone 7 using the ComponentArt DataVisualization controls is very similar to developing for the Silverlight browser-based and OOB platforms. The API calls are identical and use the same documentation. One thing you will notice is that when you test a project it launches in the Windows Phone 7 Emulator, this is a virtual phone which really assists in development and debugging. One thing to keep in mind as you develop is that the performance of an app on the emulator can differ from that on an actual phone device – sometimes the animations are smoother on the actual phone, sometimes page loading times are shorter when using the Emulator. All screen shots in this post are from the emulator.

QUICK START

In this tutorial we'll go ahead and implement a simple chart using points from a binding to an ObservableCollection type. The source for this project is included in the CTP .zip file available at http://www.componentart.com/download/dv.aspx.

Step 1.

Create a new Project, under Installed Templates select Silverlight for Windows Phone, choose a Windows Phone Application.

Step 2.

Under References add a reference to ComponentArt.Silverlight.DataVisualization.Charting.

Step 3.

Open MainPage.xaml and add the following to the Namespace declarations at the top of the file:

xmlns:my="clr-namespace:ComponentArt.Silverlight.DataVisualization.Charting;assembly=ComponentArt.Silverlight.DataVisualization.Charting"

Step 4.

Add the following to the Grid marked “ContentGrid”:

    <my:XYChart EnableAnimation="False"
                DataSource="{Binding}"
                XPath="X" >
        <my:BarSeries YPath="Y" BarKind="Block" />
    </my:XYChart>

Step 5.

Add the following to make your MainPage.xaml.cs look like this:

using System;
using Microsoft.Phone.Controls;
using System.Collections.ObjectModel;

namespace QuickStart
{
    public partial class MainPage : PhoneApplicationPage
    {
        ObservableCollection<DataPoint> PointCollectionQ1 = new ObservableCollection<DataPoint>
        {
            new DataPoint { X = "January", Y=100},
            new DataPoint { X = "February", Y=300},
            new DataPoint { X = "March", Y=600},
        };

        public MainPage()
        {
            InitializeComponent();
            DataContext = PointCollectionQ1;
        }
    }

    public class DataPoint
    {
        public string X { get; set; }
        public int Y { get; set; }
    }
}

Step 6.

Test your project in the Emulator, it should end up looking like this:

This example demonstrates how easy it is to get up and running with ComponentArt DV for Windows Phone 7.

BONUS STEP

To change the colors of the bars add the following to the XYChart tag:

UseDifferentBarColors="True" Palette="VibrantB"

Try out the different palettes that ship standard with ComponentArt DV, the full list can be found here: http://docs.componentart.com/default.aspx?content=SlDataVisualization/2010/ComponentArt.Silverlight.DataVisualization/CommonConcepts_Theming.htm under Included Palettes.

LICENSING While testing the ComponentArt WP7 Demo application the DV controls will appear as licensed, however if you use the DV controls in your own project you will need to license them to get rid of the unlicensed overlay. See the following pages in the documentation to license your project.

Product Activation:
http://docs.componentart.com/default.aspx?content=SlDataVisualization/2010/ComponentArt.Silverlight.DataVisualization/GettingStarted_ProductActivation.htm
Deploying Licensed Controls (Manually adding the ComponentArt.Silverlight.DataVisualization.lic file):
http://docs.componentart.com/default.aspx?content=SlDataVisualization/2010/ComponentArt.Silverlight.DataVisualization/CommonConcepts_Deployment.htm

Hosting a ComponentArt Dashboard in SharePoint 2010

Chris — Tue, 11 Jan 2011 21:48:00 GMT

Hosting a ComponentArt dashboard in SharePoint 2010 is a scenario which comes up a lot in conversation with clients here at ComponentArt. This is very possible using our DataVisualization package as well as standard controls (by way of the Silverlight Web Part) already present in SharePoint 2010.

We will assume that we have already created a dashboard solution using ComponentArt DataVisualization technology and also a running SharePoint 2010 installation. For the purposes of this sample, I will be using our demo package as our running dashboard solution. First we will need to create a separate website to host our Dashboard DataLayer as well as our Silverlight Xap file.

In my scenario, I want to host the Dashboard DataLayer on the same site as the SharePoint application, so I will need to assign a different port number, so they can reside on the same IP address.

I can verify that my newly created website is working by navigating to the site:

Once we have verified this as working, we will need to login to our SharePoint environment and setup our new SharePoint page.

From the home page, I am going to click Site Actions, then New Page (which will create our page).

Give my page a name, then click Create.

Now we are presented with a new page, inside page content, I want to select Editing Tools, Insert.

Now the ribbon shows a web part option. Lets select this, and select Media and Content From the Categories. Once we have selected Media and Content, we have the option on the right to select Silverlight Web Part.

This will let us display any Silverlight application to the page. Click Add. Now we will be prompted to add the url of the Silverlight Xap File. You only need the xap reference because the Silverlight Web Part will create the required object for hosting the Silverlight Application. I know that my Xap file is located in the ClientBin sub folder of that website we just created, so I will enter it, and click OK.

Now you should have a Silverlight Web Part on your page, we'll need to make some adjustments now to get our dashboard to fit inside.

We will set some options to have the dashboard fit nicely.

Now let's check in our changes, once we have checked in, we will need to publish the page.

We will now be presented with the completed page.

Now we have a SharePoint Page hosting a ComponentArt Dashboard!

Next time, I will show how to create a dashboard using SharePoint 2010 Lists and Excel Services.

HOWTO: Plotting Points on a Map

milos — Thu, 23 Dec 2010 14:10:00 GMT

IMPORTANT: Some details of the following tutorial have been made obsolete by API changes introduced in Data Visualization 2011. An updated tutorial in the live docs reflects the new functionality. The old tutorial continues below.

A common scenario faced when building maps into data visualization apps is the need to plot points at specific locations on a base map. Visually, these are usually not simple points, but are templated to be descriptive, and often trigger a popup with more information when hovered or clicked. In this post, I will provide a quick overview of how such functionality is achieved with the ComponentArt Map control for Silverlight/WPF.

To begin, we set up our base map by defining the first layer on the map, pointing to the SHP file to be used for the base shapes:

	<mapping:Map ... >
	  <mapping:Map.Layers>
		 <mapping:MapLayer ShapeFile="ClientBin/basemap.shp" ... />
	  </mapping:Map.Layers>
	</mapping:Map>

The first layer will dictate not only the shapes which are rendered as the background of the map, but also the coordinate system and the bounding box of the entire display. We must make sure that the same types of coordinates (eg. longitudes and latitudes) are used for the base map as for the points we want to plot.

Next, we are ready to define the second layer, the one on which the templated points will appear:

	<mapping:Map ... >
	  <mapping:Map.Layers>
	    <mapping:MapLayer ShapeFile="ClientBin/basemap.shp" ... />
	    <mapping:MapLayer ItemsSource="{StaticResource PointData}" ItemPointXPath="Longitude" ItemPointYPath="Latitude" />
	  </mapping:Map.Layers>
	</mapping:Map>

In this layer definition, we specify a source for data to be plotted by setting the ItemsSource property to a static resource. This property can alternatively be set from code-behind, or even inline, to any kind of collection of objects. We then set ItemPointXPath and ItemPointYPath properties to the property paths within objects of that collection at which the control can find horizontal and vertical coordinates, respectively.

We have now provided all the data necessary for plotting our points. What we haven't provided is the visual appearance of those points. We will do that by defining an ItemTemplate on the layer:

	<mapping:Map ... >
	  <mapping:Map.Layers>
	    <mapping:MapLayer ShapeFile="ClientBin/basemap.shp" ... />
	    <mapping:MapLayer ItemsSource="{StaticResource PointData}" ItemPointXPath="Longitude" ItemPointYPath="Latitude">
	      <mapping:MapLayer.ItemTemplate>
		    <DataTemplate>
	          <Ellipse Fill="Red" Height="10" Width="10" Margin="-5,-5,0,0" />
			</DataTemplate>
		  </mapping:MapLayer.ItemTemplate>
	    </mapping:MapLayer>
	  </mapping:Map.Layers>
	</mapping:Map>

For this example, we have defined the points as a simple red circle with a diameter of 10 pixels. We use negative margins to centre the shape over its target location.

Because the data context of the template is the logical map item which also contains the data object originally provided, we can bind to other properties of that object to provide more richness and variation to the template. For example, the size and colour of the template could vary based on values of particular properties, or text (or visual) representations of other values can be embedded in the template. A common approach is to display whole pie charts over locations whose data they represent.

Now that the visualization is done, we can include an additional useful feature: hover popups. To do this, we define an additional popup template on the layer:

	<mapping:Map ... >
	  <mapping:Map.Layers>
	    <mapping:MapLayer ShapeFile="ClientBin/basemap.shp" ... />
	    <mapping:MapLayer ItemsSource="{StaticResource PointData}" ItemPointXPath="Longitude" ItemPointYPath="Latitude">
	      <mapping:MapLayer.ItemTemplate>
		    <DataTemplate>
	          <Ellipse Fill="Red" Height="10" Width="10" Margin="-5,-5,0,0" />
			</DataTemplate>
		  </mapping:MapLayer.ItemTemplate>
		  <mapping:MapLayer.PopupValueTemplate>
		    <DataTemplate>
			  <TextBlock Text="{Binding PropertyToDisplayInPopup}" />
			</DataTemplate>
		  </mapping:MapLayer.PopupValueTemplate>
	    </mapping:MapLayer>
	  </mapping:Map.Layers>
	</mapping:Map>

Clearly, the popup data template could contain much more elaborate XAML structures, including instances of other Data Visualization controls bound to data in the provided objects. The popup itself, the chrome surrounding the defined template, will have an appearance defined by the theme. Changing the theme on the Map, or containing DashboardPanel or DashboardLayout by changing the Theme property, will change the appearance of the default popup as well.

I hope you've found this post informative! We'd love to hear what you think.

XYChart's X-Coordinate Popups

hwan — Mon, 29 Nov 2010 15:40:00 GMT

XYChart's XCoordinatePopup is a popup that is shown when the user's cursor hovers over the main area i.e. the rectangular region where datapoints are rendered. The popup's contents generally reveal details about the datapoints that lie along that particular x-coordinate. Note the difference between this and the plain popup behavior -- in that case, the popup's context is the datapoint being hovered over, rather than the datapoints along the x-coordinate. As such, one can think of XCoordinatePopup as a summary of the datapoints that are contained in that columnar area.

Features

When EnableXCoordinatePopup is set to true, the XCoordinatePopup's default popup will appear with basic datapoint values, such as in Figure 1.

Figure 1. Default XYChart XCoordinatePopup

The popup consists of two parts: an index template (the upper, darker gray section of Figure 1's popup) and a data template (the lower, lighter gray section of Figure 1's popup). By defining a custom template for both or either section one can override these default templates. For example, the XCoordinatePopup in Figure 2 is achieved using the following XAML:

<ch:XYChart.XCoordinatePopup>
  <ch:XCoordinatePopup>
    <ch:XCoordinatePopup.DataTemplate>
      <DataTemplate>
        <Grid>
          <caCalc:CalcEngine x:Name="calc0" >
          <caCalc:CalcEngineInput Id="context" Value="{Binding}" />
            <caCalc:CalcEngine.Expression>
              <sys:String>
                var a[]; 
                a[0] = S0.DataPoint.Y; 
                a[1] = S0.DataPoint.Brush; 
                a[2] = S1.DataPoint.Y;
                a[3] = S1.DataPoint.Brush;
                a
              </sys:String>
            </caCalc:CalcEngine.Expression>
          </caCalc:CalcEngine>
          <StackPanel Orientation="Vertical">
            <TextBlock
              Text="{Binding Output[0], ElementName=calc0, StringFormat=\{0:$#\,0\}}" 
              Foreground="{Binding Output[1], ElementName=calc0}" 
              FontSize="10" />
            <TextBlock
              Text="{Binding Output[2], ElementName=calc0, StringFormat=\{0:$#\,0\}}" 
              Foreground="{Binding Output[3], ElementName=calc0}" 
              FontSize="10" />
          </StackPanel>
        </Grid>
      </DataTemplate>
    </ch:XCoordinatePopup.DataTemplate>
  </ch:XCoordinatePopup>
</ch:XYChart.XCoordinatePopup>

Figure 2. Customized XYChart XCoordinatePopup

Classes

RelativePositionX, RelativePositionY -- Translation on the xy plane to shift the popup from its default position as a percentage.
XOffset, YOffset -- Translation on the xy plane to shift the popup from its default position in pixels.
IndexTemplate, DataTemplate -- Templates for the index (top) and value (bottom) parts of the popup. The datacontext for both is a SeriesCrossSection object.
- SeriesCrossSectionContext -- Object which provides the set of datapoints that lie along (or closest to) the x-coordinate where the cursor is currently sitting. Derives from Dictionary<string, DataPointContext> and implements the IPropertyProvider interface. For each datapoint in the cross-section there is an item in the dictionary. The key is the Series name and the value is the DataPointContext object related to the datapoint. The IPropertyProvider interface also allows one to access dictionary items in Calc script, such as in a CalcContainer.

In-depth Explanation

Let's take a closer look at the markup to generate the XCoordinatePopup in Figure 2.

Figure 3. Customized XYChart XCoordinatePopup markup

This XCoordinatePopup XAML defines a DataTemplate, which will overwrite the default. However IndexTemplate is not defined and so Chart will provide its own default template for the upper region of the XCoordinatePopup.
The CalcEngine, "calc0", sets the DataTemplate context as its Input.
Since the context is a dictionary, a Calc expression of "self[‘S0’]" would access the datapoint context of the datapoint from series “S0”. In this case however the SeriesCrossSectionContext class implements IPropertyProvider so we can use property syntax instead -- the cleaner and simpler "S0", the name of the Series object.
The CalcEngine computes values and brushes and returns them in an array; in this simple example it doesn't actually do anything to them but pass them back.
The value section of the XCoordinatePopup consists of two TextBlocks. These blocks bind text and brushes to the Output of the CalcEngine.

In summary, XCoordinatePopup is a useful way to interactively compare individual datapoints across multiple series. It consists of an IndexTemplate and a DataTemplate, and as such it is highly customizable.

An Overview of XYChart Areas

hwan — Thu, 25 Nov 2010 19:55:00 GMT

The visual layout for ComponentArt's XYChart for DataVisualization control is composed of five regions called Areas. This article aims to give an idea of what these regions are, so that you can better customize your own.

Figure 1. shows the arrangement of XYChart's Areas:

Figure 1. XYChart Areas

(In pink) Legend - (Optional) Located at an edge of the chart, depending on the docking property
(Gray and white) The main chart area is represented by the XYChartMainArea; it holds the actual rendered graph (line, area, bar, etc.).
(In violet) There are four axis areas, one along each side of the main area: XAxisArea, YAxisArea, X2AxisArea, and Y2AxisArea.

By default XYChart populates the XYChartMainArea, XAxisArea and YAxisArea with content, such as axis annotations and coordinate system elements e.g. horizontal and vertical gridlines, stripes, etc. The secondary areas, X2AxisArea and Y2AxisArea, are left empty. All of these defaults can be overwritten with custom definitions. Setting DefaultAxisAnnotationsVisible to false also removes these built-in definitions. Note that if one defines an area, the default AxisAnnotation (or other element) can still be used by including an undefined instance of it.

e.g.

<ch:XYChart XPath="Date" Width="400" Height="300" ... >
  <ch:XYChart.XAxisArea>
    <ch:AxisCoordinates />  <!-- Including AxisAnnotation as undefined  will cause Chart to insert its default version -->
    <ch:ChartLabel>
      ... etc

Each Area is a Collection of elements. The visual tree of XYChartMainArea is defined by the elements of its underlying Collection, and these are displayed one on top of another. AxisAreas on the other hand are StackPanels are displayed in an inside-out order i.e. the first member is closest to the XYChartMainArea.

MainArea

XYChart's MainArea can be populated with the following classes:

Series Classes
- BarSeries - Datapoints are represented by individual bars (rectangles going left to right) or columns (rectangles going from bottom to top).
- AreaSeries - Datapoints are connected by a line, and the space between that line and the axis is given a fill.
- LineSeries - Datapoints are connected by a styled line.
- MarkerSeries - Datapoints are represented by a pre-defined graphic.
- CandleStickSeries - Financial stock datapoints are drawn using a "candlestick", a custom hybrid of line and bar charts.
- OHLCSeries - Financial stock datapoints are drawn using "Open-high-low-close" markers, which are similar to the candlestick marker.
- CompositeSeries - A series that is composed of a combination of other series.
Coordinate System Classes
- CoordinateLines - Horizontal and vertical lines used to demarcate intervals on the axes.
- CoordinateStripes - Horizontal and vertical regions between CoordinateLines.
- CoordinateSystemFrame - Border around the main area, as well as 3D considerations i.e. rendered depth.
Interaction Classes
- SeriesTracker - A reticle which highlights datapoints, following the user's cursor when on the chart main area.
- SeriesAnnotationTracker - A popup rendered over the series, following the user's cursor when on the chart main area.

I should mention that there is some overlap between the Series classes -- for example, AreaSeries also has a built-in LineSeries (though of course you can choose to turn this off), and Bar, Line, and Area series can have a MarkerSeries, so you don't need to add this series separately.

AxisAreas

The AxisAreas are generally comprised of the following classes:

AxisCoordinates - System used to uniquely determine the positions of datapoints. Inside an AxisArea, it includes the labels indicating value intervals.
AxisScrollBar - Scroll bar used to scroll and zoom through the main rendered area of datapoints, as shown in Figure 2.

Figure 2. Scroll bar

AxisLabel - Visual labels applied to the regions between intervals along the axis.
Example:

Figure 3. XAxisArea AxisLabel

In Figure 3 there are two custom AxisLabel definitions inside the XAxisArea. The first uses an in-line Calc expression to change the color of the AxisLabel instance background to red if the sum of the "Services", "DV" and "UI" datapoint Y values are less than "Expenses". The second simply outputs the Month string. The XAML that defines the above follows:

<ch:XYChart.XAxisArea>
  <ch:AxisLabels >
    <ch:DateTimeCoordinates From="1" Step="1" DateLevel="Month" />
    <ch:AxisLabels.Template>
      <DataTemplate>
        <common:CalcContainer> <!-- CalcContainer inside Common is only available in DataVisualization SP2+ -->
          <common:CalcContainer.Computing>
            <sys:String>
              var back = Black;
              var diff = Series.Services.DataPoints[Index].Y + Series.DV.DataPoints[Index].Y + Series.UI.DataPoints[Index].Y - Series.Expenses.DataPoints[Index].Y;
              if(0 > diff)
                  back=Red
              else
                  back=Black;
              Background = back;
              Data = diff
            </sys:String>
          </common:CalcContainer.Computing>
          <ch:FormattedTextBlock Format="$#,#" HorizontalAlignment="Stretch" Margin="0.5,1,0.5,1" TextAlignment="Center" FontSize="11" FontFamily="Calibri" Foreground="White"/>
        </common:CalcContainer>
      </DataTemplate>
    </ch:AxisLabels.Template>
  </ch:AxisLabels>
  <ch:AxisLabels >
    <ch:DateTimeCoordinates From="1" Step="1" DateLevel="Month" />
    <ch:AxisLabels.Template>
      <DataTemplate>
        <Border Margin="4">
          <TextBlock TextAlignment="Center" Text="{Binding FormattedStartValue}" />
        </Border>
      </DataTemplate>
    </ch:AxisLabels.Template>
  </ch:AxisLabels>
</ch:XYChart.XAxisArea>

ChartLabel - Custom XAML elements positioned between other axis area elements or between a legend and the rest of the axis area.
e.g.

Figure 4. ChartLabels

As you can see, XYChart is actually a pretty flexible control! I hope that this post has given you a better grasp of the vocabulary used to build an XYChart.

Using CalcEngine for Design-Time Data

phil — Wed, 24 Nov 2010 20:12:00 GMT

There are times during development when it is not possible for controls to access live data from within the Visual Studio Design-Time environment. When this occurs it can be advantageous to have sample data available during Design-Time which reflects the live data to a workable degree. To simplify this task the CalcEngine contains a number of options for providing relevant sample data at Design-Time to other controls while maintaining the proper runtime data bindings.

Adding a CalcEngine

The first step in this process is to add an instance of the CalcEngine to the page/form and configure one of it's CalcEngineInputs to connect with the real data source. Information regarding this step can be found in our documentation under Creating Your First CalcEngine.

Binding to a CalcEngine

The second step is to bind the desired control to the instance of the CalcEngine. This can be done with the following syntax.

<ComponentArt:XYChart ... DataSource="{Binding ElementName=calcEngine1, Path=Output}" ... />

In this instance the x:Name of the CalcEngine is calcEngine1. If the CalcEngineInput has been connected to a DataSource and the Expression has been set, it may already be providing relevant sample data to the bound control. If not, some further configuration may be required. The target control should be configured in regards to runtime data, once the proper design-time data type has been generated or specified templates and databound properties of the target control should populate.

Configuring Design-Time Data on CalcEngineInputs

Each CalcEngineInput defined on a CalcEngine may be configured to provide sample data during Design-Time. A number of options are available for describing and shaping this sample data.

DesignTimeDataType

By default CalcEngine will attempt to determine the desired type for sample data based on types and properties available from the DataSource bound to each CalcEngineInput. There is not always access to the required types and in some cases this is not the desired behavior. The DesingTimeDataType property of the CalcEngineInput allows one to specify the fully qualified type name of the sample data objects that CalcEngineInput should generate.

<ComponentArtCommon:CalcEngine 
  Expression="calcEngineInput1" 
  Name="calcEngine1">
  <ComponentArtCommon:CalcEngineInput 
    Id="calcEngineInput1" 
    DesignTimeDataType="System.DateTime" />
</ComponentArtCommon:CalcEngine>

<ComponentArtGridView:GridView 
  AutoGenerateColumns="True" 
  DataContext="{Binding ElementName=calcEngine1, Path=Output}" 
  ItemsSource="{Binding}" />

It's important to remember that when no Calc operations are desired the CalcEngine Expression should be set to the Id of the desired CalcEngineInput, this will pass the Value or generated Design-Time data as is through to the CalcEngine's Output property and, in turn, to bound controls. This code yields the following output.

One handy class for generating sample data is contained within both frameworks of the Data Visualization Suite,

ComponentArt.Silverlight.DataVisualization.Utils.DemoDataValue
ComponentArt.Win.DataVisualization.Utils.DemoDataValue

DesignTimeDataRecords

This CalcEngineInput property specifies the number of sample data records to create, either of the detected type or of the DesignTimeDataType. The default is 15 records.

DesignTimeDataAlgorithm

Each CalcEngineInput also has the potential to generate data based on a number of algorithms, specified through the DesignTimeDataAlgoritm property.

Fractal ( Default )

Random

Incremental

Sine

Design-Time Data at Runtime

CalcEngine automatically detects whether or not it is running in Visual Studio Design-Time. Outside of Visual Studio Design-Time sample data generation will not occur and the data bound to Values of the CalcEngineInputs will become the active context.

*Functionality available in ComponentArt Data Visualization 2010 SP2

Coloring a Map with Data

Chris — Mon, 22 Nov 2010 16:46:00 GMT

This tutorial will walk you through the steps necessary to get a ComponentArt DataVisualization for Silverlight Map control up and running. 1. Create a new Project In Visual Studio, create a new "Silverlight Application" project. Call it "MyFirstMap". Use the default Web site settings. Visual Studio will generate the Silverlight and .Web projects, and should open up the MainPage.xaml. 2. Adding the required Assembly Reference A quick way to add the required reference is to simply...(read more)

Visualizing Toronto's 2010 Mayoral Election with ComponentArt Data Visualization

phil — Thu, 28 Oct 2010 19:16:00 GMT

The City of Toronto has released their Official Election Results. ComponentArt being a Toronto based company I thought this data offered a great way to showcase our Map control and present an informative and intuitive view of the data.

Visualizing Toronto's 2010 Mayoral Election

ComponentArt DataVisualization & Visual Studio Design-Time

phil — Tue, 26 Oct 2010 18:59:00 GMT

With the full release of ComponentArt DataVisualization now in the hands of the public I thought I'd take a minute and talk about some of the features we've added in regards to Visual Studio Design-Time integration. Visual Studio 2010 comes with unprecedented options as far as design-time is concerned and we've tried to take advantage of them all. Many tasks which would previously require XAML editing, endless searching through the Visual Studio Property Grid or altering existing demo projects for inclusion can now be accomplished quickly and easily through our design-time adorners.

Using the ToolBox

Visual Studio users are probably already familiar with the Visual Studio control ToolBox. Once a project has been created it can be access through the File Menu > View > Toolbox. It contains controls which are available for use with the page or form which is currently being edited, Silverlight or WPF projects for example.

If one has installed ComponentArt DataVisualization for the current platform one will see a section dedicated to these controls. They can be placed on your page or form simply by dragging and dropping the icon onto the design surface. Alternately one can select the control by clicking on the icon, and then click on the design surface to drag a rectangle to which the new control should size*.*Not all controls will adhere to this sizing practice

Using Adorners

Once a ComponentArt DataVisualization control has been placed on the design surface most of it's common options can be configured easily through it's design-time adorner. This is a small rounded button which appears at the top right of the control and contains the control icon in it.

Rolling the mouse over this adorner will cause it to expand and reveal the control type. Clicking on the adorner will reveal the control's configuration panel.

Quick Start

Clicking on the adorner icon will reveal the initial panel for the control being designed. This initial panel has a number of sections, the first being the Quick Start section.

Within the Quick Start is everything one needs to ready a control instance for runtime.

Start from Gallery

For most DataVisualization controls the first option in the Quick Start section will be Start from Gallery this allows one to select a starting point from the most popular control settings, many of these templates are populated directly from our extensive demos. Once selected a template will replace the entire control instance on the design surface, it is for this reason that Start from Gallery should be one's first step in the design process.

Look and Feel

The second section in most designers is the Look and Feel section. This contains relevant options in regards to Themes and Palettes.

Themes define the chrome of your dashboard - corner radius, line thickness, text color, margins are all controlled by the Theme. Unlike Templates, selecting a Theme from the Theme Gallery will not overwrite the control instance but simply set the Theme and ThemeVariant properties of the control. The Theme and ThemeVariant properties are also inherited and overridable.

Much like Themes, Palettes are inherited and overridable. Palettes specify the color sets used to render data in the DataVisualization controls, whether it is a RadialGauge, an XYChart or a Map, Palettes harmonize your dashboard as each control in the suite is given careful attention when defining a new Palette for it.

Other Control Settings

While the Quick Start section can help one design a control instance which is ready for run time in short order, there are almost always additional settings. The most popular additional settings can be found categorized within this section of the designer.

Help

The Help section of the design time adorner offers links to our online forums as well as documentation.

Licensing

The final section in our design time adorner is the Licensing section. This section allows one to quickly find the license status of the current workstation as well as license the current project, or visit our site in order to purchase a license.

Selecting License Active Project will launch the ComponentArt License Manager in the background, export a License File ( .LIC ) and add that License File as an Embedded Resource in the current project. Adding a valid License File to the current project will prevent the controls from displaying the unlicensed watermark at runtime. Licensing projects for deployment has always been a sticky point of control suites, no longer, it couldn't be easier, just takes a single click and it's ready for launch.

Dashboards Made Easy - The DrillDownManager Control

filipK — Fri, 05 Mar 2010 20:23:00 GMT

The usability and value of most modern dashboards becomes seriously questioned if the data shown is fixed, and the user does not have the ability to zoom in or drill-down into the data to a more detailed view. Implementing this functionality can sometimes be a time consuming task - a lot of plumbing code is needed to connect all the components and handle the events to interpret the drill-down actions and the parameters. The whole purpose of the DrillDownManager is to make this task simple for the developer.

The Concept

The idea behind the control is the following:

The page will contain an instance of the DrillDownManager control which will define all the available levels the end user can drill into.
Each level will have a data source associated with it.
Every control displaying the current data will bind to the DrillDownManager's DataContext property.
Actions such as drill-down and drill-back will all be handled through the DrillDownManager, which will notify all the managed controls of the actions currently taking place.

The Simple Drill-Down demo is a perfect example of this concept in action. Here we use the WcfServiceDataProvider control to configure the data source for each of our four levels. Even though we'll be using the same WCF Service for each of our levels, we'll be using a different method from the service for each level. Because of this it is easiest to create four instances of the WcfServiceDataProvider, like we do in the example:

<CAdata:WcfServiceDataProvider x:Key="Service1" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetAllData" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />
<CAdata:WcfServiceDataProvider x:Key="Service2" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetYearlyDataFromDecade" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />
<CAdata:WcfServiceDataProvider x:Key="Service3" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetMonthlyData" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />
<CAdata:WcfServiceDataProvider x:Key="Service4" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetDailyData" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />

Now we can instantiate the DrillDownManager to use these instances as data sources for each of its levels:

<CAdata:DrillDownManager x:Name="DDManager" ManagedControls="Chart1">
	<CAdata:DrillDownManager.Levels>
	    <CAdata:DrillDownLevel x:Name="RootLevel" DataProvider="{StaticResource Service1}" />
	    <CAdata:DrillDownLevel x:Name="Decade" DataProvider="{StaticResource Service2}" />
	    <CAdata:DrillDownLevel x:Name="Year" DataProvider="{StaticResource Service3}" />
	    <CAdata:DrillDownLevel x:Name="Month" DataProvider="{StaticResource Service4}" />
	</CAdata:DrillDownManager.Levels>
</CAdata:DrillDownManager>

We can now instantiate the Chart control to bind to our DrillDownManager instance's DataContext property in order to automatically update the chart when the data is changed. Our chart code can look like this:

<Chart:Chart x:Name="Chart1" ChartKind="Rectangle" XValue="Date" Height="480" Width="640" EnableAnimation="True"
		MouseLeftButtonDownOnDataPoint="MyChart_MouseLeftButtonDownOnDataPoint"
		DataSource="{Binding DataContext, ElementName=DDManager}" 
		DrillDownTransitionDuration="0:0:1" BackUpTransitionDuration="0:0:1">

    <Chart:Chart.DataSeries >
	<Chart:Series Id="S0" YValue="Sales" MarkerStyle="Circle" />
    </Chart:Chart.DataSeries>
</Chart:Chart>

Note also that in addition to binding the DataSource and setting the drill down and back up animation transition durations, we also register a handler for the MouseLeftButtonDownOnDataPoint event. This is where we want to initiate the drill down action. The idea, as shown in the Simple Drill-Down demo, is that when a user clicks on a data point, we show a more granular view of that data. Our event handler from the demo looks like this:

private void MyChart_MouseLeftButtonDownOnDataPoint(object sender, SelectedDataPointEventArgs e)
{
    DDManager.DrillDown(e.DataPointContext.DataPoint.X);
}

This calls the DrillDownMnager and tells it to go into the next level, passing the DataPoint's X value to the call. The DrillDownManager will move to the next level and refresh that level's data with the provided parameter being passed directly to the method in the WCF Service that is registered as the data source of this level. As such we must make sure that the method in the WCF service registered with each level, can take the type of parameter being passed. In our case it is the X value of the DataPoints in the previous level.

We can go back up a level simply by calling the DrillUp() method on the DrillDownManager instance. In the Simple Drill-Down demo, this is done through the BreadCrumb control, which also makes use of DrillDownManagers Levels and CurrentLevel properties to show how deep we have drilled down. Additionally, we can bind any other control we have on the page to the DataContext property of the DrillDownManager, and it will update automatically when the level changes.

Simplifying the WCF Service Connection - The WcfServiceDataProvider control

filipK — Thu, 04 Mar 2010 15:25:00 GMT

WcfServiceDataProvider is a handy new control introduced to the Silverlight and WPF suite of controls in the 2010.1 release. The control is somewhat different from most of the other controls. It has no visual aspect to it (hence the pictureless blog post) and its sole purpose is to simplify the task of connecting and retrieving data from an existing WCF Data Service and make the data available to other controls on the page.

The idea is quite simple:

Instantiate the control in XAML by giving it the end-point configuration name of the WCF service, the service client's type and the method in the service used to retrieve the data.
Updating the MethodParameters property will automatically call the registered method on the WCF service with the provided parameters, refreshing the data. (Alternatively, you can just call Refresh() to update the data with the same parameters).
You can bind to the WcfServiceDataProvider's Data property to get the latest data retrieved from the web-service. (In WPF, binding directly to the WcfServiceDataProvider instance will have the same effect).

Example

The Simple Drill-Down demo makes extensive use of this control. In the Silverlight version, the WcfServiceDataProvider is instantiated like this:

<svc:SalesDataServiceClient x:Key="SalesDataServiceClient" />
<CAdata:WcfServiceDataProvider IsInitialLoadEnabled="False" x:Key="Service1" 
        EndPointConfigurationName="CustomBinding_SalesDataService" 
        MethodName="GetAllData" 
        ObjectTypeRef="{StaticResource SalesDataServiceClient}" />

The easiest way to look up the Service Client type is to use intellisense in a C# code file. Find the type by typing in the WebService class followed by a "." to look for the client type definition in the provided options. Then instantiate the client giving it a type, and use this reference to set the ObjectTypeRef property in the control. The EndPointConfigurationName can be looked up in the ServiceReferences.ClientConfig file in the project.

In WPF, the service client type can be looked up in the same way, but we can specify it directly in the control. The code will look like this:

<CAdata:WcfServiceDataProvider IsInitialLoadEnabled="False" x:Key="Service1" 
        EndPointConfigurationName="BasicHttpBinding_SalesDataService" 
        MethodName="GetAllData" 
        ObjectType="{x:Type svc:SalesDataServiceClient}" />

The EndPointConfigurationName can be looked up in the app.config file in the project.

The only thing that's needed to be done in the code behind is set the Remote address of the WCF Service. Then we can finally set some parameters and issue the first refresh call to get our data. This should be done in the Loaded handler of the UserControl:

string remoteAddress = new Uri(Application.Current.Host.Source, "../SalesDataService.svc").AbsoluteUri;

WcfServiceDataProvider dp = this.Resources["Service1"] as WcfServiceDataProvider;
dp.DeferRefresh();
dp.RemoteAddress = remoteAddress;
dp.MethodParameters.Clear();
dp.MethodParameters.Add(new DateTime(2009, 1, 1));
dp.MethodParameters.Add(new DateTime(2010, 1, 1));
dp.Refresh();

Finally, to make use of this data, we can bind a control to the Data property of the WcfServiceDataProvider instance. The code below binds a Chart control to the retrieved data:

<Chart:Chart x:Name="Chart1" ChartKind="Rectangle" XValue="Date"  
             DataSource="{Binding Data, Source={StaticResource Service1}}"
             ...>

</Chart:Chart>

This will cause the chart to auto update each time the WcfServiceDataProvider refreshes the data.

ItemFlow: Live XAML Content

phil — Tue, 23 Feb 2010 18:33:00 GMT

Along with ComponentArt UI Framework 2010.1 for Silverlight and WPF comes fantastic new funtionality for our ItemFlow control, the ability to utilize live XAML content within ItemFlowItems. This brings to bear endless possiblities, anything from a simple form wizard spanning multiple ItemFlowItems to nesting an entire ItemFlow within an ItemFlowItem.
Previously ItemFlow utilized a technique of overlapping skewed images in order to attain a perspective transform. Silverlight 3.0 has introduced these types of transforms natively both with 3D Matrix Transforms and the ProjectionPlane along with Writeable Bitmaps. These additional features allow ItemFlow to properly transform any content, not just images.

<ComponentArt:ItemFlow 
	 x:Name="myItemFlow"
          Height="300"
          Width="800"
          ItemHeight="200"
          ItemWidth="200"
          ShowShading="False">
  <ComponentArt:ItemFlow.Items>
    <ComponentArt:ItemFlowItem>
      <ComponentArt:ItemFlowItem.ItemTemplate>
       <DataTemplate>
         <Grid>
           <Border Height="200" Width="200" BorderBrush="Black" BorderThickness="2">
             <TextBlock Text="Hello World" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
          </Grid>
        </DataTemplate>
      </ComponentArt:ItemFlowItem.ItemTemplate>
    </ComponentArt:ItemFlowItem>
  </ComponentArt:ItemFlow.Items>
</ComponentArt:ItemFlow>

This example illustrates how XAML content can be used within an ItemTemplate.

While this example does have the effect of adding a reflection to your XAML, ItemFlow requires a couple more items in order to shine. Tranditional ImageSource based items can be used along with items utilizing ItemTemplates, however an ItemTemplate specified for an item will override ImageSource.

Focus

When using ItemFlow with XAML content focus quickly becomes an issue. Depending on one's implementation they may require ItemFlow to prevent focus on XAML elements which are not contained within the currently selected ItemFlowItem. Take for instance the form wizard in the image at the top of this post, TextBoxes in flanking ItemFlowItems should not react to mouse clicks, instead these clicks should bring the flanking ItemFlowItem to the center where it can then be edited. This issue is solved by ItemFlow's shading, setting ShowShading="True" ( the default ) will prevent mouse interaction with flanking ItemFlowItems. When ShowShading is set to "False" the shading which overlaps items will not be shown and therefore will not prevent mouse events from interacting with XAML elements.

Loading

Another issue which arises along with XAML content is the question of load events and item sizing. ItemFlow is not aware of the current state of XAML content elements loaded into it's ItemTemplates. It is up to the developer to size the ItemWidth and ItemHeight properly and in some cases call ItemFlow.Initialize() from Loaded events of relevant elements.

Accessing Elements

XAML content within ItemFlowItems would not be of much use if we could not access elements in order to retrieve values, or apply changes. Finding elements within DataTemplates is not as simple as one might hope, however we have included a method in our ComponentArt.Silverlight.UI.Utils namespace which helps with this endeavor:

TextBlock myHelloWorldBlock = (TextBlock)ComponentArt.Silverlight.UI.Utils.Visual.FindElementByName(myItemFlow, "helloWorldBlock");

Elements may also register themselves with a pointer through their own Loaded events, or any other event in which they are a sender.

Final Notes

Although it may take some tweaking of settings and positions. Combining the techniques described above to create a unique ItemFlow implementation can result in some very interesting innovations.

HOWTO: Using ComponentArt Themes with your Web.UI AJAX/MVC controls

hwan — Fri, 19 Feb 2010 19:46:00 GMT

With Web.UI 2010, ComponentArt has introduced the ability to quickly apply a pre-built stylized design to UI controls in the form of Themes. This allows developers to concentrate on the functional behavior of the control, as design concerns are essentially moved into CSS. This has the added benefit of cleaning up the control definition code.

To use Themes with one of the pre-built styles included with the Web.UI installation package:
1. Set AutoTheming to true on the control.
ASP.NET AJAX:

<ComponentArt:Menu
  AutoTheming="true"
  ...

ASP.NET MVC:

<%= Html.ComponentArt().Menu()
  .AutoTheming(true)
  ...

The control will now render out CSS classnames on its elements, as well as generate any client templates and/or ItemLooks used by the Theme.

2. Supply the CSS classname definitions. The Web.UI installation package includes several pre-built themes. To use one add a link to the "theme.css" file, with the associated image files in the same directory as the stylesheet.

<link href="/themes/arcticwhite/theme.css" type="text/css" rel="stylesheet" />

Inside this stylesheet are all of the expected classes necessary to define the appearance of the control.

The resultant Menu with the ArcticWhite theme applied:

All Web.UI ASP.NET AJAX/MVC controls on the page with AutoTheming enabled should now be drawn with the Theme applied, without requiring setting any additional properties. Note that changing the applied Theme is literally as easy as changing the stylesheet link to point to a different "theme.css" file.

3. (Optional) Add Theme-coordinated icons.
a. Specify an IconCssClass/IconUrl on items.
XML:

<SiteMap>
  <item Text="File" >
    <item Text="New..." IconCssClass="icon-file-new" />
    <item Text="Open..." IconCssClass="icon-file-open" />
  ...

ASP.NET AJAX:

<ComponentArt:Menu ...>
  <Items>
    <ComponentArt:MenuItem Text="File">
      <ComponentArt:MenuItem Text="New..." IconCssClass="icon-file-new" />
      <ComponentArt:MenuItem Text="File"  IconCssClass="icon-file-open" />

ASP.NET MVC:

<%= Html.ComponentArt().Menu()
  ...
  .Items( o =>
  {
    o.Add().Text("File").Items( o2 =>
    {
      o2.Add().Text("New...").IconCssClass("icon-file-new");
      o2.Add().Text("File").IconCssClass("icon-file-open");

The predefined IconCssClass names are enumerated in the "icon-map.png" file inside the /themes/ folder.

b. Add a link to the "icons.css" file, with the associated "icons.png" file in the same directory as the stylesheet. If there are disabled items, make sure that "icons-disabled.png" is also in the directory.

<link href="/themes/arcticwhite/icons.css" type="text/css" rel="stylesheet" />

The resultant Menu with some icons defined:

Customizing Axis Annotation Schemes in Silverlight Charts

filipK — Tue, 15 Dec 2009 15:46:00 GMT

As my previous blog post mentioned, the sophisticated axis annotation mechanism is one of the most useful features of the Silverlight Chart control released with Web.UI 2009.3. It allows the programmer to just drop the data into the chart and not worry too much about how the axis annotation labels will be arranged, even with complicated DateTime X values on DataPoints.

However, at times the developer may want to have tighter control over the axis annotation or the grid and strip on the background plane. In these occasions, it is possible to explicitly define the axis annotation schema on the chart instance being created. This is done by Setting the Chart.XAxis.Annotation property.

Example

The following code explicitly sets the axis annotation on a chart:

<ch:Chart Name="C4" ChartKind="Block" 
	  XValue="Month"  
	  Height="300" Width="500" >

    <ch:Chart.XAxis>
	<ch:Axis>
	    <ch:Axis.Annotation>
		<ch:AxisAnnotation>
		    <ch:AxisAnnotation.Levels>
			<ch:AxisAnnotationLevel FormattingString="t" Angle="90" />
			<ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
		    </ch:AxisAnnotation.Levels>
		    <ch:AxisAnnotation.LabelCoordinates>
			<ch:DateTimeCoordinates DateLevel="Minute" Step="5"/>
		    </ch:AxisAnnotation.LabelCoordinates>
		    <ch:AxisAnnotation.MajorGridLineCoordinates>
			<ch:DateTimeCoordinates DateLevel="Minute" Step="10"/>
		    </ch:AxisAnnotation.MajorGridLineCoordinates>
		</ch:AxisAnnotation>
	    </ch:Axis.Annotation>
	</ch:Axis>
    </ch:Chart.XAxis>

    <ch:Chart.DataSeries >
	<ch:Series Id="Sales" YValue="Sales" />
    </ch:Chart.DataSeries>
</ch:Chart>

In our schema for the axis annotation, we enforce the following rules for the X Axis annotation:

Axis annotations will have two levels
The first level will display the short time pattern ("t" format string for DateTime) and be displayed vertically (90 degree angle)
The second Level will display a single label for all annotations from the above level that fall on the same day. It will output the long date pattern ("D" format string).
There will be an axis annotation every 5th minute.
There will be vertical Major Grid Line every 10th minute

This will produce the following chart:

Additionally, the following attributes of the axis annotation can be controlled through the schema:

Instead of the Step property of a numeric or DateTime coordinate, you can set the actual values at which the labels (or grid lines) will occur. This is provided in a comma delimited list set in the Values attribute. For example:
```
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"  DisplayValues="0,2,4,6,8,10,12,14,16,18,20,22"/>
    </ch:AxisAnnotation.LabelCoordinates>
```
With numeric coordinates, you can specify one of NumberOfPointsAtLeast or NumberOfPointsAtMost attribute. This will let an internal algorithm calculate the frequency of the labels or grid lines while ensuring that there are at least (or at most) number of points that are specified:
```
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:NumericCoordinates NumberOfPointsAtLeast="4"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
```

For more examples and ideas on how to customize axis annotation schemes, take a look at the tutorial that shows the image output of all existing themes along with their code.

Silverlight Chart: Overview of Chart Types

BJovanovic — Tue, 15 Dec 2009 14:27:00 GMT

This blog post lists all the chart types that Silverlight Chart supports. They are divided into several sections: bar charts, pie and doughnut charts, area charts, line charts, marker and bubble charts and financial charts. Next to each chart type illustration we provide the XAML code block that generated it.

Bar Charts

The following bar chart types are included: Rectangle, Block, RoundedBlock and Cylinder.

Code	Illustration
<CA:Chart ChartKind="Rectangle" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Block" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="RoundedBlock" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Cylinder" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>

Pie/Doughnut Charts

The following pie/doughnut chart types are included: 2D pie, 3D pie, 2D doughnut and 3D doughnut.

Code	Illustrations
<CA:Chart ChartKind="Pie2D" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Pie" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Doughnut2D" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Doughnut" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>

Area Charts

The following area chart types are included: area chart with a polygonal edge (2D and 3D), area chart with a smooth edge (2D and 3D) and an area chart with a step edge (2D and 3D).

Code	Illustration
<CA:Chart ChartKind="Area2D" LineKind="Polygon" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area2D" LineKind="Smooth" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area2D" LineKind="Step" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area" LineKind="Polygon" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area" LineKind="Smooth" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area" LineKind="Step" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>

Line Charts

The following line chart types are included: line chart with a polygonal edge (2D and 3D), line chart with a smooth edge (2D and 3D) and a line chart with a step edge (2D and 3D).

Code	Illustration
<CA:Chart ChartKind="Line" LineKind="Polygon" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Line" LineKind="Smooth" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Line" LineKind="Step" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>

Marker/Bubble Charts

The following marker styles are included: Circle, CircleSimple, Square, SquareSimple, Triange, TriangleSimple, Diamond, DiamondSimple, Plus, PlusSimple, Cross and CrossSimple.

The same marker styles can be used for bubble charts as well.

Code

Illustration

<CA:Chart ChartKind="Marker" Width="200" Height="130" 
        XValue="X" DataSource="{StaticResource DataValues}">
    <CA:Chart.DataSeries>
        <CA:Series YValue="Y" MarkerStyle="Circle"/>
    </CA:Chart.DataSeries>
</CA:Chart>

<CA:Chart ChartKind="Bubble" Width="200" Height="130" 
        XValue="X" DataSource="{StaticResource DataValues}">
    <CA:Chart.DataSeries>
        <CA:Series YValue="Y" ZValue="Z" 
            MarkerStyle="Circle"/>
    </CA:Chart.DataSeries>
</CA:Chart>

Financial Charts

Two kinds of financial charts are supported: Open-High-Low-Close and candlestick.

Code

Illustration

<CA:Chart ChartKind="OpenHighLowClose" 
        Width="200" Height="130" 
        XValue="X" DataSource="{StaticResource DataValues}">
    <CA:Chart.DataSeries>
        <CA:Series OpenValue="Open" CloseValue="Close" 
            HighValue="High" LowValue="Low"/>
    </CA:Chart.DataSeries>
</CA:Chart>

<CA:Chart ChartKind="Candlestick" Width="200" Height="130" 
        XValue="X" DataSource="{StaticResource DataValues}">
    <CA:Chart.DataSeries>
        <CA:Series OpenValue="Open" CloseValue="Close" 
            HighValue="High" LowValue="Low"/>
    </CA:Chart.DataSeries>
</CA:Chart>

The following data was used to generate the illustrations:

<UserControl.Resources>
    <Local:DataValueCollection x:Key="DataValues">
        <Local:DataValue X="A" Y="90" Z="13" Open="90" Close="120" High="135" Low="85"/>
        <Local:DataValue X="B" Y="70" Z="5" Open="115" Close="145" High="145" Low="115"/>
        <Local:DataValue X="C" Y="120" Z="23" Open="156" Close="150" High="167" Low="145"/>
        <Local:DataValue X="D" Y="135" Z="14" Open="135" Close="123" High="145" Low="120"/>
        <Local:DataValue X="E" Y="100" Z="11" Open="110" Close="160" High="170" Low="110"/>
        <Local:DataValue X="F" Y="80" Z="18" Open="165" Close="130" High="175" Low="120"/>
        <Local:DataValue X="G" Y="135" Z="6" Open="120" Close="90" High="125" Low="90"/>
        <Local:DataValue X="H" Y="150" Z="20" Open="85" Close="110" High="115" Low="80"/>
        <Local:DataValue X="I" Y="120" Z="12" Open="110" Close="135" High="165" Low="95"/>
        <Local:DataValue X="J" Y="130" Z="17" Open="135" Close="156" High="160" Low="120"/>
        <Local:DataValue X="K" Y="145" Z="11" Open="150" Close="120" High="150" Low="100"/>
        <Local:DataValue X="L" Y="110" Z="14" Open="120" Close="110" High="120" Low="100"/>
    </Local:DataValueCollection>
</UserControl.Resources>

DataValue and DataValueCollection were defined as follows:

public class DataValue
{
    public string X { get; set; }
    public double Y { get; set; }
    public double Z { get; set; }
    public double Open { get; set; }
    public double Close { get; set; }
    public double High { get; set; }
    public double Low { get; set; }
}

public class DataValueCollection : Collection { }

Default Axis Annotation Schemes in Silverlight Charts

filipK — Thu, 10 Dec 2009 16:05:00 GMT

One of the most sophisticated and exciting features of the Silverlight Charting control released with Web.UI 2009.3 is the Axis Annotation mechanism that prevents overlapping of long labels. The mechanism consists of an algorithm that selects the best possible Axis Annotation scheme by going through a list of available schemes. Each subsequent scheme in the list contains fewer annotations. The algorithm selects the first scheme from the list that does not cause any annotations to overlap. This ensures that the most descriptive and verbose annotation scheme for the given chart is selected. The mechanism is especially useful when it comes to charts that use DateTime on the X axis. Since 25 annotations schemes are avalible for DateTime axes, the programmer can just plug in the data without worrying how it will be annotated.

If you are interested how to select a specific Axis Annotation scheme or how to customize its details, take a look at this tutorial.

Below is a list of all available annotation schemes, in the order in which they are selected. A picture of each annotation scheme in action is followed by the code that defines the annotation in case you want to reuse it to explicitly create a similar annotation scheme.

Strings - Horizontal

<ch:AxisAnnotationScheme Id="String.01" Orientation="Vertical" DimensionKind="String">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel Angle="0"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

Strings - Vertical

<ch:AxisAnnotationScheme Id="String.02" Orientation="Vertical" DimensionKind="String">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel Angle="90"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Minutes, merged on days

<ch:AxisAnnotationScheme Id="DT.H.Min.01" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="t"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Minutes, merged on days, 90 degree angle

<ch:AxisAnnotationScheme Id="DT.H.Min.02" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="t" Angle="90"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Minutes, every second minute, merged on days, 90 degree angle

<ch:AxisAnnotationScheme Id="DT.H.Min.03" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="t" Angle="90" />
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute" Step="2"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Minutes, every fifth minute, merged on days, 90 degree angle

<ch:AxisAnnotationScheme Id="DT.H.Min.04" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="t" Angle="90" />
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute" Step="5"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Minutes, every tenth minute, merged on days, 90 degree angle

<ch:AxisAnnotationScheme Id="DT.H.Min.05" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="t" Angle="90" />
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute" Step="10"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"  Step="5"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Minutes, every fifteenth minute, merged on days, 90 degree angle

<ch:AxisAnnotationScheme Id="DT.H.Min.06" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="t" Angle="90" />
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute" Step="15"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute" Step="5"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Minutes, every thirtieth minute, merged on days, 90 degree angle

<ch:AxisAnnotationScheme Id="DT.H.Min.07" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="t" Angle="90" />
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute" Step="30"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute" Step="10"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Minute"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Hours, every hour, merged on days

<ch:AxisAnnotationScheme Id="DT.H.H.01" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="HH"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="D" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Hours, every second hour, merged on days

<ch:AxisAnnotationScheme Id="DT.H.H.02" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="HH"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="d" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"  DisplayValues="0,2,4,6,8,10,12,14,16,18,20,22"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour" />
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Hours, every fourth hour, merged on days

<ch:AxisAnnotationScheme Id="DT.H.H.03" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="HH"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="d" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"  DisplayValues="0,4,8,12,16,20"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour" DisplayValues="0,4,8,12,16,20"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Hours, every sixth hour, merged on days

<ch:AxisAnnotationScheme Id="DT.H.H.04" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="HH"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Day" FormattingString="d" />
    </ch:AxisAnnotation.Levels>
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"  DisplayValues="0,6,12,18"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour" DisplayValues="0,6,12,18"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Hour"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
</ch:AxisAnnotationScheme>

DateTime - Days, every day, merged on months

<ch:AxisAnnotationScheme Id="DT.H.D.01" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day" />
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="dd"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Month" FormattingString="y"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Days, odd days including 31st, merged on months

<ch:AxisAnnotationScheme Id="DT.H.D.01a" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day"  DisplayValues="1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day" />
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="dd"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Month" FormattingString="y"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Days, odd days excluding 31st, merged on months

<ch:AxisAnnotationScheme Id="DT.H.D.01b" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day"  DisplayValues="1,3,5,7,9,11,13,15,17,19,21,23,25,27,29"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day" />
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="dd"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Month" FormattingString="y"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Days, every fifth day, merged on months

<ch:AxisAnnotationScheme Id="DT.H.D.02" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day"  DisplayValues="1,5,10,15,20,25"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day" DisplayValues="1,5,10,15,20,25"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="dd"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Month" FormattingString="y"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Days, every tenth day, merged on months

<ch:AxisAnnotationScheme Id="DT.H.D.03" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day"  DisplayValues="1,10,20"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day" DisplayValues="1,10,20"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="dd"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Month" FormattingString="y"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Month, every month, merged on years

<ch:AxisAnnotationScheme Id="DT.H.M.01" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month" />
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day" DisplayValues="1,10,20"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="MMM"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Year" FormattingString="yyyy" />
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Month, vertical label, every month, merged on years

<ch:AxisAnnotationScheme Id="DT.H.M.01v" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month" />
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Day" DisplayValues="1,10,20"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="MMM" Angle="90"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Year" FormattingString="yyyy" />
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Month, every third month, merged on years

<ch:AxisAnnotationScheme Id="DT.H.M.02" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month" DisplayValues="1,4,7,10"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month" DisplayValues="1,4,7,10"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month"></ch:DateTimeCoordinates>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="MMM"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Year" FormattingString="yyyy" />
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Month, vertical label, every third month, merged on years

<ch:AxisAnnotationScheme Id="DT.H.M.03" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month" DisplayValues="1,4,7,10"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month" DisplayValues="1,4,7,10"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.MinorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Month"/>
    </ch:AxisAnnotation.MinorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel FormattingString="MMM" Angle="90"/>
        <ch:AxisAnnotationLevel MergeCellsOnEqualProperty="Year" FormattingString="yyyy" />
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Year, every year

<ch:AxisAnnotationScheme Id="DT.H.Y.01" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year" />
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel />
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Year, vertical orientation, every year

<ch:AxisAnnotationScheme Id="DT.H.Y.02" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year" />
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel Angle="90"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Year, vertical orientation, every second year

<ch:AxisAnnotationScheme Id="DT.H.Y.03" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year" Step="2"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel Angle="90"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Year, vertical orientation, every fifth year

<ch:AxisAnnotationScheme Id="DT.H.Y.04" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year" Step="5"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel Angle="90"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

DateTime - Year, vertical orientation, every tenth year

<ch:AxisAnnotationScheme Id="DT.H.Y.04" DimensionKind="DateTime" Orientation="Horizontal">
    <ch:AxisAnnotation.LabelCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year" Step="10"/>
    </ch:AxisAnnotation.LabelCoordinates>
    <ch:AxisAnnotation.MajorGridLineCoordinates>
        <ch:DateTimeCoordinates DateLevel="Year"/>
    </ch:AxisAnnotation.MajorGridLineCoordinates>
    <ch:AxisAnnotation.Levels>
        <ch:AxisAnnotationLevel Angle="90"/>
    </ch:AxisAnnotation.Levels>
</ch:AxisAnnotationScheme>

Adding Labels and Additional Controls to Silverlight Gauges

filipK — Fri, 04 Dec 2009 13:59:00 GMT

As most people reading these blogs are aware by now, the recently released Web.UI 2009.3, introduces a powerful Silverlight Gauges control. One of the features that makes this control really powerful is the ability to insert additional Silverlight controls within a gauge.

The idea is for these controls to be fitted on top of the background but below the pointers and the cover layers of the gauge, making it appear as they were part of the inner content of the gauge. When fitted inside the gauge, the additional controls can be positioned relatively to the gauge by percentage from top or bottom, or absolutely, by specifying the number of pixels from the top or the bottom of the gauge. The advantage of the relative positioning mechanism is that it makes it easy to re-size the entire gauge without affecting the relative positioning of its internal components. Let's see this concept in action.

Example

Every Silverlight gauge (RadialGauge, NumericGauge or LinearGauge) has an InnerContent property. This is a collection of FrameworkElements (of which a Silverlight Control is a subclass) of additional elements to be added to the gauge. So to add a label to a gauge, we simply need to insert it a TextBlock to this collection and position it appropriately. The code below does just that:

<z:RadialGauge x:Name="CPUgauge" Type="Circular" Width="230" Height="230" Grid.Row="0" Grid.Column="0" Value="44" >
    <z:RadialGauge.Scales>
	<z:RadialScale StartAngle="210" RotationAngle="240" MinValue="0" MaxValue="100" />
    </z:RadialGauge.Scales>
    
    <z:RadialGauge.InnerContent>
	<TextBlock Text="CPU USAGE (%)" z:Gauge.InnerContentMappingMode="RelativeToGaugeSize" z:Gauge.Top="0.41"  z:Gauge.Left="0.5" 
			HorizontalAlignment="Center" VerticalAlignment="Bottom" FontFamily="Arial" FontSize="11" Foreground="DarkGray"/>
    </z:RadialGauge.InnerContent>
</z:RadialGauge>

Here we have positioned our TextBlock relatively, so that the bottom, center of the TextBlock is 41% from the top of the gauge and in the middle horizontally. This will produce the following gauge:

Similarly, we can add any Silverlight control to the InnerContent of the gauge. For example, to create a sub-gauge, on the bottom part of our gauge, we'll simply instantiate another Gauge Control, and Add it to the InnerContent:

    <z:RadialGauge.InnerContent>
	<TextBlock Text="CPU USAGE (%)" z:Gauge.InnerContentMappingMode="RelativeToGaugeSize" z:Gauge.Top="0.41"  z:Gauge.Left="0.5" 
				HorizontalAlignment="Center" VerticalAlignment="Bottom" FontFamily="Arial" FontSize="11" Foreground="DarkGray"/> 
	<z:RadialGauge x:Name="MemGauge" Type="SemiCircleNorth" Width="90" Height="60" Value="0.82" 
		       HorizontalAlignment="Center" VerticalAlignment="Top" z:Gauge.Top="0.63"  z:Gauge.Left="0.5" z:Gauge.InnerContentMappingMode="RelativeToGaugeSize" 
		       FrameVisibility="Collapsed" CoverVisibility="Collapsed" BackgroundVisibility="Collapsed" >
	    <z:RadialGauge.Scales>
		<z:RadialScale MinValue="0" MaxValue="8">
		    <z:RadialScale.Ranges>
			<z:RadialRange MajorTickMarkStep="1" MinorTickMarkStep="0.2" MinorTickMarkSize="2" AnnotationPosition="Outside" AnnotationOffset="1" />                                    
		    </z:RadialScale.Ranges>
		</z:RadialScale>
	    </z:RadialGauge.Scales>
	</z:RadialGauge>                
	<TextBlock Text="Mem Usage (GB)" z:Gauge.InnerContentMappingMode="RelativeToGaugeSize" z:Gauge.Top="0.90"  z:Gauge.Left="0.5" 
		   HorizontalAlignment="Center" VerticalAlignment="Bottom" FontFamily="Arial" FontSize="9" Foreground="DarkGray"/>
    </z:RadialGauge.InnerContent>

Now our gauge contains a sub-gauge and appropriate labels:

Now, if we want to access this sub-gauge from our code behind, we can do that by accessing its x:Name attribute as a variable. However this is not available until the gauge is added to the Silverlight visual tree. We can always access the gauge in the following way:

(CPUgauge.InnerContent[1] as Gauge).Value = 20;

Silverlight Chart Drilldown, Part Two: Adding a BreadCrumb Control

BJovanovic — Thu, 03 Dec 2009 06:02:00 GMT

In my previous blog post, Silverlight Chart Drilldown: Part One, I described the steps necessary to create a drill-down chart using ComponentArt's Silverlight Chart. To navigate backwards to higher levels of drill-down we used a simple button that would take us back one level at a time. In this blog post I will explain how to use ComponentArt's BreadCrumb control to be able to navigate better during drill-down. A BreadCrumb control will allow us to go back multiple drill levels at a time as well as provide us with a visual representation of the current drill level.

First, we need to add a reference to our project to the navigation assembly which contains the BreadCrumb control. Also, we need to add a reference to the Navigation namespace to our CS and XAML files.

xmlns:Navigation="clr-namespace:ComponentArt.Silverlight.UI.Navigation;assembly=ComponentArt.Silverlight.UI.Navigation"

using ComponentArt.Silverlight.UI.Navigation;

In the XAML code for our user control we will replace the Back Button with a BreadCrumb control that is the same width as our chart.

 <Navigation:BreadCrumb x:Name="ChartBreadCrumb" HideSplitButton="True" Width="400" Height="26" />

At load time, we will create the whole BreadCrumb structure. Each possible chart in our drill-down sequence will have a corresponding BreadCrumbItem. First, we will start with the BreadCrumbItem representing the top most chart. To its Items collection we will add BreadCrumbItems representing all the charts that can be obtained by drilling once into the top level chart. This process will continue in a similar fashion until we have created all possible BreadCrumbItems.

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    drillDownManager.SetupBreadCrumbs(ChartBreadCrumb);
}

public void SetupBreadCrumbs(BreadCrumb breadCrumb)
{
    chartBreadCrumb = breadCrumb;

    BreadCrumbItem topBC = new BreadCrumbItem() { Text = "1990's" };
    topBC.Tag = new BreadCrumbTag(0, new DateTime(1991,1,1), new DateTime(2001,1,1));

    for (int year = 1991; year < 2001; year++)
    {
        BreadCrumbItem yearBC = new BreadCrumbItem() { Text = "Year: " + year };
        yearBC.Tag = new BreadCrumbTag(1, new DateTime(year, 1, 1), new DateTime(year, 1, 1).AddYears(1));

        for (int month = 1; month <= 12; month++)
        {
            BreadCrumbItem monthBC = new BreadCrumbItem() { Text = "Month: " + (new DateTime(year, month, 1)).ToString("MMM")};
            monthBC.Tag = new BreadCrumbTag(2, new DateTime(year, month, 1), new DateTime(year, month, 1).AddMonths(1));
            yearBC.Items.Add(monthBC);
        }
        topBC.Items.Add(yearBC);
    }

    chartBreadCrumb.RootItem.Items.Add(topBC);
    chartBreadCrumb.RefreshTree();
    chartBreadCrumb.SelectedItem = topBC;
    chartBreadCrumb.BreadCrumbClick += new BreadCrumb.BreadCrumbClickEventHandler(ChartBreadCrumb_BreadCrumbClick);
}

Notice that to each BreadCrumbItem I have assigned a Tag that will keep track of the drill level that corresponds to the BreadCrumbItem and the start of the x-range for the corresponding chart which will allow us to find the right BreadCrubItem during drill-down.

There are two more items that need to be taken care of. First, we need to initiate a back action when a BreadCrumbItem is clicked (clicking on the item that corresponds to the current chart does nothing). Depending on the drill level we might need to execute a multiple back action.

private void ChartBreadCrumb_BreadCrumbClick(object sender, BreadCrumbCommandEventArgs bcce)
{
    int newDrillLevel = (bcce.ItemSource.Tag as BreadCrumbTag).DrillLevel;
    if (drillLevel != newDrillLevel)
        Back(drillLevel - newDrillLevel);
}

Second, we need to select a new BreadCrumbItem after a drill-down action was performed. This will be done in the DrillStepCompleted event handler.

void SalesDrillDownManager_DrillStepCompleted(object sender, DrillDownEventArgs e)
{
    if (chartBreadCrumb != null)
    {
        foreach (BreadCrumbItem bItem in chartBreadCrumb.SelectedItem.Items)
        {
            if ((DateTime)((Series)CurrentChart.DataSeries[0]).DataPoints[0].X == (bItem.Tag as BreadCrumbTag).RangeStart)
            {
                chartBreadCrumb.SelectedItem = bItem;
                break;
            }
        }
    }

Now we have a fully functional BreadCrumb control that compliments our drilldown chart and gives us a more powerful navigation interface.

The code discussed in this blog can be found here.

One Size Doesn't Fit All: RangeSlider and Its Motley Crew of Axii

jovca — Wed, 02 Dec 2009 17:04:00 GMT

Standard Silverlight Slider comes with the baked-in numeric axis. While this is sufficient for working with, well, numeric data, it requires extra plumbing to map numeric values to any other data type or collection of data points, including writing a value converter for use in data binding. Apart from having an extra thumb, ComponentArt RangeSlider comes with a variety of feature-rich Axis controls suitable for different uses:

NumericAxis for numerical (double) values
DateTimeAxis for DateTime values
PixelMapAxis allows you to map values to particular pixels in the underlying image or other visual content
ObjectArrayAxis for binding with any collection

All Axis controls are shipped in the same DLL as the RangeSlider, and reside within the same ComponentArt.Silverlight.UI.Input namespace.

NumericAxis

NumericAxis is the most basic type, with similar functionality to the axis of the built-in Slider control. The following example shows a NumericAxis set in the range of 0 to 50, in selection increments of 5, with tickmarks shown both above and below the axis:

<ComponentArt:RangeSlider SelectionStart="5" SelectionEnd="25">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:NumericAxis Minimum="0" Maximum="50" SmallChange="5" TickMarkPosition="BothSides"/>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

Tickmarks can be positioned either above (TopLeft), below (BottomRight) or both above and below the axis line (BothSides). In case of the axis in vertical orientation, TopLeft tickmark will be displayed on the left side, and BottomRight on the right side of the axis.

Tick marks can be styled using TopLeftTickMarkTemplate and BottomRightTickMarkTemplate properties, as well as changed dynamically in the BeforeTickMarkShown event handler. SliderAxisBeforeTickMarkShown event args class gives you full control over template, data being displayed and visibility of every tickmark. Default tickmark DataTemplates can be found in the default XAML template for NumericAxis.

NumericAxis supports direct two-way binding with any dependency property accepting numeric input, see our databinding demos.

DateTimeAxis

Main difference between NumericAxis and DateTimeAxis is in the type of values used (DateTime instead of double), and properties used to specify data values and tickmark increments, and tickmark data value formatting. Here's an example of the DateTimeAxis with the range of a week, data increments of a day, and showing day names on each tickmark:

<ComponentArt:RangeSlider SelectionStart="11/3/2009" SelectionEnd="11/5/2009">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:DateTimeAxis Minimum="11/1/2009" Maximum="11/7/2009" SmallChange="Day" 
                                   AnnotationFormat="dddd" TickMarkPosition="BottomRight"/>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

AnnotationFormat property is a string used to specify the date/time format for display. For more information on DateTime formatting, please see Silverlight documentation for standard and custom date and time format strings.

Note: due to the nature of XAML processing in Silverlight, Minimum and Maximum dates hard-coded in XAML cannot be localized and always have to be entered in the US format (mm/dd/yyyy). Same goes for dates specified in RangeSlider's SelectionStart and SelectionEnd properties.

To specify tickmark increments like "2 days" or "4 months", you have to combine TickMarkInterval and numeric TickMarkIntervalMultiplier properties, as in:

<ComponentArt:RangeSlider SelectionStart="11/3/2009" SelectionEnd="11/5/2009">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:DateTimeAxis TickMarkInterval="Day" TickMarkIntervalMultiplier="2" Minimum="11/1/2009" Maximum="11/7/2009" 
                                   SmallChange="Day" AnnotationFormat="dddd" TickMarkPosition="BottomRight"/>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

For tickmark positioning and templating, please see the NumericAxis section above.

DateTimeAxis can be directly bound to DateTime dependency properties, such as Calendar.SelectedDate.

PixelMapAxis

PixelMapAxis is most useful together with an embedded image. Similar to good olde HTML image maps, it allows you to tie axis data points to specific pixels in the image. In this example, we're combining PixelMapAxis and an image of a chart. Note that the RangeSlider is using a non-default selection thumb.

<ComponentArt:RangeSlider SelectionStart="50" SelectionEnd="299" Theme="{StaticResource windowRangeSlider}">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:PixelMapAxis Tickmarks="0 50 100 150 200 250 299 349 399 449 499 549 599" >
            <ComponentArt:PixelMapAxis.Content>
                <Image Source="areaChart.png" Stretch="None" HorizontalAlignment="Left" />
            </ComponentArt:PixelMapAxis.Content>
        </ComponentArt:PixelMapAxis>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

The most important property is Tickmarks, a collection of pixel positions corresponding to data points in the image. Positions do not have to be uniformly distributed, as seen in this example of the educational application with data points tied to the centers of planets (image courtesy of NASA/JPL-Caltech):

<ComponentArt:RangeSlider SelectionStart="127" SelectionEnd="433" ShowTooltip="True" BeforeTooltipShown="RangeSlider_BeforeTooltipShown">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:PixelMapAxis Tickmarks="104 116 127 148 182 259 433 626 793">
            <ComponentArt:PixelMapAxis.Content>
                <Image Source="/CATimeline;component/Assets/solar_nasa.jpg" Stretch="None" HorizontalAlignment="Left"/>
            </ComponentArt:PixelMapAxis.Content>
        </ComponentArt:PixelMapAxis>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

All axis controls, including PixelMapAxis allow for custom content (e.g. image) to be embedded via Content property. If the property is set, the default axis line and tickmarks will not be displayed, and all tickmark–related properties ignored.

ObjectArrayAxis

ObjectArrayAxis can display any collection of objects. Here's an example from a real-estate search application, using a collection of strings as a source:

<ComponentArt:RangeSlider SelectionStart="1 Bedroom" SelectionEnd="Penthouse">
    <ComponentArt:RangeSlider.Axis>
        <ComponentArt:ObjectArrayAxis Items="{StaticResource objectAxisSource}" TickMarkPosition="BottomRight"/>
    </ComponentArt:RangeSlider.Axis>
</ComponentArt:RangeSlider>

Data points collection (objectAxisSource) is defined as follows:

public class AxisSource : System.Collections.ObjectModel.Collection<string>
{
  public AxisSource()
  {
      this.Add("Bachelor");
      this.Add("1 Bedroom");
      this.Add("2 Bedroom");
      this.Add("3+ Bedroom");
      this.Add("Penthouse");
      this.Add("Mansion");
  }
}

RangeSlider properties SelectionStart and SelectionEnd will expose actual objects from the source collection, allowing for direct data binding with appropriate dependency properties.

That's all for now. ComponentArt Chart can also act as a RangeSlider axis, but that's a topic for another post.

Did we cover most use cases? Do you have an idea for additional axis type? Please let us know!

Introducing SOA.UI Helpers

milos — Tue, 01 Dec 2009 19:44:00 GMT

The SOA.UI library has, since its introduction, defined its standard UI-serving services not only in terms of interfaces and DataContracts, but as a set of base classes to be inherited. This approach provides the automatic inheritance of the relevant interface and DataContract, but also allows for more helpful functionality to be built into the base class and leveraged by the end developer. With ComponentArt SOA.UI 2009.3 SP1, released yesterday, we have begun to add some of that functionality.

One of the most common tasks that we ourselves have had to solve when writing our control samples is the standard approach to performing a SoaDataGridService.Select operation in a way that supports paging, sorting and filtering. The approach to doing this was as follows:

public override SoaDataGridSelectResponse Select(SoaDataGridSelectRequest request)
{
  // load all the data into a data set (from database or elsewhere)
  DataSet oDS = LoadData();
  DataView oView = new DataView(oDS.Tables[0]);

  // apply order and filters to view
  oView.Sort = request.Sortings.ToSqlString();
  oView.RowFilter = request.Filters.ToSqlString();

  SoaDataGridSelectResponse response = new SoaDataGridSelectResponse();

  List<List<object>> arItems = new List<List<object>>();

  // chop the requested part of the record set
  for (int i = request.Offset; i < request.Offset + request.Count && i < oView.Count; i++)
  {
    // load data row
    List<object> item = new List<object>();
    foreach (SoaDataGridColumn oColumn in request.Columns)
    {
      item.Add(oView[i][oColumn.Name]);
    }

    arItems.Add(item);
  }

  response.ItemCount = oView.Count;
  response.Data = arItems;

  return response;
}

The solution was pretty much always the same in the context of our demos, so it made sense to package it in a way that's usable right out of the box. So, in applications where all the data is accessible to the service in the form of a DataTable, we can now implement SoaDataGridService.Select in just a couple of lines. First, we load the DataSet (or just DataTable), and take a look at what tools we have inherited:

The new SelectFromDataTable protected method can be called right away on the DataTable which contains our data, and it performs all the typical processing automatically. Our final Select implementation looks like this:

A similar helper method has been added for the Group operation (GroupFromDataTable), to handle the "ConstantGroups" grouping mode via SOA.UI.

Our intention is to introduce helper functionality to SOA.UI base classes in a conservative manner, starting from where the time-saving potential is greatest. The initial buildout, this being a minor service pack release, is modest and highly focused, but we welcome your feedback on the sorts of functionality you'd like to see!

Implementing TreeView in a NavBar

jovca — Mon, 30 Nov 2009 18:13:00 GMT

One question that pops up surprisingly often is how to embed a TreeView control (or any other, but TreeView owes its dominant popularity to Outlook navigation pane) inside a NavBar panel and have it fill up the whole panel. This proved trickier than it seems, as NavBar would allow the NavBarItem.Header content to grow without constrains, helpfully providing scrolling chevrons for any content bigger than the visible area. TreeView provides its own scrollbars with additional functionality like autoscrolling on drag & drop, and scrolling-to-reveal children nodes, all of which do not work properly if the TreeView is not constrained to the visible area of the page.

Starting with Web.UI Suite 2009.3 SP1, NavBarItem has a new boolean property: SingleChildMode. When set to true in a group–level NavBarItem, it will allow just one child NavBarItem, and will resize its Header content to fit the entire visible area of the panel. It will also set the child's Style property to null, removing default button–like style and giving the end developer control over the whole area of the panel. Of course, Header style can still be explicitly set via its NavBarItem.HeaderStyle property.

Here's a simple copy of the Outlook navigation pane:

Source code:

<my:NavBar>
    <my:NavBarItem Header="Mail" SingleChildMode="True" IconSource="mail-big.png" IsSelected="True">
        <my:NavBarItem>
            <my:NavBarItem.Header>
                <my:TreeView HeaderVisibility="Collapsed" BorderBrush="Transparent" BorderThickness="0">
                    <my:TreeViewNode Header="Mailbox" IconSource="mailbox.png" IsExpanded="True">
                        <my:TreeViewNode Header="Inbox" IconSource="inbox.png"/>
                        <my:TreeViewNode Header="Drafts" IconSource="drafts.png"/>
                        <my:TreeViewNode Header="Outbox" IconSource="outbox.png" />
                        <my:TreeViewNode Header="Junk E-mail" IconSource="junk.png"/>
                        <my:TreeViewNode Header="Deleted Items" IconSource="deleted.png" />
                        <my:TreeViewNode Header="Sent Items" IconSource="sent.png" />
                        <my:TreeViewNode Header="Search Folders" IconSource="search.png" />
                    </my:TreeViewNode>
                </my:TreeView>
            </my:NavBarItem.Header>
        </my:NavBarItem>
    </my:NavBarItem>
    <my:NavBarItem Header="Options" IconSource="notes-big.png">
    <!-- skipped for brevity -->
    </my:NavBarItem>
</my:NavBar>

Live demo and source code are available on our Silverlight demo site.