Condividi tramite


Procedura: creare un effetto alone sul bordo esterno di un oggetto

Aggiornamento: novembre 2007

In questo argomento viene illustrato come creare un effetto alone sul bordo esterno di un oggetto.

Esempio

È possibile utilizzare la classe OuterGlowBitmapEffect per creare un effetto alone intorno a un oggetto visibile. In questo esempio viene illustrato come effettuare le operazioni seguenti:

  • Utilizzare un markup semplice per applicare l'effetto alone a un oggetto.

  • Utilizzare un oggetto Style per applicare l'effetto alone a uno o più oggetti.

  • Utilizzare un markup con code-behind per applicare l'effetto alone a un oggetto.

  • Utilizzare un'animazione per animare le proprietà di un effetto alone applicato a un oggetto.

Nota

In tutti gli esempi che seguono viene applicato un singolo effetto a un oggetto. Per applicare più effetti, utilizzare BitmapEffectGroup. Per ulteriori informazioni, vedere Procedura: creare più effetti visivi.

Nell'esempio seguente viene illustrato come utilizzare un oggetto OuterGlowBitmapEffect per creare un alone blu intorno al bordo esterno di un oggetto 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>

Nell'immagine seguente è illustrato l'effetto alone esterno creato nell'esempio precedente.

Schermata: effetto della bitmap OuterGlowBitmapEffect

Nell'esempio seguente viene illustrato come utilizzare la classe Style per applicare un oggetto OuterGlowBitmapEffect a qualsiasi oggetto TextBox nella pagina che riceve lo stato attivo.

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

Nell'esempio seguente viene illustrato come utilizzare un markup con code-behind per applicare un oggetto OuterGlowBitmapEffect a un oggetto TextBox. L'effetto alone viene visualizzato quando l'oggetto TextBox riceve lo stato attivo. In questo esempio è illustrato il 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>

Nell'esempio seguente viene illustrato il code-behind che gestisce l'evento per il markup precedente.

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;

        }

    }
}

Nell'esempio seguente viene illustrato come animare la proprietà GlowSize dell'oggetto OuterGlowBitmapEffect per animare l'alone verso l'esterno quando l'oggetto TextBox riceve lo stato attivo.

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

Per l'esempio completo, vedere Esempio di raccolta di effetti bitmap.

Vedere anche

Attività

Procedura: applicare un effetto di sfocatura a un oggetto Visual

Procedura: creare un effetto visivo di ombreggiatura

Procedura: creare più effetti visivi

Procedura: animare più effetti visivi

Esempio di raccolta di effetti bitmap

Concetti

Cenni preliminari sugli effetti bitmap

Altre risorse

Procedure relative agli effetti bitmap

Esempi di effetti bitmap