Working with Gradients from Managed Code

In this topic, we are going to explain how to work with Gradients from managed code in Visifire. There are two types of Gradient brush available in Silverlight which can be applied to any Chart element in Visifire.

 

 

LinearGradientBrush

 

First we will create a LinearGradientBrush from managed code and set it to Color property of any Chart element. For information about setting Silverlight project environment and creating Visifire Chart from managed code, please refer to the topic Managed Code Silverlight Sample.

 

Below is the code for creating LinearGradientBrush and setting it to DataSeries's Color property:

 

 

// Create Chart object

Chart chart = new Chart();

 

// Set Chart size

chart.Width = 500;

chart.Height = 300;

 

// Initialize new instance of Random class

Random rand = new Random();

 

// Create DataSeries object

DataSeries dataSeries = new DataSeries();

 

// Set DataSeries property

dataSeries.Bevel = false;

 

// Create LinearGradientBrush

LinearGradientBrush brush = new LinearGradientBrush();

brush.StartPoint = new Point(0.5, 1);

brush.EndPoint = new Point(0.5, 0);

            

// Initialize GradientStops collection

brush.GradientStops = new GradientStopCollection();

 

// Create GradientStops

GradientStop gs = new GradientStop();

gs.Color = Color.FromArgb(0xFF, 0xF2, 0x85, 0x00);

gs.Offset = 0;

brush.GradientStops.Add(gs);

 

gs = new GradientStop();

gs.Color = Color.FromArgb(0xDD, 0xDD, 0xCC, 0xCC);

gs.Offset = 0.5;

brush.GradientStops.Add(gs);

 

gs = new GradientStop();

gs.Color = Color.FromArgb(0x88, 0x22, 0x97, 0xCC);

gs.Offset = 1;

brush.GradientStops.Add(gs);

 

// Set LinearGradientBrush to DataSeries Color

dataSeries.Color = brush;

 

for (Int32 i = 0; i < 5; i++)

{

      // Create DataPoint object

      DataPoint dataPoint = new DataPoint();

 

      // Set DataPoint property

      dataPoint.YValue = rand.Next(10, 100);

 

      // Add DataPoint to DataPoints collection of DataSeries

      dataSeries.DataPoints.Add(dataPoint);

 }

 

 // Add DataSeries to Series collection of Chart

 chart.Series.Add(dataSeries);

 

Similarly you can create LinearGradientBrush and set it to any Color or Background property of any chart element.

 

RadialGradientBrush

 

Now we will create a RadialGradientBrush from managed code and set it to Color property of any Chart element.

 

Below is the code for creating RadialGradientBrush and setting it to DataSeries's Color property:

 

 

// Create Chart object

Chart chart = new Chart();

 

// Set Chart size

chart.Width = 500;

chart.Height = 300;

 

// Initialize new instance of Random class

Random rand = new Random();

 

// Create DataSeries object

DataSeries dataSeries = new DataSeries();

 

// Set DataSeries property

dataSeries.Bevel = false;

 

// Create RadialGradientBrush

RadialGradientBrush brush = new RadialGradientBrush();

brush.Center = new Point(0.5, 0.5);

brush.GradientOrigin = new Point(0.5, 1);

 

// Initialize GradientStops collection

brush.GradientStops = new GradientStopCollection();

 

// Create GradientStops

GradientStop gs = new GradientStop();

gs.Color = Color.FromArgb(0xFF, 0xF2, 0x85, 0x00);

gs.Offset = 0;

brush.GradientStops.Add(gs);

 

gs = new GradientStop();

gs.Color = Color.FromArgb(0xDD, 0xDD, 0xCC, 0xCC);

gs.Offset = 0.5;

brush.GradientStops.Add(gs);

 

gs = new GradientStop();

gs.Color = Color.FromArgb(0x88, 0x22, 0x97, 0xCC);

gs.Offset = 1;

brush.GradientStops.Add(gs);

 

// Set LinearGradientBrush to DataSeries Color

dataSeries.Color = brush;

 

for (Int32 i = 0; i < 5; i++)

{

       // Create DataPoint object

       DataPoint dataPoint = new DataPoint();

 

       // Set DataPoint property

       dataPoint.YValue = rand.Next(10, 100);

 

       // Add DataPoint to DataPoints collection of DataSeries

       dataSeries.DataPoints.Add(dataPoint);

}

 

// Add DataSeries to Series collection of Chart

chart.Series.Add(dataSeries);

 

Similarly you can create RadialGradientBrush and set it to any Color or Background property of any chart element.

 

The above example is shown using Silverlight, but you can do the same in WPF also.

 

Related Links:

  1. For more info about Brushes, please refer Brushes in Silverlight.