Como: Criar um efeito visual de chanfro
O BevelBitmapEffect pode ser usado para criar um chanfro interno que aumenta a superfície de um objeto visível de acordo com uma curva especificada (definida pela propriedade EdgeProfile). Abaixo encontra-se uma série de exemplos que mostram o seguinte:
Como usar marcação simples para aplicar o efeito sobre um objeto.
Como usar um Style para aplicar o efeito a um ou mais objetos.
Como usar código para aplicar o efeito sobre um objeto.
Como usar uma animação para animar as propriedades de um efeito aplicado sobre um objeto.
Observação: Todos os exemplos a seguir se aplicam apenas um único efeito a um objeto. Para aplicar vários efeitos, você pode usar BitmapEffectGroup. Consulte Como: Criar vários efeitos visuais para obter exemplos.
Exemplo
O exemplo a seguir mostra como usar um BevelBitmapEffect para criar um chanfro dentro de um Button.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Button Width="200" Height="80" Margin="50">
Bevelled 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 BevelBitmapEffect has several important properties that
determine characteristics of the bevel effect:
- BevelWidth: Specifies how wide the bevel is (size of the bevel). In this
example, the bevel is fairly wide at 15 (default is 5).
- EdgeProfile: Specifies the curve of the bevel. The default is "Linear".
- LightAngle: Specifies in what direction the "virtual light" is coming from
that create the shadows of the bevel. It is an angle between 0 and 360 with 0
starting on the right hand side and moving counter-clockwise around the object.
The shadows of the bevel are on the opposite side of where the light is cast.
The value of 320 in this example casts the light on the lower right hand side
of the bevel and shadow on the upper left.
- Relief: Specifies the height of the relief of the bevel. Range is between 0 and 1
with 1 having the most relief (darkest shadows). The default is 0.3.
- Smoothness: Specifies how smooth the shadows are. The range is between 0 and 1
with 1 being the softest. Default is 0.5. -->
<BevelBitmapEffect BevelWidth="15" EdgeProfile="CurvedIn" LightAngle="320" Relief="0.4"
Smoothness="0.4" />
</Button.BitmapEffect>
</Button>
</StackPanel>
</Page>
A ilustração a seguir mostra o efeito criado no exemplo anterior.
.png "Captura de tela: Bevelled Zoom, Para Cima e Ampliar")
O exemplo a seguir mostra como usar um Style para aplicar um BevelBitmapEffect a qualquer Button na página quando o ponteiro do mouse se move sobre ele. Além disso, quando o botão é pressionado, outro BevelBitmapEffect é aplicado com um valor BevelWidth diferente que faz o botão parecer ter sido clicado.
<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 mouse pointer moves over the button, apply a bevel
with a wide BevelWidth. -->
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BitmapEffect" >
<Setter.Value>
<BevelBitmapEffect BevelWidth="15" />
</Setter.Value>
</Setter>
</Trigger>
<!-- When the mouse pointer is pressed, apply a bevel with a
narrower BevelWidth to make the button appear to get pressed. -->
<Trigger Property="IsPressed" Value="true">
<Setter Property="BitmapEffect" >
<Setter.Value>
<BevelBitmapEffect BevelWidth="5" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<StackPanel>
<!-- The Style defined above applies to this Button which makes
the Button become beveled while it is pressed. -->
<Button Width="200" Height="80" Margin="50">Press to Bevel</Button>
</StackPanel>
</Page>
O exemplo a seguir mostra como usar código para aplicar um BevelBitmapEffect a um Button quando o ponteiro do mouse se move sobre ele.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.BevelExample" >
<StackPanel>
<Button MouseEnter="OnMouseOverBevelButton" Width="200" Height="80" Margin="50">
MouseOver to Bevel!
</Button>
</StackPanel>
</Page>
O código a seguir trata o evento da marcação anterior.
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 BevelExample : Page
{
// Add Bevel effect.
void OnMouseOverBevelButton(object sender, RoutedEventArgs args)
{
// Get a reference to the Button.
Button myButton = (Button)sender;
// Initialize a new BevelBitmapEffect that will be applied
// to the Button.
BevelBitmapEffect myBevelEffect = new BevelBitmapEffect();
// Set the BevelWidth. The default for BevelWidth is 5.
myBevelEffect.BevelWidth = 15;
// Set the EdgeProfile. The default value is Linear.
myBevelEffect.EdgeProfile = EdgeProfile.CurvedIn;
// Set the LightAngle (direction where light is coming from) to 320 degrees.
myBevelEffect.LightAngle = 320;
// Set the Relief to an intermediate value of 0.5. Relief specifies the relief
// between light and shadow for the bevel. The default value is 0.3.
myBevelEffect.Relief = 0.4;
// Set the Smoothness. The default value is 0.5. This example sets
// the property to the maximum value which is 1.
myBevelEffect.Smoothness = 0.4;
// Apply the bitmap effect to the Button.
myButton.BitmapEffect = myBevelEffect;
}
}
}
O exemplo a seguir mostra como animar as propriedades BevelWidth e LightAngle de BevelBitmapEffect de modo que quando o ponteiro do mouse move-se sobre o Button, o nível interno do chanfro aumenta enquanto a fonte de luz artificial usada para o chanfro gira em torno do Button.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel>
<Button Width="200" Height="80" Margin="50">
MouseOver ME!
<Button.BitmapEffect>
<!-- This BitmapEffect is targeted by the animation. -->
<BevelBitmapEffect x:Name="myBevelBitmapEffect" BevelWidth="0" EdgeProfile="CurvedIn" />
</Button.BitmapEffect>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<!-- Animate the BevelWidth from 0 to 15. -->
<DoubleAnimation
Storyboard.TargetName="myBevelBitmapEffect"
Storyboard.TargetProperty="BevelWidth"
From="0" To="15" Duration="0:0:0.5" AutoReverse="True"
/>
<!-- Animate the LightAngle so that the light source and
corresponding bevel shadows move around the button. -->
<DoubleAnimation
Storyboard.TargetName="myBevelBitmapEffect"
Storyboard.TargetProperty="LightAngle"
From="360" To="0" Duration="0:0:0.5" AutoReverse="True"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
Consulte também
Tarefas
Como: Apply a Blur Effect to a Visual
Como: Create a Drop Shadow Visual Effect
Como: Criar um efeito visual embaralhado
Como: Criar vários efeitos visuais
Como: Animate Multiple Visual Effects