How to: Create a Glow Effect on the Outer Edge of an Object

This example shows how to create a glow effect on the outer edge of an object.

Example

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.

Note:
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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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.

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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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.

See Also

Tasks

How to: Apply a Blur Effect to a Visual
How to: Create a Drop Shadow Visual Effect
How to: Create Multiple Visual Effects
How to: Animate Multiple Visual Effects

Concepts

Bitmap Effects Overview

Other Resources

Bitmap Effects Gallery Sample
Bitmap Effects How-to Topics
Bitmap Effects Samples