Infragistics Community

Setting up a XamDataChart to show data from an MSSQL Server using RIA Services

[Infragistics] Kiril Matev — Thu, 02 Sep 2010 12:26:00 GMT

You're developing an application in Silverlight and you'd like to take advantage of XamDataChart - the fast chart that features a variety of built-in series and trendlines, zooming and panning that’s a part of the NetAdvantage for DataVisualization available in both WPF and Silverlight. However, your data sits in a corporate MSSQL Server, and you'd like to retrieve it and display it in the Silverlight applicaiton. This blogpost describes how to do just that - display your MSSQL data in the XamDataChart.

The approach to achieve this uses ADO.NET Entity Framework and RIA Services. Please download WCF RIA services and the RIA Services Toolkit to take advantage of this functionality. The approach was implemented as a sample project built in Visual Studio 2010 and Silverlight 4, using a Microsoft SQL Server 2008 database. Download it and follow as we go along. It uses the XamDataChart from NetAdvantage for Data Visualization for Silverlight 10.2 Service Release 1. Download a trial here.

1. We’ll start by building a database on your Microsoft SQL Server 2008 database server that will be used in this sample. Please download the backed up database here, and restore it on your database server. Open this link for a walkthrough describing the restore process in detail. Once you do that you should have an IGSample database with a StockPrices table with more than 5800 records in it.

2. In Visual Studio 2010, create a new Silverlight Application solution making sure that the Enable WCF RIA Services checkbox is checked.

3. In the Server Explorer view in Visual Studio, add a connection to the IGSample database on your MSSQL server, as shown below:

4. Add an ADO.NET Entity Data Model object named IGModel.edmx to the server project (the project with a name ending in .Web, e.g. if you called your solution XamDataChartRIA, the server project is the XamDataChartRIA.Web project) in the solution, click Add.

5. Select Generate from database and click Next

6. Select the connection defined in the previous step and click Next.

7. Select the StockPrices table from the list, set the model namespace value to IGSampleModel and click Finish.

You should have an IGModel.edmx item in your server side-project. What we've done is we’ve created an entity model to wrap the data stored in the MSSQL server.

8. Build the application, in order to enable us to reference the entity model in subsequent steps.

9. Add a Domain Service Class item named IGDomainService.cs to the server project in the solution to expose the wrapped data to be consumed, click Add.

10. Select the StockPrices table in the entity data model, click OK.

11. In the Silverlight project (the client-side project), open the designer view of the form where you'd like to place the XamDataChart showing your data

12. From the Data sources window, drag the StockPrices table into the design surface of the XAML page. This will generate a DomainDataSource object which provides access to the data on the server part of the application and initializes a grid control to show this data. We need to do this in order to have the data source code generated for us. Let’s now remove the grid control from the code, and add a XamDataChart instead.

13. Remove the grid control declaration from the XAML file

14. Add references to XamDataChart assemblies in the Silverlight project – InfragisticsSL4.Controls.Charts.XamDataChart.v10.2.dll, InfragisticsSL4.DataVisualization.v10.2.dll, InfragisticsSL4.v10.2.dll, which are in the Silverlight DV DLLs folder in the sample project.

15. Add a namespace reference in the form XAML code to be able to reference the XamDataChart:
xmlns:igChart="clr-namespace:Infragistics.Controls.Charts;assembly=InfragisticsSL4.Controls.Charts.XamDataChart.v10.2"

16. Declare a XamDataChart in the form with a date X-axis and a numeric Y-axis in the XAML code, showing a line series with High column values from the StockPrices table. The values from the Date column in the table will be used for labels along the X-axis.

<igChart:XamDataChart Name="xamDataChart1" HorizontalZoomable="True" VerticalZoomable="True" HorizontalZoombarVisibility="Visible" VerticalZoombarVisibility="Visible">
    <igChart:XamDataChart.Axes>
     <igChart:CategoryDateTimeXAxis x:Name="XAxis1" VerticalAlignment="Top"  
        ItemsSource="{Binding}" 
           DateTimeMemberPath="Date" Label="{}{Date:d}"/>
       <igChart:NumericYAxis x:Name="YAxis1"  />
    </igChart:XamDataChart.Axes>
    <igChart:XamDataChart.Series>
       <igChart:LineSeries Title="High"
         XAxis="{Binding ElementName=XAxis1}" 
            YAxis="{Binding ElementName=YAxis1}" MarkerType="None"
            ItemsSource="{Binding}" ValueMemberPath="High"/>
      </igChart:XamDataChart.Series>
</igChart:XamDataChart>

15. In order to have the XamDataChart display the stock price data, we need to reference the auto-generated DomainDataSource object in its DataContext property:

<igChart:XamDataChart 
   DataContext="{Binding ElementName=stockPriceDomainDataSource, Path=Data}" 
   Name="xamDataChart1" HorizontalZoomable="True" VerticalZoomable="True" HorizontalZoombarVisibility="Visible" VerticalZoombarVisibility="Visible">

16. Run the project – you should see an empty chart while data is loaded from the server. After a couple of seconds or so, you should see the data being displayed into the XamDataChart. Here's a screenshot of what it should look like:

Adding a Busy Indicator while data is being loaded

One refinement we can make at this stage is to use the BusyIndicator control from the Silvelright Toolkit to display a popup indicating to the user that data is being loaded, while graying out the chart area. Download the Silverlight toolkit from http://silverlight.codeplex.com/ to take advantage of this functionality.

1. Add a reference to the System.Windows.Controls.Toolkit assembly, and add a namespace reference to it in the XAML code:

xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

2. Declare a BusyIndicator to contain the XamDataChart

  <toolkit:BusyIndicator BusyContent="Loading Data..." x:Name="busyIndicator">
      <igChart:XamDataChart ...>
      ...
      </igChart:XamDataChart>
  </toolkit:BusyIndicator>

3. Set the busyIndicator IsBusy property to true in the InitializeComponent. This will show the indicator as busy at program startup

4. Set the busyIndicator IsBusy property to false in the LoadedData event handler of the DomainDataSource, which was declared automatically when we added the data source. This will remove the user message once the data is loaded and the XamDataChart is ready for use.

Summary

These are all the steps necessary to setup an end-to-end Silverlight project using the XamDataChart to display your MSSQL server data. Follow these steps with confidence and take advantage of what the XamDataChart has to offer in your applications.

If you have any questions, do not hesitate to email me at kmatev@infragistics.com

Text Bevel Effect in Silverlight and WPF

Jeffrey Smith — Wed, 01 Sep 2010 12:46:00 GMT

If your a developer you may often over look design but there are some techniques you can use that take a small effort but produce big benefits. Here I'm going to show you how to use a Content Control to Create a Bevel Effect for your headers in your Silverlight or WPF Application. Lets get Started!

In Blend Add a Content Control where you would like your text to be.

Now Edit The template of your Content Control by Right Clicking > Edit Template > Edit a Copy

Give Your Resource A Name I called mine BevelTextControlStyle and in this Case I will just add the definition in This Document.

First We will need to Group The [ContentPresenter] in A grid, Since Templates can only have one child. You can do this by Selecting the [ContentPresenter] and Hitting "Ctrl + G" or by Right Clicking the [ContentPresenter] and Sekecting Group Into > Grid

Inside Our The Grid we just created we are going to Add TWO text blocks behind the Header. One TextBlock We will call Shadow the other Highlight.

We now need to offset our Shadow text Box and our [ContentPresenter]. Using The Margin Property We will Offset the [ContentPresenter] by 1 from the top and the Shadow by 2 from the top.

Now we will Change the Foreground Brush of Our Highlight Text Box and Shadow Text Block using a Transparent White and Black. In this case I choose a 10% White for my Highlight or #19FFFFFF and a 40% Black for my Shadow or #66000000

Lastly, we just need to template bind the Text Property of Highlight and Shadow to Content. You can do that by clicking the box to the right of the text field under propertys and clicking Template Bind > Content.

By Editing the template and template binding all the text boxes to the Content you can now just select the content control and change its content as well as Font size, Font Family, and Font Weight and it will update both text boxes in the template and the [ContentPresenter].. You can still change the foreground color of Main Text without effecting the Shadow and Highlight .

I hope this makes you Applications more visually appealing!

Representing User Experience

[Infragistics] Joel Eden — Tue, 31 Aug 2010 19:56:00 GMT

How do we represent and communicate experiences?

Such a seemingly simple question that hides a lot of complexity.

Bill Buxton has a great exercise that he has people go through when he gives a talk about design. He tells each audience member to pull out a piece of paper and a pen or pencil.

First, he asks everyone to draw their phone, just a quick sketch of the physical form of the phone in about 15 seconds. Pretty simple, right? Even if you can't draw well at all, it's not too hard to sketch out the rough form of your phone.

Here's what I did (...and don't judge me...I can draw well enough to be a user experience architect...not an industrial designer...yet!):

Next, he asks everyone to draw the user interface of their phone, again just taking 15 seconds or so. That's pretty easy, too, right? I have an iPhone, so for me it was just a bunch of boxy little icons that represent apps:

Ok, so here's the third, and last thing he asks everyone to do: In just about the same time, just 15 seconds, draw the user experience of your phone. Whoah...not so easy, right?

Why is this such a big issue...why is it so easy to sketch the form and interface of the phone, but so difficult to sketch out the experience? Buxton ends with stating how important it is for the future of experience design to have tools that make it as easy to do the third part as it currently is to do the first two.

One of the main issues is that the first two (physical form and user interface) can be easily drawn as static images, but the third, experiences happen over time, space, and even social structures. People have the experience, the technology doesn't.

So what are we to do?

My basic answer is to look to forms of storytelling to use to try and get at good representations of the user's experience, or what we call empathy. If I can't represent user needs from their perspective, how can I hope to design for their needs? I typically use a scenario-based approach to design, using textual stories, and subsequent storyboards to try to represent more of the user's perspective and experience.

Storyboards used in the film and animation fields are great ways to show main points of interaction, while also describing some of the temporal elements. There are many great books and websites out there on storyboarding. Some of the best examples come from early Disney movies, and Disney just released new books with archives of storyboards from early animation up through the most recent movies. I was amazed when I first learned how integral storyboarding is to the film process. For example, Pixar will typically spend at least two years just creating the story for a new film, just using low fidelity sketched storyboards. And their success has a lot to do with that...their films are all great stories. In a way, experience design is just like creating a great story for a movie, with the user being the main character.

I'm hoping that design tools start to support more of this type of thinking, better integrating early design representations like storyboards into the existing tools for wireframing, prototyping, etc.

Please comment, or send me an email...I'd love to hear how you go about representing interaction over time, especially capturing the user's experience.

BubbleSeries in XamDataChart

[Infragistics] Anton Staykov — Tue, 31 Aug 2010 13:01:00 GMT

BubbleSeries exists in XamWebChart, however it is not supported out-of-the-box in XamDataChart. But it is very easy and straight forward to achieve a BubbleSeries visualization using ScatterSeries.

Lets begin by creating a simple Silverlight Application. For the sake of simplicity I will add my data model right into the Silverlight application. Here is the definition of my type:

    public class ScatterModel
    {
        public int SomeValueX { get; set; }
        public int SomeValueY { get; set; }
        public int SomeValueRadius { get; set; }
 
        public static IEnumerable<ScatterModel> GenerateSomeBulkData()
        {
            Random rnd = new Random();
            for (int i = 1; i <= 10; i++)
            {
                yield return new ScatterModel {
                    SomeValueX = i,
                    SomeValueY = (i + 5) * rnd.Next(10,20),
                    SomeValueRadius = (i) * rnd.Next(10,20)
                };
            }
        }
    }

Nothing really special. Just a simple type with 3 properties, which can be bound to X-,Y-axis and a radius for the bubble.

Next step is to add a Button to the page, so I can click on it and generate dummy data. In order to visualize my dummy data I will have to add a XamDataChart to my page:

        <ig:XamDataChart x:Name="dcBubbles" Grid.Row="1">
            <ig:XamDataChart.Axes>
                <ig:NumericXAxis x:Name="axisX" />
                <ig:NumericYAxis x:Name="axisY" />
            </ig:XamDataChart.Axes>
            <ig:XamDataChart.Series>
                <ig:ScatterSeries 
                    x:Name="scatterBubbles"
                    XAxis="{Binding ElementName=axisX}"
                    YAxis="{Binding ElementName=axisY}"
                    XMemberPath="SomeValueX"
                    YMemberPath="SomeValueY"
                    MarkerTemplate=
"{StaticResource MarkerTemplate}"
                                 />
            </ig:XamDataChart.Series>
        </ig:XamDataChart>

As you see, I use ScatterSeries, and I am binding the XMemberPath and YMemberPath to the respective properties (SomeValueX, XomeValueY) of my underlying objects. The only not so trivial thing is to add a MarkerTemplate for that ScatterSeries. In that MarkerTemplate I am creating the actual Bubble, binding its Radius to the SomeValueRadius property of underlying data object:

        <DataTemplate x:Key="MarkerTemplate">
            <Grid Width="{Binding Item.SomeValueRadius}" Height="{Binding Item.SomeValueRadius}">
                <ToolTipService.ToolTip>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="{Binding Path=Item.SomeValueX, StringFormat='X-Value: {0}'}" />
                        <TextBlock Text="{Binding Path=Item.SomeValueY, StringFormat='Y-Value: {0}'}" />
                        <TextBlock Text="{Binding Path=Item.SomeValueRadius, StringFormat='Radius-Value: {0}'}" />
                    </StackPanel>
                </ToolTipService.ToolTip>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.15*"/>
                    <ColumnDefinition Width="0.7*"/>
                    <ColumnDefinition Width="0.15*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.04*"/>
                    <RowDefinition Height="0.4*"/>
                    <RowDefinition Height="0.56*"/>
                </Grid.RowDefinitions>
 
                <Ellipse Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="{Binding Series.ActualBrush}" Opacity="0.7"/>
                <Ellipse Grid.RowSpan="3" Grid.ColumnSpan="3" IsHitTestVisible="False"  Opacity="0.7">
                    <Ellipse.Fill>
                        <LinearGradientBrush>
                            <GradientStop Color="Transparent" Offset="0"/>
                            <GradientStop Color="#30000000" Offset="1"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Grid.RowSpan="3" Grid.ColumnSpan="3" IsHitTestVisible="False"  Opacity="0.7">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="Transparent" Offset="0"/>
                            <GradientStop Color="#50000000" Offset="1"/>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Grid.Row="1" Grid.Column="1" IsHitTestVisible="False"  Opacity="0.7">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1">
                            <GradientStop Color="#a0ffffff" Offset="0.0"/>
                            <GradientStop Color="#00ffffff" Offset="1.0"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
            </Grid>
        </DataTemplate>

As simple as that! You can download the sample project and play around. In order to run the project you will need a 10.2 version of Infragistics Silverlight for Data Visualization.

How to publish your Windows Azure application right from Visual Studio 2010

[Infragistics] Anton Staykov — Tue, 31 Aug 2010 10:58:00 GMT

Windows Azure is an emerging technology that will be gaining bigger share of our life as software developers or IT Pros. Using earlier releases of Windows Azure Tools for Visual Studio there was an almost painful process of deploying application into the Azure environment. The standard Publish process was creating Azure package and opens the Windows Azure portal for us to publish our package manually. This option still exists in Visual Studio 2010, and is the only option in Visual Studio 2008. However, there is a new, slick option that allows us to publish / deploy our azure package right from within Visual Studio. This post is around that particular option.

Before we begin, let’s make sure we have installed the most recent version of Windows Azure Tools for Visual Studio.

For the purpose of the demo I will create very simple CloudDemo application. Just select “File” –> “New” –> “Project”, and then choose “Cloud” from “Installed Templates”. The only available template is “Windows Azure Cloud Service C#”:

A new window will pop up, which is a wizard for initial configuring Roles for our service. Just add one ASP.NET Web Role:

Assuming this is our cloud project we want to deploy, let’s first pass the Windows Azure Web Role deployment checklist, before we continue (it is a common mistake to miss configuring of DiagnosticsConnectionString setting of our WebRole).

Now is time to publish our Windows Azure service with that single ASP.NET WebRole. There is initial configuration, that must be performed once. Then every time we go to publish a new version, it will be just a single click away!

Right click on the Windows Azure Service project from our solution and choose “Publish” from the context menu:

This will popup a new window, that will help publish our project:

There are two options to choose from: Create Service Package Only and Deploy your Cloud Service to Windows Azure. We are interested in the second one – Deploy your Cloud Service to Windows Azure. Now we have to configure our credentials for deploying onto Windows Azure. The deployment process uses the Windows Azure managed API that works with client certificate authentication, and there is a neat option for generating client certificates for use with Windows Azure. From that window that is still open (Publish Cloud Service) open the drop down, which is right below “Credentials” and choose “Add …”:

Another window “Cloud Service Management Authentication” will open:

Within this window we will have to Create a certificate for authentication. Open the drop down and choose “<Create…>”:

This option will automatically create certificate for us (we have to name it). Once the certificate is created, we select it from the drop down menu and proceed to step (2) of the wizard, which is uploading our certificate to the Windows Azure Portal. For this task, the wizard offers us an easy way of doing this by copying the certificate to a temp folder. By clicking on the “Copy the full path” link it (the full path) is automatically copied onto our clipboard:

Now (do not close any window of Visual Studio 2010, just leave it as it is) we have to log-in to the Windows Azure portal (http://windows.azure.com/ ) and upload certificate to the appropriate project. First we must the project for which we will assign the certificate:

Then we click on the “Account” tab and navigate to the “Manage my API certificates” link:

Here, we simply click browse and just paste the copied path to the certificate, then click Upload:

Please note, that there is a small chance of encountering an error of type “The certificate is not yet valid” during the upload process. If it happens you have wait for a minute or two and try to upload it again. The reason for this error is that your computer time might not me as accurate and synchronized, as Windows Azure server’s. Thus, your clock may be a minute or more ahead of actual time and your generated certificate is valid from point of time, which has not yet occurred on Windows Azure servers. When you upload the certificate you will see it in the list of installed certificates:

After you upload the certificate successfully to the Windows Azure server, you have to go back to the “Account” tab and copy the Subscription ID to your clipboard:

Going back to Visual Studio’s “Cloud Service Management Authentication” window, you have to paste your subscription ID onto the field for it:

At the last step of configuring our account, we have to define a meaningful name for it, so when we see in the drop down list of installed Credentials, we will know what service is this account for. For this project I chose the name “WindowsAzureCloudDemoCert”. When we are ready and hit OK button, we will go back to the “Publish Cloud Service” window, we will select “WindowsAzureCloudDemoCert” from Credentials drop down. An authentication attempt will be made to the Azure service to validate Credentials. If everything is fine we will see details for our account, such as Account name, Slots for deployment (production & stating), Storage accounts associated with that service account:

When you hit OK a publish process will start. A successfull publish process finishes for about 10 minutes. A friendly window within Visual Studio “Windows Azure Activity Log” will show the process steps and history:

Well, as I said there is initial process of configuring credentials. Once you set up everything all right, the publish process will be just choosing the credentials and Hosted Service Slot for deployment (production or staging).

Have a great time developing for Windows Azure!

Symbolization of Elements in XamMap

[Infragistics] Mihail Mateev — Tue, 31 Aug 2010 10:37:00 GMT

Custom symbolization for the map elements in XamMap component is a common case .

The solution often is to use a Value Template for the specific MapLayer.

By default position of the symbol is in the center of the bounding rectangle of the multi-polygons.
It is possible to have a symbol outside of the polylines, included in the multi-polygons, representing surface elements.

Sample demo application demonstrates how to change a position of the MapElement Symbol into the Centroid (x = Sum(point[i].X/n, y= Sum(y[i]/n) where n is the number of points for the polyline with a biggest area from all polylines in the map element).

Demo application:

Demo application will be created for Silverlight. It is possible to make a similar one for WPF.

Requirements:

To be possible to build demo applications you need to install:

SQL Server 2008 R2 Express or higher license.

http://www.microsoft.com/express/Database/InstallOptions.aspx

NetAdvantage for Silverlight Data Visualization 2010 vol.2

http://www.infragistics.com/dotnet/netadvantage/silverlight/data-visualization.aspx#Downloads

Steps to create a demo application:

Create a base Silverlight application, using XamMap and
data from SQL Server 2008 Spatial.
Add a custom ValueTemplate for a MapLayer, named "world":
Add an Event Handler for the MapLayer.Imported event and calculate in its implementation a new position for MapElement.SymbolOrigin property:
Change the size of the symbols, depending of the value:

Implementation:

Create a base Silverlight application, using XamMap and data from SQL Server 2008 Spatial.
Demo application is based on a demo, used for the article:
"Using Infragistics XamMap Silverlight/WPF control with SQL Server Spatial":
http://community.infragistics.com/blogs/mihail_mateev/archive/2010/08/06/using-infragistics-xammap-silverlight-wpf-control-with-sql-server-spatial.aspx

You can download code from this article here: http://blogs.infragistics.com/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/mihail_5F00_mateev/SQLSpatialDemo.zip
Add a custom value template for a MapLayer, named "world":

<ig:MapLayer 
    Name="World" Brushes="#4C2C42C0 #4C218B93 #4CDC1C1C #4C3D7835 #4C701B51" 
    FillMode="Choropleth" WorldRect="{Binding ElementName=MainWindow, Path=WorldRect}"
    DataMapping="Name=Name;Value=Value;Caption=Value" VisibleFromScale="0"
    >
<ig:MapLayer.Reader>
    <ig:SqlShapeReader DataMapping="Data=geom; Name=CNTRY_NAME; Value=POP_CNTRY; Caption=CNTRY_NAME; ToolTip=CNTRY_NAME">
    </ig:SqlShapeReader>
</ig:MapLayer.Reader>
<ig:MapLayer.ValueScale>
    <ig:LinearScale IsAutoRange="True"/>
</ig:MapLayer.ValueScale>
    <ig:MapLayer.ValueTemplate>
        <DataTemplate>
            <Grid Width="20" Height="20">
                <ToolTipService.ToolTip>
                    <Border CornerRadius="4" BorderBrush="Bisque" BorderThickness="3" Background="Beige" Padding="8">
                        <StackPanel>
                            <TextBlock FontSize="12" FontWeight="Bold" Text="{Binding Path=ToolTip, StringFormat='Location: {0}'}" />
                            <TextBlock FontSize="12" FontWeight="Bold" Text="{Binding Path=Value, StringFormat='Population: {0}'}" />
                        </StackPanel>
                    </Border>
                </ToolTipService.ToolTip>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.15*"/>
                    <ColumnDefinition Width="0.7*"/>
                    <ColumnDefinition Width="0.15*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.04*"/>
                    <RowDefinition Height="0.4*"/>
                    <RowDefinition Height="0.56*"/>
                </Grid.RowDefinitions>
                <Ellipse Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="Aqua" Opacity="0.7"/>
                <Ellipse Grid.RowSpan="3" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0.7">
                    <Ellipse.Fill>
                        <LinearGradientBrush>
                            <GradientStop Color="Transparent" Offset="0"/>
                            <GradientStop Color="#30000000" Offset="1"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Grid.RowSpan="3" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0.7">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="Transparent" Offset="0"/>
                            <GradientStop Color="#50000000" Offset="1"/>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Grid.Row="1" Grid.Column="1" IsHitTestVisible="False" Opacity="0.7">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1">
                            <GradientStop Color="#a0ffffff" Offset="0.0"/>
                            <GradientStop Color="#00ffffff" Offset="1.0"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
            </Grid>
        </DataTemplate>
    </ig:MapLayer.ValueTemplate>
</ig:MapLayer>

Run the application:

Startup screen has symbols for each country. Some of them are outside of the parts of multi-polygons, representing countries.

Silverlight application Initial screen.

Add an Event Handler for the MapLayer.Imported event and calculate in its implementation a new position for MapElement.SymbolOrigin property:

<ig:MapLayer 
    Name="World" Brushes="#4C2C42C0 #4C218B93 #4CDC1C1C #4C3D7835 #4C701B51" 
    FillMode="Choropleth" WorldRect="{Binding ElementName=MainWindow, Path=WorldRect}"
    DataMapping="Name=Name;Value=Value;Caption=Value" VisibleFromScale="0"
    Imported="Layer_Imported">

.....

private void Layer_Imported(
        object sender,
        MapLayerImportEventArgs e)
{
    MapLayer layer = sender as MapLayer;
    if (layer == null)
    {
        return;
    }
 
    List<MapElement> list =
        new List<MapElement>(layer.Elements);
     foreach (MapElement ele in list)
    {
        var el = ele as SurfaceElement;
        if (el == null)
        {
            continue;
        }
        MapPolylineCollection plines = el.Polylines;
        var ordered = plines.OrderByDescending(c => c.GetPolygonArea());
        MapPolyline poly = ordered.ElementAt(0);
        ele.SymbolOrigin = poly.GetCentroid();
    }
}
 
/// <summary>
/// Implements extension methods to calculate a geometry properties of a polyline
/// </summary>
public static class Util
{
    public static double GetPolygonSignedArea(this IList<Point> c)
    {
        int n = c.Count;
        double a = 0.0;
        if (n > 2)
        {
            for (int k = n - 2, j = n - 1, i = 0; i < n; k = j, j = i, ++i)
            {
                a += c[j].X * (c[i].Y - c[k].Y);
            }
        }
         return a;
    }
 
     public static double GetPolygonArea(this IList<Point> c)
    {
        return Math.Abs(0.5 * GetPolygonSignedArea(c));
    }
 
    public static Point GetCentroid(this IEnumerable<Point> points)
    {
        double x = 0.0;
        double y = 0.0;
        double c = 0.0;
        foreach (Point point in points)
        {
            x += point.X;
            y += point.Y;
 
            c += 1.0;
        }
        return new Point(x / c, y / c);
    }
}
 

Run the application:

Positions of the symbols now are on appropriate places.

Change the size of the symbols, depending of the value:

<ig:MapLayer 
    Name="World" Brushes="#4C2C42C0 #4C218B93 #4CDC1C1C #4C3D7835 #4C701B51" 
    FillMode="Choropleth" WorldRect="{Binding ElementName=MainWindow, Path=WorldRect}"
    DataMapping="Name=Name;Value=Value;Caption=Value" VisibleFromScale="0"
    Imported="Layer_Imported">
<ig:MapLayer.Reader>
    <ig:SqlShapeReader DataMapping="Data=geom; Name=CNTRY_NAME; Value=POP_CNTRY; Caption=CNTRY_NAME; ToolTip=CNTRY_NAME">
    </ig:SqlShapeReader>
</ig:MapLayer.Reader>
<ig:MapLayer.ValueScale>
    <ig:LinearScale IsAutoRange="True"/>
</ig:MapLayer.ValueScale>
    <ig:MapLayer.ValueTemplate>
        <DataTemplate>
            <Grid Width="{Binding Path=Value}" Height="{Binding Path=Value}">
                <ToolTipService.ToolTip>
                    <Border CornerRadius="4" BorderBrush="Bisque" BorderThickness="3" Background="Beige" Padding="8">
                        <StackPanel>
                            <TextBlock FontSize="12" FontWeight="Bold" Text="{Binding Path=ToolTip, StringFormat='Location: {0}'}" />
                            <TextBlock FontSize="12" FontWeight="Bold" Text="{Binding Path=Value, StringFormat='Population: {0}'}" />
                        </StackPanel>
                    </Border>
                </ToolTipService.ToolTip>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.15*"/>
                    <ColumnDefinition Width="0.7*"/>
                    <ColumnDefinition Width="0.15*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.04*"/>
                    <RowDefinition Height="0.4*"/>
                    <RowDefinition Height="0.56*"/>
                </Grid.RowDefinitions>
                <Ellipse Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="Aqua" Opacity="0.7"/>
                <Ellipse Grid.RowSpan="3" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0.7">
                    <Ellipse.Fill>
                        <LinearGradientBrush>
                            <GradientStop Color="Transparent" Offset="0"/>
                            <GradientStop Color="#30000000" Offset="1"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Grid.RowSpan="3" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0.7">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="Transparent" Offset="0"/>
                            <GradientStop Color="#50000000" Offset="1"/>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Grid.Row="1" Grid.Column="1" IsHitTestVisible="False" Opacity="0.7">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1">
                            <GradientStop Color="#a0ffffff" Offset="0.0"/>
                            <GradientStop Color="#00ffffff" Offset="1.0"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
            </Grid>
        </DataTemplate>
    </ig:MapLayer.ValueTemplate>
</ig:MapLayer>

const double Min = 5;
const double Max = 70;

....

private void Layer_Imported(
        object sender,
        MapLayerImportEventArgs e)
{
    MapLayer layer = sender as MapLayer;
    if (layer == null)
    {
        return;
    }
 
    List<MapElement> list =
        new List<MapElement>(layer.Elements);
    foreach (MapElement ele in list)
    {
        var el = ele as SurfaceElement;
        if (el == null)
        {
            continue;
        }
 
        MapPolylineCollection plines = el.Polylines;
        var ordered = plines.OrderByDescending(c => c.GetPolygonArea());
        MapPolyline poly = ordered.ElementAt(0);
        ele.SymbolOrigin = poly.GetCentroid();
 
        //Normalize a population value
        double value = ele.Value / 5000000.0;
         if (value < Min)
        {
            value = Min;
        }
        else if (value > Max)
        {
            value = Max;
        }
 
        ele.Value = value;
    }
 
}

Run the application:

Size of the symbols depends on country population, normalized in the event handler:

Source code of the demo application you could find here:(Please visit the site to view this media)

Theming your Infragistics WPF Line of Business Applications Made Quick and Easy

[Infragistics] Kiril Matev — Mon, 30 Aug 2010 15:36:00 GMT

Say you’ve built an application using Infragistics WPF Line of Business controls, and would like to finish the job with a color theme matching the corporate color palette or the color your graphical designer has recommended. This blog post demonstrates how you can do this easily by using the powerful theming capabilities provided by Infragistics WPF Line of Business controls. This approach will enable you to change the color scheme of existing themes by a single color setting and quickly produce professional-looking themes for selected Infragistics WPF Line of Business controls.

The theming approach described in this post has been implemented in a project you can download here. It is built as a WPF application using Visual Studio 2010 and .NET 4. Please download and install a trial version of Infragistics WPF Line of Business Controls to run it.

Here are two versions of the same application screen, featuring XamRibbon, XamDataGrid and all Infragistics editor controls, produced by only changing the value of the color used for theme transformation (we call it theme “resource washing”). Here’s the application screen produced with a wash color of LightBlue:

Here’s the application screen produced with a wash color of DarkGoldenrod:

Presenting resource washing

We refer to the approach of automatically creating a new theme based on an existing one as resource washing. Think of resource washing as a process similar to what happens in a washing machine when you wash whites with one colored item – all of the whites obtain a pale shade of the colored item. The metaphor aside and back into WPF, we will be merging standard Infragistics control theme resource dictionaries (the items to have their colors changed), and then using a ResourceWasher to modify their color settings appropriately.

Implementing resource washing

<Grid>
     <Grid.Resources>
      <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
             <!--xamdatagrid theme washing—>
             <!--importing the xamdatagrid base theme—>
             <igThemes:DataPresenterWashBaseLight />
             <igThemes:ResourceWasher 
                    AutoWash="True" WashColor="LightBlue" WashMode="HueSaturationReplacement">
                <igThemes:ResourceWasher.SourceDictionary>
                      <!--set of brushes to be washed for the xamdatagrid—>
                      <igThemes:DataPresenterWashBaseLightBrushes />
                </igThemes:ResourceWasher.SourceDictionary>
             </igThemes:ResourceWasher>
          </ResourceDictionary.MergedDictionaries>
       </ResourceDictionary>
     </Grid.Resources>
</Grid>

The code segment above performs resource washing for a XamDataGrid control, using a LightBlue color. Please refer to this code segment as we go along.

Add an igThemes namespace declaration to your window as follows:

xmlns:igThemes="http://infragistics.com/Themes"

Add the base theme for the control to the MergedDictionaries collection of the ResourceDictionary to make sure the ControlTemplates will be loaded.

Add a ResourceWasher, which is a customized ResourceDictionary type used to modify Infragistics WPF controls theme resource dictionaries to the same MergedDictionaries collection. The ResourceWasher SourceDictionary property has to be set to the set of brushes to be washed. Although you can use all themes as source, we recommend using brush sets with names ending in WashBaseLight or WashBaseDark – we have set these up especially for resource washing. In case of XamDataGrid these two brush sets are DataPresenterWashBaseLightBrushes and DataPresenterWashBaseDarkBrushes. There are corresponding light and dark brush sets to be used when washing for XamRibbon and editors controls, as implemented in the sample project.

The ResourceWasher uses the WashColor color in the process of washing – this is the color which all color settings in the theme will approach. In more advanced scenarios, to be covered in a separate post, we can define WashGroups which can be washed using separate colors. This gives you extra flexibility and precision in coloring selected elements of controls.

There are two modes of color washing controlled by the WashMode property of the ResourceWasher – experiment and set the one which works best for you:

HueSaturationReplacement - Replaces the hue and saturation values with the corresponding values from the wash color but retains the brightness value.
SoftLightBlend - Blends each of the RGB color values with the corresponding wash color values.

What makes this approach quick is also that you don’t need to set any properties on the XamDataGrid control or write and user code to take advantage of resource washing. Just make sure you haven’t set its Theme property to one of the built-in themes, as it will override the color settings from the washing.

Summary

Resource washing is a powerful tool for quickly producing your own shades of standard themes to match the color scheme you have selected for your application or organization as a whole. It frees you from the limitations of standard theme colors, and truly helps you quickly and easily deliver the application you’re building in the exact colors the graphical designers would like to have it.

Setting the FieldSettings and FieldLayoutSettings of XamDataGrid

[Infragistics] Alex Fidanov — Fri, 27 Aug 2010 05:31:00 GMT

Global settings VS Local Settings

A complete sample project you may find here : (Please visit the site to view this media)

Using a XamDataChart to Create a Series of Items with Different Colors, Depending on the Values

[Infragistics] Mihail Mateev — Thu, 26 Aug 2010 11:58:00 GMT

Infragistics XamDataChart for Silverlight and WPF proposes a flexible approach to create a series where markers look different depending of properties of the bound items.

It is possible to use a MarkerTemplate property of all kind of MarkerSeries like ScatterSeries, RangeColumnSeries.
There it is possible to create own DataTemplate where properties of the UI elements could be bound to the properties of the item DataContext.

<DataTemplate x:Key="bubbleTemplate" >
    <Ellipse Stretch="Fill" 
               HorizontalAlignment="Stretch" 
               VerticalAlignment="Stretch" 
               StrokeThickness="0.5" 
               MinWidth="10" MinHeight="10" 
               Width="{Binding Item.Width}"
               Height="{Binding Item.Width}">
        <ToolTipService.ToolTip>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding Item.YValue, StringFormat='Value: {0}'}" />
            </StackPanel>
        </ToolTipService.ToolTip>
    </Ellipse>
</DataTemplate>

An appropriate sample could be found there: http://help.infragistics.com/Help/NetAdvantage/DV/2010.2/CLR4.0/html/xamDataChart_Marker_Values.html

Sometimes developers want to change the color of the marker, depending of the some values in the item DataContext. Values could be from different types. To be possible to convert a value from specified type to Brush with a specific color we need to have a ValueConverter.

This article demonstrates two different converters: first - from a number to discrete color palette and a second - from number to continuous color palette.

Sample application is built for Silverlight. It is possible to use the same approach to create a WPF application with XamDataChart for WPF

Requirements to build a sample application:

Software:

Visual Studio 2010
Infragistics XamMap component: NetAdvantage for Silverlight Data Visualization 2010 vol.2

http://www.infragistics.com/dotnet/netadvantage/silverlight/data-visualization.aspx#Downloads

Steps to reproduce:

For Silverlight Demo:

Create a Silverlight application.
Create a ValueConverters - NumberToBrush to convert number to Brush with color from a discrete palette and RgbValueConverter (in the most components Brush is the type, used for Background, Stroke, etc) to convert a number to Brush with color from a continuous palette.
Create a sample data, used like a DataContext for XamDataChart.
Create a MarkerTemplates, representing ellipsis where color is bound to property YValue, using both converters.
Create a XamDataCharts with a scatter series, using created MarkerTemplate definitions.
Run the sample application

1. Create a Silverlight Application with Visual Studio 2010.

2. Add a two ValueConverters:

NumberToBrush to convert a number (from type double) to SolidColorBrush.
Brush depends on the color that is taken from a discrete palette. In a palette of six SolidColorBrishes with colors - white, red, orange, yellow, green and blue. As a parameter is set to Range Min and Max values. Converter returns a SolidColorBrush, which corresponds to the number (space is divided into 5). If the value is outside the range of returns SolidColorBrush with white color.

public sealed class NumberToBrush : IValueConverter
{
 
    private Brush[] _brushes = new Brush[] { new SolidColorBrush(Colors.White), 
                                            new SolidColorBrush(Colors.Red), 
                                            new SolidColorBrush(Colors.Orange),
                                            new SolidColorBrush(Colors.Yellow), 
                                            new SolidColorBrush(Colors.Green), 
                                            new SolidColorBrush(Colors.Blue)};
 
    #region Property Accessors
 
    public Brush[] Brushes
    {
        get { return this._brushes; }
        set { this._brushes = value; }
    }
 
    #endregion
 
    #region IValueConverter
 
    public object Convert(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
 
        if ((typeof(Brush) != targetType || typeof(double) != value.GetType()))
        {
            return null;
        }
 
        Range range = parameter as Range;
        if(range == null)
        {
            range = new Range();
            range.Min = 0;
            range.Max = 10;
        }
 
        var i = (double)value;
 
        double interval = (double)(range.Max - range.Min)/(_brushes.Length - 1);
        int index = (int)(i / interval + 0.5);
 
        if (index <= 0 || index >= this._brushes.Length) return this._brushes[0];
 
        return this._brushes[index];
    }
 
    public object ConvertBack(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
 
    #endregion
}
 
public class Range : BaseViewModel
{
    #region Min
 
    private int _min;
    public int Min
    {
        get { return this._min; }
        set
        {
            this._min = value;
            OnPropertyChanged("Min");
        }
    }
 
    #endregion // Min 
 
    #region Max
 
    private int _max;
    public int Max
    {
        get { return this._max; }
        set
        {
            this._max = value;
            OnPropertyChanged("Max");
        }
    }
 
    #endregion // Max
 
}

RgbValueConverter converts number to SolidColorBrush form color of continuous palette.

Converter uses HSV (Hue-Saturation-Value)

http://en.wikipedia.org/wiki/HSL_and_HSV

Form Wikipedia:

HSL and HSV are the two most common cylindrical-coordinate representations of points in an RGB color model, which rearrange the geometry of RGB in an attempt to be more perceptually relevant than the cartesian representation. They were developed in the 1970s for computer graphics applications, and are used for color pickers, in color-modification tools in image editing software

HSL and HSV are both cylindrical geometries with hue, their angular dimension, starting at the red primary at 0°, passing through the green primary at 120° and the blue primary at 240°, and then wrapping back to red at 360°.

HSV is a different way of representing a color (as opposed to RGB, where R indicates a value from 0 to 255 that "controls the amount of red", G for green and B for Blue). Have a look at the link above for an in-depth discussion.

In the RgbValueConverter number value is normalized to fit between Min and Max values :

var normValue = i * 360/(range.Max - range.Min);

There is the whole code for RgbValueConverter:

public sealed class RgbValueConverter : IValueConverter
{
 
    private static Color ColorFromHsv(double hue, double saturation, double value)
    {
        int hi = (int)(Math.Floor(hue / 60)) % 6;
        double f = hue / 60 - Math.Floor(hue / 60);
 
        value = value * 255;
        int v = (int)(value);
        int p = (int)(value * (1 - saturation));
        int q = (int)(value * (1 - f * saturation));
        int t = (int)(value * (1 - (1 - f) * saturation));
 
        if (hi == 0)
        {
            return Color.FromArgb(255, (byte)v, (byte)t, (byte)p);
        }
 
        if (hi == 1)
        {
            return Color.FromArgb(255, (byte)q, (byte)v, (byte)p);
        }
 
        if (hi == 2)
        {
            return Color.FromArgb(255, (byte)p, (byte)v, (byte)t);
        }
 
        if (hi == 3)
        {
            return Color.FromArgb(255, (byte)p, (byte)q, (byte)v);
        }
 
        if (hi == 4)
        {
            return Color.FromArgb(255, (byte)t, (byte)p, (byte)v);
        }
 
        return Color.FromArgb(255, (byte)v, (byte)p, (byte)q);
    }
 
 
    #region IValueConverter
 
    public object Convert(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
 
        if ((typeof(Brush) != targetType || typeof(double) != value.GetType()))
        {
            return null;
        }
 
        Range range = parameter as Range;
        if(range == null)
        {
            range = new Range();
            range.Min = 0;
            range.Max = 10;
        }
 
        var i = System.Convert.ToDouble(value);
 
        if (i <= range.Min || range.Min >= range.Max)
        {                
            return new SolidColorBrush(Colors.White);
        }
 
        var normValue = i * 360/(range.Max - range.Min);
 
        return new SolidColorBrush(ColorFromHsv(normValue, 1, 1));
 
    }
 
    public object ConvertBack(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
 
    #endregion
 
}

3. Create a sample data, used like a DataContext for XamDataChart.

public class BubbleDataCollection
        : ObservableCollection<BubblePoint>
{
 
    public BubbleDataCollection()
    {
        this.Add(new BubblePoint { XValue = 4, YValue = 10, Width = 30 });
        this.Add(new BubblePoint { XValue = 4, YValue = 4, Width = 40 });
        this.Add(new BubblePoint { XValue = 8, YValue = 8, Width = 20 });
        this.Add(new BubblePoint { XValue = 10, YValue = 1, Width = 50 });
        this.Add(new BubblePoint { XValue = 1, YValue = 10, Width = 40 });
    }
 
}
 
public class BubblePoint
{
    public double XValue { get; set; }
    public double YValue { get; set; }
    public double Width { get; set; }
}
 
    <UserControl.Resources>
        ...
        <XamDataChartCustomTemplatesDemo:BubbleDataCollection x:Key="bubbleCollection" />
       ....
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource bubbleCollection}">

4. Create a MarkerTemplates, representing ellipsis where color is bound to property YValue, using both converters.

<UserControl.Resources>
    <Converters:NumberToBrush x:Key="indexToBrush"/>
    <Converters:RgbValueConverter x:Key="RgbToBrush"/>
    <XamDataChartCustomTemplatesDemo:BubbleDataCollection x:Key="bubbleCollection" />
    <Converters:Range x:Key="range" Min="0" Max="10"/>
    <DataTemplate x:Key="bubbleTemplate" >
        <Ellipse Stretch="Fill" 
                   HorizontalAlignment="Stretch" 
                   VerticalAlignment="Stretch" 
                   Fill="{Binding Item.YValue, Converter={StaticResource indexToBrush}, ConverterParameter={StaticResource range}}" 
                   Stroke="{Binding Series.ActualMarkerOutline}" 
                   StrokeThickness="0.5" 
                   MinWidth="10" MinHeight="10" 
                   Width="{Binding Item.Width}"
                   Height="{Binding Item.Width}">
            <ToolTipService.ToolTip>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Item.YValue, StringFormat='Value: {0}'}" />
                </StackPanel>
            </ToolTipService.ToolTip>
        </Ellipse>
    </DataTemplate>
    <DataTemplate x:Key="bubbleTemplate2" >
        <Ellipse Stretch="Fill" 
                   HorizontalAlignment="Stretch" 
                   VerticalAlignment="Stretch" 
                   Fill="{Binding Item.YValue, Converter={StaticResource RgbToBrush}, ConverterParameter={StaticResource range}}" 
                   Stroke="{Binding Series.ActualMarkerOutline}" 
                   StrokeThickness="0.5" 
                   MinWidth="10" MinHeight="10" 
                   Width="{Binding Item.Width}"
                   Height="{Binding Item.Width}">
            <ToolTipService.ToolTip>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Item.YValue, StringFormat='Value: {0}'}" />
                </StackPanel>
            </ToolTipService.ToolTip>
        </Ellipse>
    </DataTemplate>        
</UserControl.Resources>

MarkerTemplate definitions contain Ellipsis, filled with a Brush, depending on YValue of the BubblePoint objects.

5. Create a XamDataCharts with a scatter series, using created MarkerTemplate definitions.

<igChart:XamDataChart x:Name="theChart">
    <igChart:XamDataChart.Axes>
        <igChart:NumericXAxis x:Name="xAxis" 
                               MinimumValue="0" MaximumValue="15"/>
        <igChart:NumericYAxis x:Name="yAxis" 
                               MinimumValue="0" MaximumValue="15"/>
    </igChart:XamDataChart.Axes>
 
    <igChart:XamDataChart.Series>
        <igChart:ScatterSeries x:Name="scatter"
                               MarkerTemplate="{StaticResource bubbleTemplate}"
                               ItemsSource="{Binding}"
                               XMemberPath="XValue"
                               YMemberPath="YValue"
                               XAxis="{Binding ElementName=xAxis}"
                               YAxis="{Binding ElementName=yAxis}"></igChart:ScatterSeries>
    </igChart:XamDataChart.Series>
</igChart:XamDataChart>
...

<igChart:XamDataChart x:Name="theChart2">
    <igChart:XamDataChart.Axes>
        <igChart:NumericXAxis x:Name="xAxis2" 
                                   MinimumValue="0" MaximumValue="15"/>
        <igChart:NumericYAxis x:Name="yAxis2" 
                                   MinimumValue="0" MaximumValue="15"/>
    </igChart:XamDataChart.Axes>
 
    <igChart:XamDataChart.Series>
        <igChart:ScatterSeries x:Name="scatter2"
                                   MarkerTemplate="{StaticResource bubbleTemplate2}"
                                   ItemsSource="{Binding}"
                                   XMemberPath="XValue"
                                   YMemberPath="YValue"
                                   XAxis="{Binding ElementName=xAxis2}"
                                   YAxis="{Binding ElementName=yAxis2}"></igChart:ScatterSeries>
    </igChart:XamDataChart.Series>
 
</igChart:XamDataChart>

6. Run the application:

Sample code you could find here:(Please visit the site to view this media)

WebHTMLEditor: How to add toolbar button which inserts object at caret

[Infragistics] Alexander Kartavov — Wed, 25 Aug 2010 20:07:00 GMT

The WebHtmlEditor allows to add various custom items to toolbar. In case a toolbar button it is the ToolbarButtonType.Custom. That new item can be added at visual design time within Toolbar.Items property. Below example shows how to add item at run time.
aspx.cs codes:

protected void Page_Load (System.Object sender, System.EventArgs e)
{
if(!this.IsPostBack)
{
  Infragistics.WebUI.WebHtmlEditor.ToolbarButton tb = new Infragistics.WebUI.WebHtmlEditor.ToolbarButton(Infragistics.WebUI.WebHtmlEditor.ToolbarButtonType.Custom);
  tb.Key = "MyCustomTable";
  tb.ToolTip = "Insert Table";
  tb.ImageName = "./images/myTable.gif";
  this.WebHtmlEditor1.Toolbar.Items.Add(tb);
}
}

These codes will add new item to toolbar, but it will do nothing. In order to implement action on client and insert something in editor, the ClientSideEvents.BeforeAction should be used. The handler of that event provides various information about action. The 2nd param "actID" is equal to the Key of action/toolbutton. So, application may check if actID is equal to the Key of custom item and do desired action.

In order to insert an object at caret, the method insertAtCaret(object) can be used. There are also global iged_insText(str) and iged_insNodeAtSel(obj) methods. Second method is not available for IE, because IE automatically converts str passed into iged_insText to html object.

Below example shows how to insert TABLE with custom attributes at location of caret. Application may insert any similar object or content.
Note: in case of IE a string can be used as parameter in insertAtCaret, but all other browsers require html object.

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server">
<ClientSideEvents BeforeAction="WebHtmlEditor1_BeforeAction" />
</ighedit:WebHtmlEditor>

ASP.NET Team

How to process keyup event in WebHtmlEditor

[Infragistics] Alexander Kartavov — Wed, 25 Aug 2010 20:06:00 GMT

ClientSideEvents of WebHtmlEditor do not have KeyUp event. If application needs to process that event, then it may use following codes. They contain some internal objects methods and mimic internal logic of control. It processes initialze event and adds listener to the keyup event over editing area.

To find reference to editor from source element of browser-event, the element or id can be used.

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server">
<ClientSideEvents Initialize="initEditor" />
</ighedit:WebHtmlEditor>

ASP.NET Team

WebHTMLEditor: How to build toolbar button with custom dialog

[Infragistics] Alexander Kartavov — Wed, 25 Aug 2010 20:05:00 GMT

In order to add a toolbar button which shows custom dialog, the ToolbarDialogButton object with type Custom should be added to the Toolbar of WebHtmlEditor. It can be done at visual design time using Toobar.Items or at run time. Example below shows how to do that at run time. The dialog type should be set to Text and DialogContentID should have a value. That value will be used by WebHtmlEditor to set id of html-element DIV which represents content pane located inside of custom dialog. It means that on client application may get reference to that DIV container and fill it with any content.

Custom content for dialog can be built dynamically in javascript or it may already exist within aspx. To fill up dialog, any start-up event can be used. The best place to do that, is to use ClientSideEvents.Initialize.
In that particular sample, the content of dialog is built directly in aspx inside of DIV with id=MyDialogContentID. In order to prevent showing that MyDialogContentID on page load, its visibility is set to hidden.
Besides showing custom dialog this sample also processes events of dialog's child elements; and inserts text or object in editor at location of caret. All that processing and inserting is not related to custom dialog, but only an example, how editor can be updated by custom dialog.

aspx.cs codes:

protected void Page_Load (System.Object sender, System.EventArgs e)
{
if(!this.IsPostBack)
{
  Infragistics.WebUI.WebHtmlEditor.ToolbarDialogButton tb = new Infragistics.WebUI.WebHtmlEditor.ToolbarDialogButton();
  tb.Type = Infragistics.WebUI.WebHtmlEditor.ToolbarDialogButtonType.Custom;
  tb.Dialog.InternalDialogType = Infragistics.WebUI.WebHtmlEditor.InternalDialogType.Text;
  tb.Dialog.DialogContentID = "MyDialogID";
  tb.ToolTip = "My dialog";
  tb.ImageName = "./images/myDialog.gif";
  this.WebHtmlEditor1.Toolbar.Items.Add(tb);
}
}

aspx codes:

// That function is called by a button located in custom dialog MyDialogContentID.
// Build some object (here SPAN) and insert it into WebHtmlEditor at current selection.
function myDialogButtonClick2(message)
{
var span = document.createElement("SPAN");
var style = span.style;
style.border = "2px solid red";
style.background = "cyan";
style.fontSize = "10pt";
style.padding = "5px";
var field = document.getElementById("myDialogEditField");
var text = field ? field.value : "Can not find myDialogEditField.";
span.innerHTML = "SPAN from MyDialog:'" + message + "'. Value:" + text;
var oEditor = iged_getById("<%=WebHtmlEditor1.ClientID%>");
if(oEditor)
oEditor.insertAtCaret(span);
}

// That function is called by a button located in custom dialog MyDialogContentID.
// Build some text and insert it into WebHtmlEditor at current selection.
function myDialogButtonClick1(message)
{
var field = document.getElementById("myDialogEditField");
var text = field ? field.value : "Can not find myDialogEditField.";
text = "Message from dialog '" + message + "' Value:'" + text + "'";
var oEditor = iged_getById("<%=WebHtmlEditor1.ClientID%>");
if(oEditor)
  oEditor.insertAtCaret(text);
}
</script>
<div id="MyDialogContentID" style="padding:10px;width:360px;height:120px;border:2px solid #80A0C0;background:#E0F0F0;display:none;visibility:hidden;">
  <span style="font-size:8pt;margin:20px;">Enter text:</span>
  <input id="myDialogEditField" style="margin-top:10px;" value="default text" />
  <br />
  <span style="font-size:8pt;">Note: if you set focus to field, then old selection in WebHtmlEditor can be lost (mostly under IE) and text can be inserted at the beginning, rather than at the last position of caret/selection</span>
  <br />
  <input type="button" style="width:150px;margin:10px;" value="Insert Text" onclick="myDialogButtonClick1('MyDialog')" />
  <input type="button" style="width:150px;margin:10px;" value="Insert SPAN" onclick="myDialogButtonClick2('MyDialog')" />
</div>
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server">
<ClientSideEvents Initialize="WebHtmlEditor1_Initialize" />
</ighedit:WebHtmlEditor>

ASP.NET Team

How to add custom drop-down button to toolbar of WebHtmlEditor

[Infragistics] Alexander Kartavov — Wed, 25 Aug 2010 20:04:00 GMT

In order to add another ToolbarDropDown to WebHtmlEditor, the Type="Custom" should be used. The toolbar items expose property Key and if that property is set, then action on client is defined not by Type property, but by the Key. It means that if Key is set to the "Insert", then WebHtmlEditor on client will automatically perform "insert" action for items of custom drop-down list and not extra codes is required.
Another item can be added within aspx at visual design, or it can be added on any server event. Below are examples for both cases:

aspx:

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server" ...>
<Toolbar>
...
<ighedit:ToolbarDropDown runat="server" Type="Custom" Key="Insert" Title="MyInsert2">
       <Items>
         <ighedit:ToolbarDropDownItem runat="server" Value="Text to insert 2-1" Text="Item1" />
         <ighedit:ToolbarDropDownItem runat="server" Value="Text to insert 2-2" Text="Item2" />
      </Items>
    </ighedit:ToolbarDropDown>
    <ighedit:ToolbarDropDown runat="server" Type="Custom" Key="Insert" Title="MyInsert3" >
       <Items>
          <ighedit:ToolbarDropDownItem runat="server" Value="Text to insert 3-1" Text="Item1" />
          <ighedit:ToolbarDropDownItem runat="server" Value="Text to insert 3-2" Text="Item2" />
       </Items>
    </ighedit:ToolbarDropDown>
...
</Toolbar>
</ighedit:WebHtmlEditor>

aspx.cs

protected void Page_Load(object sender, System.EventArgs e)
{
if(this.IsPostBack)
return;
ToolbarDropDown dd = new ToolbarDropDown(ToolbarDropDownType.Custom);
dd.Key = "Insert";
dd.Title = "My links";
this.WebHtmlEditor1.Toolbar.Items.Add(dd);
ToolbarDropDownItem item = new ToolbarDropDownItem("Link1", "<a href='http://www.google.com'>Go google</a>");
dd.Items.Add(item);
item = new ToolbarDropDownItem("Link2", "<br/><a href='http://www.msdn.com'>MSDN</a>");
dd.Items.Add(item);
}

If application needs to find reference to custom item on server (in order to remove or modify it), then it has several options. The most straight forward, is to search all items within Toolbar.Items property until a match for a property is found. For example, if(item.Title=="MyInsert2"). Below is example for that:

ToolbarDropDown myInsert2 = null;
foreach(object item in this.WebHtmlEditor1.Toolbar.Items)
{
if(item is ToolbarDropDown && ((ToolbarDropDown)item).Title.Equals("MyInsert2"))
{
myInsert3 = (ToolbarDropDown)item;
break;
}
}

On another hand the WebHtmlEditor and WebHtmlEditor.Toolbar also have search method FindByKeyOrAction. Using that method will make codes much cleaner. However, in situation when Type is Custom and Key is Insert all 3 insert buttons (aspx example) will get match and the first found item will be returned. To get around that situation, an application may set the Key property for any ToolbarDropDownItem used in custom drop-down and pass that value into FindByKeyOrAction method. In this case the reference to the parent ToolbarDropDown will be returned, but not to ToolbarDropDownItem.
Note: the Key of ToobarDropDownItem is not used for any purpose not on server not on client.
Below is example:

aspx:

    ...
    <ighedit:ToolbarDropDown runat="server" Type="Custom" Key="Insert" Title="MyInsert3" >
       <Items>
          <ighedit:ToolbarDropDownItem runat="server" Key="MyKeyItem" Value="Text to insert 3-1" Text="Item1" />
          <ighedit:ToolbarDropDownItem runat="server" Value="Text to insert 3-2" Text="Item2" />
       </Items>
    </ighedit:ToolbarDropDown>
    ...

aspx.cs:

ToolbarDropDown myInsert3 = this.WebHtmlEditor1.FindByKeyOrAction("MyKeyItem") as ToolbarDropDown;

Advanced configuration:
If application needs a specific/strict/custom identifier for a button on server, then it may set the Key property to any value. That Key will identify a custom button and not need in explicit search or usage of Key for a subitem.
However, in this case in order to perform desired built-in "insert" action on client, application should process ClientSideEvents.BeforeAction. It can check for action (actID and/or act params) coming from toolbar button and implement it.
If application wants to perform a built-in action like "insert", then it may use the "oEvent.act" member. If that member is set, then that has priority over Type and Key actions. Below is example:

aspx:

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server" ...>
<Toolbar>
...
<ighedit:ToolbarDropDown runat="server" Type="Custom" Key="MyInsertKey" Title="MyInsert4">
       <Items>
         <ighedit:ToolbarDropDownItem runat="server" Value="Text to insert 4-1" Text="Item1" />
         <ighedit:ToolbarDropDownItem runat="server" Value="Text to insert 4-2" Text="Item2" />
      </Items>
    </ighedit:ToolbarDropDown>
...
</Toolbar>
</ighedit:WebHtmlEditor>

ASP.NET Team

How add custom button which resets styles of selected text/objects in WebHtmlEditor

[Infragistics] Alexander Kartavov — Wed, 25 Aug 2010 20:03:00 GMT

The WebHtmlEditor allows to add custom items to toolbar and process their events on client. WebHtmlEditor on client has a shortcut method _format which wraps execCommand method of document. Application may obtain reference to document used by editing area and call that method, or it may use shortcut. The command "removeFormat" performs clearing currently selected text in browser. Below example implements that feature.

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server" ...>
   <ClientSideEvents BeforeAction="WebHtmlEditor1_BeforeAction" />
   <Toolbar>
      ...
      <ighedit:ToolbarButton runat="server" Type="Custom" Key="MyResetButton" ImageName="./images/resetImage.gif" />
   ...

ASP.NET Team

WebHTMLEditor: How to trigger actions for WebHtmlEditor from javascript

[Infragistics] Alexander Kartavov — Wed, 25 Aug 2010 20:01:00 GMT

Most actions of WebHtmlEditor are wrappers for document.execCommand(action, params). The wrapper function for that action has name _format. It was intended for internal usage, though, application may use is it as a short-cut for execCommand. Those actions are applied to selected object where caret is located.
Internal implementation of actions which insert objects are rather complex and different for different browsers. For example insert-table action includes building TABLE according to properties entered in InsertTable dialog.

All actions on client are filtered through global function iged_act(). Editor does not have public options to trigger toolbar actions from javascript for several reasons. However, applications may trigger custom actions for simple actions like Bold, Italic and few others. That will have effect for current/focused editor.
Below is example, which shows how to use _format and iged_act. It also includes example to access objects (like TABLE) located in editor and modify its property.

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server"></ighedit:WebHtmlEditor>
<script type="text/javascript">
function setColor(val)
{
var editor = iged_getById('<%=WebHtmlEditor1.ClientID%>');
if(editor)
  editor._format('forecolor', val);
}
function setBold()
{
iged_act('bold');
}
function setTableProp(prop, val)
{
var editor = iged_getById('<%=WebHtmlEditor1.ClientID%>');
if(!editor)
  return;
// get reference to editing area:
// in case of IE the DIV is used, all other browsers: IFRAME
var field = editor._ie ? editor._elem : editor._doc().body;
var tables = field.getElementsByTagName('TABLE');
if(!tables || tables.length < 1)
  return;
var table = tables[0];
table.style[prop] = val;
}
</script>
<input type="button" value="Bold" onclick="setBold()" />
<input type="button" value="Color" onclick="setColor('#c00000')" />
<input type="button" value="TableBackground" onclick="setTableProp('background', 'red')" />
<input type="button" value="TableColor" onclick="setTableProp('color', 'blue')" />
<input type="button" value="TableBorder" onclick="setTableProp('borderColor', 'green')" />

ASP.NET Team