OuterGlowBitmapEffect Class
Assembly: PresentationCore (in presentationcore.dll)
XML Namespace: http://schemas.microsoft.com/winfx/2006/xaml/presentation
Note: |
|---|
| 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).
The following illustrations show the effect of several basic properties of OuterGlowBitmapEffect.
-
The GlowSize property specifies the size of the halo glow:
-
The Noise property specifies the level of noise in the glow:
-
The Opacity property specifies how transparent the glow is:
This example shows 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.
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="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.
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 example shows 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. |
- UIPermission for creating an instance of the OuterGlowBitmapEffect class. Associated enumerations: UIPermissionWindow.AllWindows
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Freezable
System.Windows.Media.Animation.Animatable
System.Windows.Media.Effects.BitmapEffect
System.Windows.Media.Effects.OuterGlowBitmapEffect
Windows 98, Windows Server 2000 SP4, Windows CE, Windows Millennium Edition, Windows Mobile for Pocket PC, Windows Mobile for Smartphone, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition
The Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.
Note: