Cómo: Crear un efecto de resplandor en el margen externo de un objeto

Actualización: noviembre 2007

En este tema se explica cómo crear un efecto de resplandor en el borde exterior de un objeto.

Ejemplo

Puede utilizar la clase OuterGlowBitmapEffect para crear un efecto de resplandor alrededor de un objeto visible. En este ejemplo se muestra cómo realizar las acciones siguientes:

• Usar marcado simple para aplicar el efecto de resplandor a un objeto.

• Usar Style para aplicar el efecto de resplandor a uno o más objetos.

• Usar marcado con código subyacente para aplicar el efecto de resplandor a un objeto.

• Usar una animación para animar las propiedades de un efecto de resplandor que se aplica a un objeto.

En el ejemplo siguiente se muestra cómo utilizar OuterGlowBitmapEffect para crear un resplandor azul alrededor del borde exterior de 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>

La ilustración siguiente muestra el efecto de resplandor exterior creado en el ejemplo anterior.

En el ejemplo siguiente se muestra cómo utilizar la clase Style para aplicar OuterGlowBitmapEffect a cualquier TextBox de la página que recibe el foco.

<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>

En el ejemplo siguiente se muestra cómo utilizar marcado con código subyacente para aplicar OuterGlowBitmapEffect a TextBox. El efecto de resplandor aparece cuando TextBox recibe el foco. En este ejemplo se muestra el marcado.

<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>

En el ejemplo siguiente se muestra el código subyacente que controla el evento para el marcado anterior.

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;

        }

    }
}

En el ejemplo siguiente se muestra cómo animar la propiedad GlowSize de OuterGlowBitmapEffect para hacer que el resplandor se anime hacia fuera cuando TextBox recibe el foco.

<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>

Para obtener el ejemplo completo, vea Ejemplo Bitmap Effects Gallery.

Vea también

Tareas

Cómo: Aplicar un efecto de desenfoque a un objeto Visual

Cómo: Crear un efecto visual de sombra paralela

Cómo: Crear varios efectos visuales

Cómo: Animar varios efectos visuales

Ejemplo Bitmap Effects Gallery

Conceptos

Información general sobre efectos de mapa de bits

Otros recursos

Temas "Cómo..." de efectos de mapa de bits

Ejemplos de efectos de mapa de bits