Working with Gradients from XAML

In this topic, we are going to explain how to work with Gradients from XAML 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 XAML and set it to Color property of any Chart element. For information about creating Chart XAML, please refer to the topic Create Chart XAML from Data.

 

Below is the XAML for creating LinearGradientBrush and setting it to Chart's Background property:

 

 

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Theme="Theme2" Width="500" Height="300">

   <vc:Chart.Background>

      <LinearGradientBrush StartPoint="0, 0.5" EndPoint="0.5, 1">

           <GradientStop Color="AliceBlue" Offset="0.5"/>

           <GradientStop Color="AntiqueWhite" Offset="1"/>

      </LinearGradientBrush>

    </vc:Chart.Background>

 

    <vc:Chart.Titles>

       <vc:Title Text="Visifire Chart"/>

    </vc:Chart.Titles>

            

    <vc:Chart.Series>

       <vc:DataSeries RenderAs="Column">

          <vc:DataSeries.DataPoints>

             <vc:DataPoint XValue="1" YValue="10"/>

             <vc:DataPoint XValue="2" YValue="22"/>

             <vc:DataPoint XValue="3" YValue="20"/>

             <vc:DataPoint XValue="4" YValue="30"/>

             <vc:DataPoint XValue="5" YValue="8"/>

          </vc:DataSeries.DataPoints>

       </vc:DataSeries>

    </vc:Chart.Series>

</vc:Chart>

 

 

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 XAML and set it to Color property of any Chart element.

 

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

 

 

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Theme="Theme2" Width="500" Height="300">

            

   <vc:Chart.Titles>

      <vc:Title Text="Visifire Chart"/>

   </vc:Chart.Titles>

            

   <vc:Chart.Series>

      <vc:DataSeries RenderAs="Column">

         <vc:DataSeries.Color>

            <RadialGradientBrush Center="0.45, 0.5">

                 GradientStop Color="AliceBlue" Offset="0.5"/>

                 <GradientStop Color="AntiqueWhite" Offset="1"/>

            </RadialGradientBrush>

         </vc:DataSeries.Color>

         <vc:DataSeries.DataPoints>

            <vc:DataPoint XValue="1" YValue="10"/>

            <vc:DataPoint XValue="2" YValue="22"/>

            <vc:DataPoint XValue="3" YValue="20"/>

            <vc:DataPoint XValue="4" YValue="30"/>

            <vc:DataPoint XValue="5" YValue="8"/>

         </vc:DataSeries.DataPoints>

      </vc:DataSeries>

    </vc:Chart.Series>

</vc:Chart>

 

 

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

 

 

Setting Custom Colors to LinearGradientBrush

 

You can set custom colors in Hex format inside the LinearGradientBrush as shown below:

 

 

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Theme="Theme2" Width="500" Height="300">

 

   <vc:Chart.Background>

      <LinearGradientBrush StartPoint="0, 0.5" EndPoint="0.5, 1">

           <GradientStop Offset="0" Color="#FF81CBF9"/>

           <GradientStop Color="White" Offset="0.5"/>

           <GradientStop Offset="1" Color="#FF81CBF9"/>

      </LinearGradientBrush>

   </vc:Chart.Background>

 

   <vc:Chart.Titles>

      <vc:Title Text="Visifire Chart"/>

   </vc:Chart.Titles>

            

   <vc:Chart.Series>

      <vc:DataSeries RenderAs="Column">

         <vc:DataSeries.DataPoints>

            <vc:DataPoint XValue="1" YValue="10"/>

            <vc:DataPoint XValue="2" YValue="22"/>

            <vc:DataPoint XValue="3" YValue="20"/>

            <vc:DataPoint XValue="4" YValue="30"/>

            <vc:DataPoint XValue="5" YValue="8"/>

         </vc:DataSeries.DataPoints>

       </vc:DataSeries>

    </vc:Chart.Series>

</vc:Chart>

 

 

 

Setting Custom Colors to RadialGradientBrush

 

You can set custom colors in Hex format inside the RadialGradientBrush as shown below:

 

 

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Theme="Theme2" Width="500" Height="300">

 

   <vc:Chart.Background>

      <RadialGradientBrush Center="0.45, 0.5">

           <GradientStop Offset="0" Color="#FF81CBF9"/>

           <GradientStop Color="White" Offset="0.5"/>

           <GradientStop Offset="1" Color="#FF81CBF9"/>

      </RadialGradientBrush>

   </vc:Chart.Background>

 

   <vc:Chart.Titles>

      <vc:Title Text="Visifire Chart"/>

   </vc:Chart.Titles>

            

   <vc:Chart.Series>

      <vc:DataSeries RenderAs="Column">

         <vc:DataSeries.DataPoints>

            <vc:DataPoint XValue="1" YValue="10"/>

            <vc:DataPoint XValue="2" YValue="22"/>

            <vc:DataPoint XValue="3" YValue="20"/>

            <vc:DataPoint XValue="4" YValue="30"/>

            <vc:DataPoint XValue="5" YValue="8"/>

         </vc:DataSeries.DataPoints>

      </vc:DataSeries>

    </vc:Chart.Series>

</vc:Chart>

 

 

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.

  2. For information about setting custom colors, please refer Color Structure.