Compartir a través de

Cómo: Crear un efecto visual con bisel

Actualización: noviembre 2007

BevelBitmapEffect se puede utilizar para crear un bisel interno que eleve la superficie de un objeto visible de acuerdo con una curva especificada (establecida por la propiedad EdgeProfile). A continuación figuran varios ejemplos que muestran lo siguiente:

  • Cómo utilizar el marcado simple para aplicar el efecto a un objeto

  • Cómo utilizar un estilo Style para aplicar el efecto a uno o más objetos

  • Cómo utilizar el código para aplicar el efecto a un objeto

  • Cómo utilizar una animación para animar las propiedades de un efecto aplicado a un objeto

Nota: en todos los ejemplos siguientes se aplica un solo efecto a un objeto. Para aplicar varios efectos, puede utilizar BitmapEffectGroup. Vea Cómo: Crear varios efectos visuales para obtener ejemplos.

Ejemplo

En el ejemplo siguiente se muestra cómo utilizar un efecto BevelBitmapEffect para crear un bisel dentro de un control 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>

En la ilustración siguiente se muestra el efecto creado en el ejemplo anterior.

Captura de pantalla: Botón biselado

En el ejemplo siguiente se muestra cómo utilizar un estilo Style para aplicar un efecto BevelBitmapEffect a cualquiera de los objetos Button de la página cuando el puntero del mouse se mueve sobre él. Además, cuando se presiona el botón, se aplica otro efecto BevelBitmapEffect con un valor de BevelWidth diferente, lo que hace que parezca que el botón se empuja hacia abajo.

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

En el ejemplo siguiente se muestra cómo utilizar el código para aplicar un efecto BevelBitmapEffect a un objeto Button cuando el puntero del mouse se mueve sobre él.

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

En el código siguiente se controla el evento del marcado 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;
        }

    }
}

En el ejemplo siguiente se muestra cómo animar las propiedades BevelWidth y LightAngle del efecto BevelBitmapEffect para que, cuando el puntero del mouse se mueva sobre el objeto Button, suba el nivel interior del bisel y la fuente de iluminación artificial utilizada para el bisel gire alrededor de 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>

Vea también

Tareas

Cómo: Aplicar un efecto de desenfoque a un objeto Visual

Cómo: Crear un efecto visual de sombra paralela

Cómo: Crear un efecto visual con relieves

Cómo: Crear varios efectos visuales

Cómo: Animar varios efectos visuales

Conceptos

Información general sobre efectos de mapa de bits

  • Last updated on