OuterBackground

Gets or Sets the background brush of outer Gauge element.

 

Type: Brush

Namespace: Visifire.Gauges

Assembly:

Silverlight:

SLVisifire.Gauges (in SLVisifire.Gauge.dll)

WPF:

WPFVisifire.Gauges (in WPFVisifire.Gauge.dll)

Windows Phone:

SLWpVisifire.Gauges (in SLWpVisifire.Gauges.dll)

Windows 8:

Win8Visifire.Gauges (in Win8Visifire.Gauges.dll)

 

This attribute applies to:

 

Syntax:

<vg:Gauge OuterBackground="LightBlue">

 

</vg:Gauge>

 

or

 

<vg:Gauge...>

<vg:Gauge.OuterBackground>

<SolidColorBrush Color="Blue"/>

</vg:Gauge.OuterBackground>

</vg:Gauge>

 

or

 

<vg:Gauge...>

<vg:Gauge.OuterBackground>

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

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

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

</LinearGradientBrush>

</vg:Gauge.OuterBackground>

</vg:Gauge>

 

Below is the gauge after setting OuterBackground property in Gauge.

 

OuterBackground.JPG

 

 

Setting Background from Javascript

 

You can set Background property from Javascript using 3 types of brushes:

 

1) SolidColorBrush

2) LinearGradientBrush

3) RadialGradientBrush

 

Example: SolidColorBrush

 

var brush = '<SolidColorBrush xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" Color="Red"/>';

 

// Set Background of a Gauge

gauge.SetPropertyFromJs("OuterBackground", brush);

 

Example: LinearGradientBrush

 

var brush = '<LinearGradientBrush xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" EndPoint="0.5,1" StartPoint="0.5,0">'

+'<GradientStop Color="#FF000000" Offset="0"/>'

+'<GradientStop Color="#FFFFFFFF" Offset="1"/>'

+'</LinearGradientBrush>';

    

 // Set Background of a Gauge

 gauge.SetPropertyFromJs("OuterBackground", brush);

 

Example: RadialGradientBrush

 

var brush = '<RadialGradientBrush xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\">'

+'<GradientStop Color="#FF000000" Offset="0"/>'

+'<GradientStop Color="#FFFFFFFF" Offset="1"/>'

+ '</RadialGradientBrush>';

    

 // Set Background of a Gauge

 gauge.SetPropertyFromJs("OuterBackground", brush);

 

For more info about setting properties from Javascript, Go to SetPropertyFromJs function.

 

See Also:

  1. Working with Gradients from Javascript.

  2. Working with Gradients from Managed Code

 

Remarks:

  1. Any Brush derived from the System.Windows.Media::Brush can be applied to this attribute.

  2. Background property cannot be null if set from XAML.

 

Related Links:

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