如何：创建斜切可视化效果
更新：2007 年 11 月
BevelBitmapEffect 可用于创建内部凹凸效果，该效果可根据特定曲线（由 EdgeProfile 属性设置）抬高可视对象的表面。下面是关于以下主题的一系列示例：
如何使用简单的标记将效果应用于对象
如何使用 Style 将效果应用于一个或多个对象
如何使用代码将效果应用于对象
如何使用动画对应用于对象的效果的属性进行动画处理
**注意：**下面的所有示例都只将单一效果应用于对象。若要应用多个效果，请使用 BitmapEffectGroup。请参见如何：创建多个可视化效果中的示例。
示例
下面的示例演示如何使用 BevelBitmapEffect 在 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>
下面的插图演示了上一示例中创建的效果。
.png)
下面的示例演示如何使用 Style 向页面上的任何 Button 应用 BevelBitmapEffect，这些效果将在鼠标指针移动到该元素上时产生。此外，在按下按钮时，将向该按钮应用另一个 BevelBitmapEffect，该效果具有不同的 BevelWidth 值，使得该按钮看上去就像被按下一样。
<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>
下面的示例演示如何使用代码向 Button 应用 BevelBitmapEffect，这些效果将在当鼠标指针移动到该元素上时产生。
<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>
以下代码可处理前面标记中的事件。
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;
}
}
}
下面的示例演示如何对 BevelBitmapEffect 的 BevelWidth 和 LightAngle 属性进行动画处理，以便在鼠标指针移动到 Button 之上时，凹凸的程度将加深，同时用于凹凸效果的人造光源将围绕着 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>