Export (0) Print
Expand All

OuterGlowBitmapEffect Class

Creates a halo of color around objects or areas of color.

Namespace:  System.Windows.Media.Effects
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation

public sealed class OuterGlowBitmapEffect : BitmapEffect
<OuterGlowBitmapEffect .../>

NoteNote:

WPF bitmap effects are software rendered. Any object that applies an effect will also be rendered in software. Bitmap effects should not be applied to large visuals or animations because this can degrade performance.

OuterGlowBitmapEffect is one of several effects that are shipped with the Windows SDK. Other effects include:

The following illustration shows an OuterGlowBitmapEffect applied to a visual object (in this case applied to a TextBox).

Screenshot: OuterGlowBitmapEffect bitmap effect

The following illustrations show the effect of several basic properties of OuterGlowBitmapEffect.

  • The GlowSize property specifies the size of the halo glow:

Screenshot: OuterGlowBitmapEffect bitmap effect
  • The Noise property specifies the level of noise in the glow:

Screenshot: Compare Noise property values
  • The Opacity property specifies how transparent the glow is:

Screenshot: Compare glow opacity property values

This topic explains how to create a glow effect on the outer edge of an object.

You can use the OuterGlowBitmapEffect class to create a glow effect around a visible object. This example shows how to do the following:

  • Use simple markup to apply the glow effect to an object.

  • Use a Style to apply the glow effect to one or more objects.

  • Use markup with code-behind to apply the glow effect to an object.

  • Use an animation to animate the properties of a glow effect that is applied to an object.

NoteNote:

All the examples that follow only apply a single effect to an object. To apply multiple effects, use BitmapEffectGroup. For more information, see How to: Create Multiple Visual Effects.

The following example shows how to use an OuterGlowBitmapEffect to create a blue glow around the outer edge of a TextBox.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel>

    <TextBox Width="200">
      <TextBox.BitmapEffect>

        <!-- <BitmapEffectGroup> would go here if you wanted to apply more 
             then one effect to the TextBox. However, in this example only  
             one effect is being applied so BitmapEffectGroup does not need  
             to be included. -->

        <!-- The OuterGlow is blue, extends out 30 pixels, has the 
             maximum noise possible, and is 40% Opaque. -->
        <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="30" Noise="1"
         Opacity="0.4" />

      </TextBox.BitmapEffect>
    </TextBox>

  </StackPanel>

</Page>

The following illustration shows the outer glow effect that is created by the previous example.

Screenshot: OuterGlowBitmapEffect bitmap effect

The following example shows how to use the Style class to apply an OuterGlowBitmapEffect to any TextBox on the page that receives focus.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!-- Resources define Styles for the entire page. -->
  <Page.Resources>

    <!-- This style applies to any TextBox on the page. -->
    <Style TargetType="{x:Type TextBox}">
      <Style.Triggers>

        <!-- When the TextBox gains focus such as when the cursor appears
             in the TextBox, apply the OuterGlowBitmapEffect to the TextBox. -->
        <Trigger Property="IsFocused" Value="True">
          <Setter Property = "BitmapEffect" >
            <Setter.Value>

              <!-- The OuterGlow is blue, extends out 30 pixels, has the 
                   maximum noise possible, and is 40% Opaque. -->
              <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="30" Noise="1"
               Opacity="0.4" />
            </Setter.Value>
          </Setter>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>



  <StackPanel>

    <!-- The Style defined above applies to this TextBox which creates
         an outer glow around the it. -->
    <TextBox Name="textBox1"  Width="200" />

  </StackPanel>

</Page>

The following example shows how to use markup with code-behind to apply an OuterGlowBitmapEffect to a TextBox. The glow effect appears when the TextBox receives focus. This example shows the markup.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.OuterGlowExample" >

  <StackPanel>

    <!-- When this TextBox gains focus, a blue glow surrounds it. -->
    <TextBox Width="200" GotFocus="OnFocusCreateGlow"></TextBox>

  </StackPanel>

</Page>

The following example shows the code-behind that handles the event for the previous markup.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Input;
using System.Windows.Media.Effects;

namespace SDKSample
{

	public partial class OuterGlowExample : Page
	{

        // Add OuterGlow effect.
        void OnFocusCreateGlow(object sender, RoutedEventArgs args)
        {

            // Get a reference to the TextBox.
            TextBox myTextBox = (TextBox)sender;

            // Initialize a new OuterGlowBitmapEffect that will be applied
            // to the TextBox.
            OuterGlowBitmapEffect myGlowEffect = new OuterGlowBitmapEffect();

            // Set the size of the glow to 30 pixels.
            myGlowEffect.GlowSize = 30;

            // Set the color of the glow to blue.
            Color myGlowColor = new Color();
            myGlowColor.ScA = 1;
            myGlowColor.ScB = 1;
            myGlowColor.ScG = 0;
            myGlowColor.ScR = 0;
            myGlowEffect.GlowColor = myGlowColor;

            // Set the noise of the effect to the maximum possible (range 0-1).
            myGlowEffect.Noise = 1;

            // Set the Opacity of the effect to 40%. Note that the same effect
            // could be done by setting the ScA property of the Color to 0.4.
            myGlowEffect.Opacity = 0.4;

            // Apply the bitmap effect to the TextBox.
            myTextBox.BitmapEffect = myGlowEffect;

        }

    }
}

The following example shows how to animate the GlowSize property of the OuterGlowBitmapEffect to make the glow animate outward when the TextBox receives focus.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

  <StackPanel>


    <TextBox Width="200">
      <TextBox.BitmapEffect>

        <!-- This BitmapEffect is targeted by the animation. -->
        <OuterGlowBitmapEffect x:Name="myOuterGlowBitmapEffect"  
         GlowColor="Blue" GlowSize="0" />

      </TextBox.BitmapEffect>
      <TextBox.Triggers>
        <EventTrigger RoutedEvent="TextBox.GotFocus">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the GlowSize from 0 to 40 over half a second. --> 
              <DoubleAnimation
                Storyboard.TargetName="myOuterGlowBitmapEffect"
                Storyboard.TargetProperty="GlowSize"
                From="0" To="40" Duration="0:0:0.5" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </TextBox.Triggers>
    </TextBox>

  </StackPanel>

</Page>

For the complete sample, see Bitmap Effects Gallery Sample.

More Code

How to: Animate a Glow Effect This topic describes how to animate the GlowSize property of an OuterGlowBitmapEffect.
How to: Create Multiple Visual Effects Multiple visual effects can be applied to a single visible object using the BitmapEffectGroup. The following example shows how to apply a BlurBitmapEffect and a DropShadowBitmapEffect to create a blurry button with a shadow behind it.
How to: Animate Multiple Visual Effects The following example shows how to animate the ShadowDepth and Softness properties of a DropShadowBitmapEffect and the Radius property of a BlurBitmapEffect to create the illusion of a button rising up from the screen.

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003

The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

.NET Framework

Supported in: 3.5, 3.0

Community Additions

ADD
Show:
© 2014 Microsoft