Практическое руководство. Создание визуального эффекта тени
Обновлен: Ноябрь 2007
DropShadowBitmapEffect может использоваться для создания тени позади видимого объекта. Ниже приведены некоторые примеры, демонстрирующие следующее:
Способы использования простой разметки для применения эффекта к объекту
Способы использования класса Style для применения эффекта к одному или нескольким объектам.
Способы использования кода для применения эффекта к объекту.
Способы использования анимации для анимирования свойств эффекта, применяемого к объекту.
Примечание. В приведенных ниже примерах к объекту применяется только один эффект. Чтобы применить несколько эффектов, можно использовать BitmapEffectGroup. Примеры см. в разделе Практическое руководство. Создание нескольких визуальных эффектов.
Пример
В следующем примере показано использование DropShadowBitmapEffect для создания внешнего вида тени позади Button.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Button Margin="50" Width="200">DropShadow Under this Button
<Button.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 DropShadowBitmapEffect has several important properties that
determine characteristics of the drop shadow:
- Color: Specifies the color of the drop shadow (in this example black).
- ShadowDepth: Specifies how far displaced the shadow is from the object
casting the shadow. Default is 20.
- Direction: Specifies in what direction the shadow is cast from the object.
It is an angle between 0 and 360 with 0 starting on the right hand side
and moving counter-clockwise around the object. The value of 320 in this
example casts the shadow on the lower right hand side of the button.
- Noise: Specifies how grainy the drop-shadow is. Range is between 0 and 1.
Default is 0.
- Softness: Specifies how soft the shadow. The range is between 0 and 1 with 1
being the softest. Default is 0.5.
- Opacity: Specifies how transparent the shadow is. The range is between 0
and 1 with 1 being fully opaque and 0 fully transparent (not visible). The
default is 1. -->
<DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="25" Softness="1"
Opacity="0.5"/>
</Button.BitmapEffect>
</Button>
</StackPanel>
</Page>
Ниже показан результат предыдущего примера.
.png "Снимок экрана: DropShadowBitmapEffect")
В следующем примере показано использование Style для применения DropShadowBitmapEffect к любой нажатой Button на странице.
<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 Button on the page. -->
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<!-- When the Button is pressed, apply the drop shadow. -->
<Trigger Property="IsPressed" Value="true">
<Setter Property = "BitmapEffect" >
<Setter.Value>
<DropShadowBitmapEffect Color="Black" Direction="320"
ShadowDepth="25" Softness="1" Opacity="0.5"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<StackPanel>
<!-- The Style defined above applies to this Button which creates
a drop shadow when the button is pressed down. -->
<Button Width="200" >Press Me!</Button>
</StackPanel>
</Page>
В следующем примере показано использование кода для применения DropShadowBitmapEffect к Button при ее нажатии.
Ниже приведен Язык XAML (Extensible Application Markup Language) для примера.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.DropShadowExample" >
<StackPanel>
<Button Click="OnClickDropShadowButton" Margin="50" Width="200">
Click to Create Drop Shadow!</Button>
</StackPanel>
</Page>
Следующий пример кода обрабатывает событие для разметки примера.
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 DropShadowExample : Page
{
// Add Blur effect.
void OnClickDropShadowButton(object sender, RoutedEventArgs args)
{
// Get a reference to the Button.
Button myButton = (Button)sender;
// Initialize a new DropShadowBitmapEffect that will be applied
// to the Button.
DropShadowBitmapEffect myDropShadowEffect = new DropShadowBitmapEffect();
// Set the color of the shadow to Black.
Color myShadowColor = new Color();
myShadowColor.ScA = 1; // Note that the alpha value is ignored by Color property. The Opacity property is used to control the alpha.
myShadowColor.ScB = 0;
myShadowColor.ScG = 0;
myShadowColor.ScR = 0;
myDropShadowEffect.Color = myShadowColor;
// Set the direction of where the shadow is cast to 320 degrees.
myDropShadowEffect.Direction = 320;
// Set the depth of the shadow being cast.
myDropShadowEffect.ShadowDepth = 25;
// Set the shadow softness to the maximum (range of 0-1).
myDropShadowEffect.Softness = 1;
// Set the shadow opacity to half opaque or in other words - half transparent.
// The range is 0-1.
myDropShadowEffect.Opacity = 0.5;
// Apply the bitmap effect to the Button.
myButton.BitmapEffect = myDropShadowEffect;
}
}
}
В следующем примере показано, как анимировать свойства ShadowDepth и Softness объекта DropShadowBitmapEffect, чтобы заставить его отображаться как объект Button, который выходит из области экрана после нажатия на него.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel>
<Button Margin="50" Width="200" Name="myButton">
Click Me to Animate Drop Shadow!
<Button.BitmapEffect>
<!-- This BitmapEffect is targeted by the animation. -->
<DropShadowBitmapEffect x:Name="myDropShadowBitmapEffect" Color="Black"
ShadowDepth="0" />
</Button.BitmapEffect>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- Animate the movement of the button. -->
<ThicknessAnimation
Storyboard.TargetProperty="Margin" Duration="0:0:0.5"
From="50,50,50,50" To="0,0,50,50" AutoReverse="True" />
<!-- Animate shadow depth of the effect. -->
<DoubleAnimation
Storyboard.TargetName="myDropShadowBitmapEffect"
Storyboard.TargetProperty="ShadowDepth"
From="0" To="30" Duration="0:0:0.5"
AutoReverse="True" />
<!-- Animate shadow softness of the effect. As
the Button appears to get farther from the shadow,
the shadow gets softer. -->
<DoubleAnimation
Storyboard.TargetName="myDropShadowBitmapEffect"
Storyboard.TargetProperty="Softness"
From="0" To="1" Duration="0:0:0.5"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
См. также
Задачи
Практическое руководство. Создание эффекта свечения Glow на внешнем крае объекта
Практическое руководство. Применение эффекта размытия
Практическое руководство. Создание нескольких визуальных эффектов
Практическое руководство. Анимация нескольких визуальных эффектов