I recently came across some very high quality charts and gauge controls available through VISIFire for WP7, WPF and Silverlight based applications. If are in need of some professional charts or gauges for your application, I would high recommend you check them out!

The chart-based controls currently available include the following:

2-D Column Charts
3-D Column Charts
Line / Step / Quick Line Charts
Stacked Charts
Funnel / Pyramid Charts
Bar Charts
CandleStick Charts
Area Charts
Pie / Doughnut Charts
Spline Charts
Radar / Polar Charts
Combination Charts
Bubble / Point Charts
Stock Charts

And for Gauges:

    Circular Gauges
    Linear Gauges

These controls include support some powerful features:

• Interactivity
• Elegant Animations
• Scrollable Charts
• Theming and Styling
• Animated Updates
• Zooming
• Data Binding
• Logarithmic Axis

Note that all these controls are compatible and editable in Microsoft Expression Blend.

To get an understanding of the stunning look and feel of these charts and gauges check out these screenshots below:

Getting start is very easy and literally takes only a few minutes to get up and running.  To start, download the trial from here once you unzip the package add a reference from your project to SLWpVisifire.Charts.dll and/or SLWpVisifire.Gauges.dll. The following code below shows an example of a Spline chart in your XAML:

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
    Width="500" Height="300" Theme="Theme1" CornerRadius="7" AnimatedUpdate="true" > 

    <vc:Chart.Titles>
        <vc:Title Text="Visifire Spline Chart"></vc:Title>
    </vc:Chart.Titles> 

    <vc:Chart.PlotArea>
        <vc:PlotArea ShadowEnabled="false"></vc:PlotArea>
    </vc:Chart.PlotArea> 

    <vc:Chart.Series>
        <vc:DataSeries RenderAs="Spline" MarkerSize="8" >
            <vc:DataSeries.DataPoints>
                <vc:DataPoint AxisXLabel="Sun" YValue="5"/>
                <vc:DataPoint AxisXLabel="Mon" YValue="6"/>
                <vc:DataPoint AxisXLabel="Tue" YValue="10"/>
                <vc:DataPoint AxisXLabel="Wed" YValue="18"/>
                <vc:DataPoint AxisXLabel="Thu" YValue="10"/>
                <vc:DataPoint AxisXLabel="Fri" YValue="30"/>
                <vc:DataPoint AxisXLabel="Sat" YValue="32"/>
            </vc:DataSeries.DataPoints>
        </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

When rendered, it will look like this:

Like what you see? Go to http://www.visifire.com to get started!

Thanks,

–Mike

When declaring a Grids columns and rows in XAML you simply specify the rows you want and the columns you want under the Grid.RowDefinition and Grid.ColumnDefinition sections.

For example:

<Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>

            <RowDefinition Height="100"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="100"></ColumnDefinition>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

            <ColumnDefinition Width="*"></ColumnDefinition>

        </Grid.ColumnDefinitions>            

</Grid>

You can set a static width and height with any integer value. Alternatively you can use “*” which is used to indicate the row or column will take up any space not already used by the other columns or row. The other option is to set the row or column to “Auto”. This will cause the row or column to match the width or height of the controls that are in it.

To dynamically add rows and columns to a Grid control you will need to create a ColumnDefinition/RowDefinition object for each column/row you want, set the width/height and add it to the ColumnDefinitions/RowDefinitions collection of the Grid control.

For example:

LayoutRoot.ColumnDefinitions.Clear();

LayoutRoot.RowDefinitions.Clear();

for (column = 0; column < columnCount; column++)

{

    ColumnDefinition cd = new ColumnDefinition();

    cd.Width = new GridLength(columnWidth);

    LayoutRoot.ColumnDefinitions.Add(cd);

}

for (row = 0; row < rowCount; row++)

{

    RowDefinition rd = new RowDefinition();

    rd.Height = new GridLength(rowHeight);

    LayoutRoot.RowDefinitions.Add(rd);

}

When you specify what Grid Row and Column you want a control to belong to through XAML you do this by simply specifying the Grid.Row and Grid.Column properties in the declaration of the control.

For example, say you have a control called MapTile. To place it in Row 1 and Column 2 (zero based index) you would declare it in your XAML as such:

<my:MapTile Grid.Row="1" Grid.Column="2" />

To do this dynamically however you have to call Grid.SetRow() and Grid.SetColumn().

For example:

MapTile mt = new MapTile();                    

Grid.SetColumn(mt, column);

Grid.SetRow(mt, row);

Thanks,
–Mike