Comment : créer un effet de lumière sur le bord extérieur d'un objet
Mise à jour : novembre 2007
Cette rubrique explique comment créer un effet de lumière sur le bord extérieur d'un objet.
Exemple
Vous pouvez utiliser la classe OuterGlowBitmapEffect pour créer un effet de lumière autour d'un objet visible. Cet exemple montre comment effectuer les opérations suivantes :
Utiliser un balisage simple pour appliquer l'effet de lumière à un objet.
Utiliser un Style pour appliquer l'effet de lumière à un ou plusieurs objets.
Utiliser un balisage avec code-behind pour appliquer l'effet de lumière à un objet.
Utiliser une animation pour animer les propriétés d'un effet de lumière appliqué à un objet.
.gif "Remarque") Remarque : |
|---|
Tous les exemples qui suivent n'appliquent qu'un seul effet à un objet. Pour appliquer plusieurs effets, utilisez BitmapEffectGroup. Pour plus d'informations, consultez Comment : créer plusieurs effets visuels. |
L'exemple suivant indique comment utiliser un OuterGlowBitmapEffect pour créer une lumière bleue autour du bord extérieur d'un 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>
L'illustration suivante montre l'effet de lumière extérieur créé par l'exemple précédent.
.png)
L'exemple suivant indique comment utiliser la classe Style pour appliquer un OuterGlowBitmapEffect à n'importe quel TextBox de la page qui reçoit le 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>
L'exemple suivant indique comment utiliser un balisage avec code-behind pour appliquer un OuterGlowBitmapEffect à un TextBox. L'effet de lumière apparaît lorsque le TextBox reçoit le focus. Cet exemple montre le balisage.
<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>
L'exemple suivant montre le code-behind qui gère l'événement pour le balisage précédent.
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;
}
}
}
L'exemple suivant indique comment animer la propriété GlowSize du OuterGlowBitmapEffect pour que la lumière s'anime vers l'extérieur lorsque le TextBox reçoit le 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>
Pour l'exemple complet, consultez Galerie d'effets bitmap, exemple.
Voir aussi
Tâches
Comment : appliquer un effet flou à un Visual
Comment : créer un effet visuel d'ombre portée
Comment : créer plusieurs effets visuels
Comment : animer plusieurs effets visuels
Galerie d'effets bitmap, exemple
Concepts
Vue d'ensemble des effets bitmap