Jeremy Rodgers

Getting Started with DataVisualization for Windows Phone 7

2011-02-04T19:37:00Z

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

Embedding Silverlight Upload in the page

2009-11-25T16:47:00Z

The Silverlight Upload control has, up until 2003.3 SP 1 required the inclusion of System.Web.Silverlight.dll and the use of the Silverlight ASP control.

This requirement is due to the fact that Silverlight Upload requires two values provided via the InitParams tag, CartUploadId and CartTargetUrl.

Things have changed and now Silverlight Upload gives you 3 choices of how to use it on a page.

The old way (deprecated): No changes necessary.
The new way, method 1: Using the new property SilverlightObjectID you can specify the ID of the object tag your Silverlight Upload control is placed in. It is not required to have an InitParams tag but if one exists the CartUploadId and CartTargetUrl variables are appended to the existing key-value pairs.
The new way, method 2: Omit both SilverlightObjectID and SilverlightControlID and instead use this syntax for your InitParams tag: <param name="InitParams" value="CartUploadId=<%= SilverlightUpload1.UploadId %>,CartTargetUrl=<%= SilverlightUpload.GetResponseUrl(HttpContext.Current) %>" />

Example HTML for each method:

1. The old way (deprecated):

<ComponentArt:SilverlightUpload ID="SilverlightUpload1" RunAt="server" 
    MaximumUploadSize="0"
    TempFileFolder="~/uploadtemp" 
    DestinationFolder="~/upload" 
    SilverlightControlId="Xaml1">
</ComponentArt:SilverlightUpload>
<!-- ... -->
<asp:Silverlight 
	ID="Xaml1" 
	runat="server" 
	Source="~/ClientBin/MySilverlightUploader.xap" 
	MinimumVersion="3.0.40624.0" 
	Width="100%" Height="100%" 
	Windowless="true"
/>

2. Using the new property SilverlightObjectID:

<ComponentArt:SilverlightUpload ID="SilverlightUpload1" RunAt="server" 
    MaximumUploadSize="0"
    TempFileFolder="~/uploadtemp" 
    DestinationFolder="~/upload" 
    SilverlightObjectID="Object1">
</ComponentArt:SilverlightUpload>
<!-- ... -->
<object type="application/x-silverlight-2" data="data:application/x-silverlight-2," id="Object1" style="height:100%;width:100%;" >
	<param name="MinRuntimeVersion" value="2.0"></param>
	<param name="Windowless" value="True"></param>
	<!-- It is optional to have an InitParams tag at all.  If one exists the CartUploadId and CartTargetUrl are appended to it -->
	<param name="InitParams" value="MyVariable=SomeValue" />
	<param name="Source" value="ClientBin/MySilverlightUploader.xap" ></param>
	<a href="http://go2.microsoft.com/fwlink/?LinkID=114576&v=2.0">
		<img src="http://go2.microsoft.com/fwlink/?LinkID=108181" alt="Get Microsoft Silverlight" style="border-width:0;" />
	</a>
</object>

3. Manual InitParams:

<ComponentArt:SilverlightUpload ID="SilverlightUpload1" RunAt="server" 
    MaximumUploadSize="0"
    TempFileFolder="~/uploadtemp" 
    DestinationFolder="~/upload">
</ComponentArt:SilverlightUpload>
<!-- ... -->
<object type="application/x-silverlight-2" data="data:application/x-silverlight-2," style="height:100%;width:100%;" >
	<param name="MinRuntimeVersion" value="2.0"></param>
	<param name="Windowless" value="True"></param>
	<param name="InitParams" value="CartUploadId=<%= SilverlightUpload1.UploadId %>,CartTargetUrl=<%= SilverlightUpload.GetResponseUrl(HttpContext.Current) %>" />
	<param name="Source" value="ClientBin/MySilverlightUploader.xap" ></param>
	<a href="http://go2.microsoft.com/fwlink/?LinkID=114576&v=2.0">
		<img src="http://go2.microsoft.com/fwlink/?LinkID=108181" alt="Get Microsoft Silverlight" style="border-width:0;" />
	</a>
</object>

Constrain the Silverlight Menu

2009-11-25T16:30:00Z

By default the Menu will attempt to position all sub-menu drop-downs inside of the Silverlight plug-in area. Sometimes this is not the desired behaviour, in this example the Menu.Clip feature will be used to achieve a neatly aligned appearance.

Figure 1, the problem:

Setting a clip on the Silverlight Menu control gives you an easy way to constrain the Menu to a specific region. A clip can contain a RectangleGeometry, in this case we are setting the clip to a rectangle starting at x,y 0,0 and extending to 480,500. Different Menu configurations will require different clip rectangles.

<ComponentArtNav:Menu x:Name="DemoMenu" Width="480" Height="32">

    <ComponentArtNav:Menu.Clip>
	<RectangleGeometry Rect="0, 0, 480, 500"/>
    </ComponentArtNav:Menu.Clip>

    <ComponentArtNav:MenuItem Text="First Item" />
    <ComponentArtNav:MenuItem Text="Second Item" />
    <ComponentArtNav:MenuItem Text="Third Item" />
    <ComponentArtNav:MenuItem Text="Fourth Item" />
    <ComponentArtNav:MenuItem Text="Fifth Item" >
	<ComponentArtNav:MenuItem Text="First Item" />
	<ComponentArtNav:MenuItem Text="Second Item" />
	<ComponentArtNav:MenuItem Text="Third Item" />
	<ComponentArtNav:MenuItem Text="Fourth Item" />
	<ComponentArtNav:MenuItem Text="Fifth Item" />
    </ComponentArtNav:MenuItem>
</ComponentArtNav:Menu>

Figure 2, the solution: