Export (0) Print
Expand All

BevelBitmapEffect Class

Creates a bevel which raises the surface of the image according to a specified curve.

Namespace:  System.Windows.Media.Effects
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation

public sealed class BevelBitmapEffect : BitmapEffect
<BevelBitmapEffect .../>

NoteNote:

WPF bitmap effects are software rendered. Any object that applies an effect will also be rendered in software. Bitmap effects should not be applied to large visuals or animations as this can degrade performance.

The type of bevel (bevel curve) is determined by the EdgeProfile property.

BevelBitmapEffect is one of several effects that are shipped with the SDK. Other effects include:

The following illustration shows a BevelBitmapEffect applied to a visual object (in this case applied to a Button).

Screenshot: Compare normal and bevelled buttons

The following illustrations show the effect of several basic properties of BevelBitmapEffect.

The BevelWidth property specifies how wide the bevel is:

Screenshot: Compare BevelWidth values

The EdgeProfile property specifies the curve of the bevel:

Screenshot: Compare values of EdgeProfile

The Relief property specifies the relief of the bevel:

Screenshot: Compare relief properties

The Smoothness property specifies how smooth the shadows of the bevel are:

Screenshot: Compare Smoothness property values

The LightAngle property specifies from which direction the "virtual light" is coming from that creates the shadows of the bevel:

Screenshot: Compare light angles

The BevelBitmapEffect can be used to create an inner bevel which raises the surface of a visible object according to a specified curve (set by the EdgeProfile property). Below are a series of examples that show the following:

  • How to use simple markup to apply the effect to an object

  • How to use a Style to apply the effect to one or more objects

  • How to use code to apply the effect to an object

  • How to use an animation to animate the properties of an effect applied to an object

Note: All of the examples below apply only a single effect to an object. To apply multiple effects, you can use BitmapEffectGroup. See How to: Create Multiple Visual Effects for examples.

The following example shows how to use a BevelBitmapEffect to create a bevel inside of a Button.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

The following illustration shows the effect created in the previous example.

Screenshot: Bevelled button

The following example shows how to use a Style to apply a BevelBitmapEffect to any Button on the page when the mouse pointer moves over it. In addition, when the button is pressed, another BevelBitmapEffect is applied with a different BevelWidth value which makes the button look like it is being pushed down.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

The following example shows how to use code to apply a BevelBitmapEffect to a Button when the mouse pointer moves over it.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

The following code handles the event from the preceding markup.

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;
        }

    }
}

The following example shows how to animate the BevelWidth and LightAngle properties of the BevelBitmapEffect so that when the mouse pointer moves over the Button, the inner level of the bevel increases while the artificial light source used for the bevel revolves around the Button.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

More Code

How to: Animate a Beveled Visual Effect This example shows how to animate a BevelBitmapEffect on a button.
How to: Create Multiple Visual Effects Multiple visual effects can be applied to a single visible object using the BitmapEffectGroup. The following example shows how to apply a BlurBitmapEffect and a DropShadowBitmapEffect to create a blurry button with a shadow behind it.
How to: Animate Multiple Visual Effects The following example shows how to animate the ShadowDepth and Softness properties of a DropShadowBitmapEffect and the Radius property of a BlurBitmapEffect to create the illusion of a button rising up from the screen.

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003

The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

.NET Framework

Supported in: 3.5, 3.0

Community Additions

ADD
Show:
© 2014 Microsoft