Foreground Property

Article
11/08/2007

Gets or sets the Brush to apply to the content in this element.

XAML	<object Foreground="Color" .../> -or- <object> <object.Foreground> <Brush" .../> </object.Foreground> </object>
Scripting	value = object.Foreground object.Foreground = 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.Foreground, 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 used to apply to the text contents.

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

Remarks

The Foreground property specifies a Brush for the rendered text. A Brush can represent a solid color, a linear or radial gradient, or an image.

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 Foreground, you must use indirect targeting. For instance, if you are animating the color of a SolidColorBrush that is the Foreground of a TextBlock, the syntax would be <ColorAnimation ... Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" />.

LineBreak is listed in the Applies To list for this property, because it does exist in the object model and you can get and set it. However, all LineBreak properties are ignored for rendering purposes.

Examples

The following XAML example shows how to set the Foreground property to a solid color and a linear gradient. Notice that the Foreground property can also be used in a Run in order to display a different color than Foreground property value of the TextBlock.

XAML
<!-- TextBlock with a single brush applied to the text. --> <TextBlock FontSize="32" FontWeight="Bold" Foreground="Maroon"> Maroon </TextBlock> <!-- TextBlock with three brushes applied to the text. --> <TextBlock Canvas.Top="60" FontFamily="Arial" FontSize="32" FontWeight="Bold" Foreground="Navy"> Navy <Run Text="DodgerBlue " Foreground="DodgerBlue"/> <Run Text="LightSteelBlue " Foreground="LightSteelBlue"/> </TextBlock> <!-- TextBlock with a linear gradient brush applied to the text. --> <TextBlock Canvas.Top="100" FontFamily="Verdana" FontSize="32" FontWeight="Bold"> LINEAR GRADIENT BRUSH <TextBlock.Foreground> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Red" Offset="0.0" /> <GradientStop Color="Orange" Offset="0.2" /> <GradientStop Color="Yellow" Offset="0.4" /> <GradientStop Color="Green" Offset="0.6" /> <GradientStop Color="Blue" Offset="0.8" /> <GradientStop Color="Violet" Offset="1.0" /> </LinearGradientBrush> </TextBlock.Foreground> <TextBlock.RenderTransform> <ScaleTransform ScaleY="3.0" /> </TextBlock.RenderTransform> </TextBlock>

<!-- TextBlock with a single brush applied to the text. -->
<TextBlock
  FontSize="32"
  FontWeight="Bold"
  Foreground="Maroon">
  Maroon
</TextBlock>
<!-- TextBlock with three brushes applied to the text. -->
<TextBlock
  Canvas.Top="60"
  FontFamily="Arial"
  FontSize="32"
  FontWeight="Bold"
  Foreground="Navy">
  Navy
  <Run Text="DodgerBlue " Foreground="DodgerBlue"/>
  <Run Text="LightSteelBlue " Foreground="LightSteelBlue"/>
</TextBlock>
<!-- TextBlock with a linear gradient brush applied to the text. -->
<TextBlock
  Canvas.Top="100"
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold">
  LINEAR GRADIENT BRUSH
  <TextBlock.Foreground>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Red" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.2" />
      <GradientStop Color="Yellow" Offset="0.4" />
      <GradientStop Color="Green" Offset="0.6" />
      <GradientStop Color="Blue" Offset="0.8" />
      <GradientStop Color="Violet" Offset="1.0" />
    </LinearGradientBrush>
  </TextBlock.Foreground>
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleY="3.0" />
  </TextBlock.RenderTransform>
</TextBlock>

The following illustration shows the rendered text from the previous XAML example.

TextBlocks rendering solid color and linear gradient brushes

TextBlocks rendering solid color and linear gradient brushes

Applies To

LineBreak, Run, TextBlock

Share via