Gewusst wie: Erstellen eines Leuchteffekts am äußeren Rand eines Objekts
Aktualisiert: November 2007
In diesem Thema wird erläutert, wie ein Leuchteffekt am äußeren Rand eines Objekts erstellt wird.
Beispiel
Mit der OuterGlowBitmapEffect-Klasse können Sie einen Leuchteffekt um ein sichtbares Objekt erstellen. In diesem Beispiel wird gezeigt, wie Sie folgende Aktionen ausführen können:
Verwenden einfachen Markups, um den Leuchteffekt auf ein Objekt anzuwenden.
Verwenden von Style, um den Leuchteffekt auf ein oder mehrere Objekte anzuwenden.
Verwenden von Markup mit Code-Behind, um den Leuchteffekt auf ein Objekt anzuwenden.
Verwenden einer Animation, um die Eigenschaften eines Leuchteffekts zu animieren, der auf ein Objekt angewendet wird.
Tipp
In allen folgenden Beispielen wird nur ein einzelner Effekt auf ein Objekt angewendet. Verwenden Sie BitmapEffectGroup, um mehrere Effekte anzuwenden. Weitere Informationen finden Sie unter Gewusst wie: Erstellen mehrerer visueller Effekte.
Im folgenden Beispiel wird gezeigt, wie mithilfe von OuterGlowBitmapEffect ein blaues Leuchten um den äußeren Rand eines TextBox-Objekts erstellt wird.
<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>
In der folgenden Abbildung ist der im vorherigen Beispiel erstellte äußere Leuchteffekt dargestellt.
.png)
Im folgenden Beispiel wird gezeigt, wie die Style-Klasse verwendet wird, um einen OuterGlowBitmapEffect auf jedes TextBox-Objekt auf der Seite anzuwenden, das den Fokus erhält.
<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>
Im folgenden Beispiel wird gezeigt, wie mithilfe von Markup mit Code-Behind ein OuterGlowBitmapEffect auf ein TextBox-Objekt angewendet wird. Der Leuchteffekt wird angezeigt, wenn das TextBox-Objekt den Fokus erhält. In diesem Beispiel wird das Markup dargestellt.
<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>
Im folgenden Beispiel wird der Code-Behind gezeigt, der das Ereignis für das vorherige Markup behandelt.
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;
}
}
}
Im folgenden Beispiel wird gezeigt, wie die GlowSize-Eigenschaft des OuterGlowBitmapEffect animiert wird, um das Leuchten nach außen zu animieren, wenn das TextBox-Objekt den Fokus erhält.
<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>
Das vollständige Beispiel finden Sie unter Beispiel für den Katalog mit Bitmapeffekten.
Siehe auch
Aufgaben
Gewusst wie: Anwenden eines Weichzeichnereffekts auf grafische Elemente
Gewusst wie: Erstellen eines visuellen Schlagschatteneffekts
Gewusst wie: Erstellen mehrerer visueller Effekte
Gewusst wie: Animieren mehrerer visueller Effekte
Beispiel für den Katalog mit Bitmapeffekten