Background Property (Canvas)

Article
11/08/2007

Gets or sets the Brush that describes the background of the object.

XAML	<object Background="Color" .../> -or- <object> <object.Background> <Brush .../> </object.Background> </object>
Scripting	value = object.Background object.Background = value

XAML Values

Color	The Color for a SolidColorBrush expressed as an attribute string. See Color.
Brush	Within opening and closing property elements for object.Background, exactly one object element for an object that derives from Brush. The object element can be one of the following: LinearGradientBrush, RadialGradientBrush, ImageBrush, SolidColorBrush, VideoBrush.

Property Value

Brush

The brush that is used to fill the background of the object. If either the object's Height or Width property values are equal to 0, the Background property value is ignored.

This property is read/write. The default value is null.

Remarks

The Background property of the Silverlight plug-in determines the background color of the client area underneath your Silverlight content, whereas this Background property determines the background color of a Canvas.

The Background property specifies a Brush for the object. A Brush can represent a solid color, a linear or radial gradient, an image, or an applied video brush.

Some brush types (SolidColorBrush) support a XAML attribute syntax, whereas other brush types (ImageBrush, LinearGradientBrush, RadialGradientBrush) only support an object element syntax. This is why two versions of XAML syntax are shown for this property.

When animating a Background, you generally use indirect targeting. For instance, if you are animating the color of a SolidColorBrush that is the Background of a Canvas, the syntax would be <ColorAnimation ... Storyboard.TargetProperty="(Canvas.Background).(SolidColorBrush.Color)" />. You could also use the less common approach of using explicit property element / object element syntax (for instance, declaring SolidColorBrush as an object element) until you reach specific properties that take a Color value.

InkPresenter is a derived class of Canvas and inherits its Background property. The Background for an InkPresenter is applied behind any strokes that are presented on the surface.

For purposes of rendering, the null default value for Background evaluates as a transparent brush.

Examples

The following XAML example shows how to define a LinearGradientBrush object that is used as the Background property value for the Canvas object:

XAML
<Canvas xmlns="https://schemas.microsoft.com/client/2007" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="80" > <!-- Define a LinearGradientBrush for the Canvas Background property. --> <Canvas.Background> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="0.5" /> <GradientStop Color="Red" Offset="1.0" /> </LinearGradientBrush> </Canvas.Background> </Canvas>

<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="80"
  >
  <!-- Define a LinearGradientBrush for the Canvas Background property. -->
  <Canvas.Background>
    <LinearGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </LinearGradientBrush>
  </Canvas.Background>
</Canvas>

The following illustration shows the rendered output of the previous example, which uses a LinearGradientBrush object as the Background.

Canvas object rendered with a LinearGradientBrush

Canvas object rendered with a LinearGradientBrush

Applies To

Canvas, InkPresenter

Share via