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.
.png)
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