共用方式為


HOW TO:建立下拉式陰影視覺效果

更新:2007 年 11 月

DropShadowBitmapEffect 可以用來建立看起來像是可見物件後方的陰影。下列一系列範例可顯示下列作業:

  • 如何使用簡單的標記將效果套用到物件

  • 如何使用 Style 將效果套用到一個或多個物件

  • 如何使用程式碼將效果套用到物件

  • 如何使用動畫,將套用到物件之效果的屬性顯示為動畫

**注意:**下面所有的範例都只將單一效果套用到物件。若要套用多種效果,您可以使用 BitmapEffectGroup。如需範例,請參閱 HOW TO:建立多個視覺效果

範例

下列範例顯示如何使用 DropShadowBitmapEffect,建立 Button 後方的陰影外觀。

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel>

    <Button Margin="50" Width="200">DropShadow Under this 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 DropShadowBitmapEffect has several important properties that
             determine characteristics of the drop shadow: 
             - Color: Specifies the color of the drop shadow (in this example black).
             - ShadowDepth: Specifies how far displaced the shadow is from the object
               casting the shadow. Default is 20.
             - Direction: Specifies in what direction the shadow is cast from the object. 
               It is an angle between 0 and 360 with 0 starting on the right hand side 
               and moving counter-clockwise around the object. The value of 320 in this 
               example casts the shadow on the lower right hand side of the button.
             - Noise: Specifies how grainy the drop-shadow is. Range is between 0 and 1.
               Default is 0.
             - Softness: Specifies how soft the shadow. The range is between 0 and 1 with 1
               being the softest. Default is 0.5. 
             - Opacity: Specifies how transparent the shadow is. The range is between 0 
               and 1 with 1 being fully opaque and 0 fully transparent (not visible). The
               default is 1. -->
        <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="25" Softness="1" 
         Opacity="0.5"/>

      </Button.BitmapEffect>
    </Button>

  </StackPanel>

</Page>

下圖顯示在上述範例中建立的效果。

螢幕擷取畫面:DropShadowBitmapEffect

下列範例顯示如何使用 Style,將 DropShadowBitmapEffect 套用至頁面上按下的 Button

<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 Button is pressed, apply the drop shadow. -->
        <Trigger Property="IsPressed" Value="true">
          <Setter Property = "BitmapEffect" >
            <Setter.Value>
              <DropShadowBitmapEffect Color="Black" Direction="320"  
               ShadowDepth="25" Softness="1" Opacity="0.5"/>
            </Setter.Value>
          </Setter>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>

  <StackPanel>

    <!-- The Style defined above applies to this Button which creates
         a drop shadow when the button is pressed down. -->
    <Button Width="200" >Press Me!</Button>

  </StackPanel>

</Page>

下列範例顯示如何使用程式碼,將 DropShadowBitmapEffect 套用至按下的 Button

下列是範例的可延伸標記語言 (XAML)。

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.DropShadowExample" >

  <StackPanel>

    <Button Click="OnClickDropShadowButton" Margin="50"  Width="200">
    Click to Create Drop Shadow!</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 DropShadowExample : Page
    {

        // Add Blur effect.
        void OnClickDropShadowButton(object sender, RoutedEventArgs args)
        {

            // Get a reference to the Button.
            Button myButton = (Button)sender;

            // Initialize a new DropShadowBitmapEffect that will be applied
            // to the Button.
            DropShadowBitmapEffect myDropShadowEffect = new DropShadowBitmapEffect();

            // Set the color of the shadow to Black.
            Color myShadowColor = new Color();
            myShadowColor.ScA = 1; // Note that the alpha value is ignored by Color property. The Opacity property is used to control the alpha.
            myShadowColor.ScB = 0;
            myShadowColor.ScG = 0;
            myShadowColor.ScR = 0;
            myDropShadowEffect.Color = myShadowColor;

            // Set the direction of where the shadow is cast to 320 degrees.
            myDropShadowEffect.Direction = 320;

            // Set the depth of the shadow being cast.
            myDropShadowEffect.ShadowDepth = 25;

            // Set the shadow softness to the maximum (range of 0-1).
            myDropShadowEffect.Softness = 1;

            // Set the shadow opacity to half opaque or in other words - half transparent.
            // The range is 0-1.
            myDropShadowEffect.Opacity = 0.5;

            // Apply the bitmap effect to the Button.
            myButton.BitmapEffect = myDropShadowEffect;

        }

    }
}

下列範例顯示如何建立 DropShadowBitmapEffectShadowDepthSoftness 的動畫,讓 Button 在按下後看起來像飛離螢幕表面。

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >

  <StackPanel>

    <Button Margin="50" Width="200" Name="myButton">
      Click Me to Animate Drop Shadow!
      <Button.BitmapEffect>

        <!-- This BitmapEffect is targeted by the animation. -->
        <DropShadowBitmapEffect x:Name="myDropShadowBitmapEffect" Color="Black"   
         ShadowDepth="0" />
      </Button.BitmapEffect>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the movement of the button. -->
              <ThicknessAnimation
               Storyboard.TargetProperty="Margin" Duration="0:0:0.5" 
               From="50,50,50,50" To="0,0,50,50" AutoReverse="True" />

              <!-- Animate shadow depth of the effect. -->
              <DoubleAnimation
               Storyboard.TargetName="myDropShadowBitmapEffect"
               Storyboard.TargetProperty="ShadowDepth"
               From="0" To="30" Duration="0:0:0.5"
               AutoReverse="True" />

              <!-- Animate shadow softness of the effect. As 
                   the Button appears to get farther from the shadow,  
                   the shadow gets softer. -->
              <DoubleAnimation
               Storyboard.TargetName="myDropShadowBitmapEffect"
               Storyboard.TargetProperty="Softness"
               From="0" To="1" Duration="0:0:0.5"
               AutoReverse="True" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>

</Page>

請參閱

工作

HOW TO:在物件的外部邊緣上建立光暈效果

HOW TO:對 Visual 物件套用模糊效果

HOW TO:建立多個視覺效果

HOW TO:建立多個視覺效果的動畫

概念

點陣圖效果概觀