Procedura: creare un effetto visivo smussato
Aggiornamento: novembre 2007
L'oggetto BevelBitmapEffect può essere utilizzato per creare una smussatura interna che solleva la superficie di un oggetto visibile in base a una curva specificata (impostata dalla proprietà EdgeProfile). Di seguito viene elencata una serie di esempi che illustrano quanto indicato:
Come utilizzare un markup semplice per applicare l'effetto a un oggetto.
Come utilizzare un oggetto Style per applicare l'effetto a uno o più oggetti.
Come utilizzare il codice per applicare l'effetto a un oggetto.
Come utilizzare un'animazione per animare le proprietà di un effetto applicato a un oggetto.
Nota: in tutti gli esempi riportati di seguito viene applicato un singolo effetto a un oggetto. Per applicare più effetti, è possibile utilizzare BitmapEffectGroup. Per alcuni esempi, vedere Procedura: creare più effetti visivi.
Esempio
Nell'esempio riportato di seguito viene illustrato come utilizzare l'oggetto BevelBitmapEffect per creare una smussatura all'interno di 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>
Nella figura riportata di seguito viene illustrato l'effetto creato nell'esempio precedente.
.png)
Nell'esempio riportato di seguito viene illustrato come utilizzare un oggetto Style per applicare BevelBitmapEffect a qualsiasi oggetto Button della pagina quando il puntatore del mouse si sposta su quest'ultimo elemento. Inoltre, quando il pulsante viene premuto, un'altro oggetto BevelBitmapEffect viene applicato con un valore BevelWidth diverso che fa sì che il pulsante sembri premuto.
<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>
Nell'esempio riportato di seguito viene illustrato come utilizzare il codice per applicare un oggetto BevelBitmapEffect a Button quando il puntatore del mouse si sposta su quest'ultimo elemento.
<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>
Il codice riportato di seguito gestisce l'evento dal markup precedente.
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;
}
}
}
Nell'esempio riportato di seguito viene illustrato come animare le proprietà BevelWidth e LightAngle dell'oggetto BevelBitmapEffect. Di conseguenza, quando il puntatore del mouse viene spostato su Button, il livello interno della smussatura aumenta mentre la sorgente di luce artificiale utilizzata per la smussatura gira intorno a 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>
Vedere anche
Attività
Procedura: applicare un effetto di sfocatura a un oggetto Visual
Procedura: creare un effetto visivo di ombreggiatura
Procedura: creare un effetto visivo di rilievo
Procedura: creare più effetti visivi
Procedura: animare più effetti visivi