Практическое руководство. Создание эффекта свечения Glow на внешнем крае объекта

Статья
11/05/2008

Обновлен: Ноябрь 2007

В этом разделе рассматриваются способы создания эффекта свечения на внешней границе объекта.

Пример

Для создания эффекта свечения вокруг видимого объекта можно использовать класс OuterGlowBitmapEffect. В этом примере показано, как сделать следующее:

Использовать простую разметку для применения эффекта свечения к объекту.
Использовать Style для применения эффекта свечения к одному или нескольким объектам.
Использовать разметку с фоновым кодом для применения эффекта свечения к объекту.
Использовать анимацию для анимирования свойств эффекта свечения, примененного к объекту.

Примечание.
Во всех следующих примерах к объекту применяется только один эффект. Чтобы применить несколько эффектов, следует использовать BitmapEffectGroup. Дополнительные сведения см. в разделе Практическое руководство. Создание нескольких визуальных эффектов.

Во всех следующих примерах к объекту применяется только один эффект. Чтобы применить несколько эффектов, следует использовать BitmapEffectGroup. Дополнительные сведения см. в разделе Практическое руководство. Создание нескольких визуальных эффектов.

В следующем примере показано, как использовать OuterGlowBitmapEffect для создания синего свечения вокруг внешних границ TextBox.

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

  <StackPanel>

    <TextBox Width="200">
      <TextBox.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 OuterGlow is blue, extends out 30 pixels, has the 
             maximum noise possible, and is 40% Opaque. -->
        <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="30" Noise="1"
         Opacity="0.4" />

      </TextBox.BitmapEffect>
    </TextBox>

  </StackPanel>

</Page>

На следующем рисунке показан эффект наружного свечения, созданный в предыдущем примере.

Снимок экрана: эффект растрового изображения OuterGlowBitmapEffect

В следующем примере показано, как использовать класс Style, чтобы применить OuterGlowBitmapEffect к любому TextBox на странице, которая получает фокус.

<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 TextBox on the page. -->
    <Style TargetType="{x:Type TextBox}">
      <Style.Triggers>

        <!-- When the TextBox gains focus such as when the cursor appears
             in the TextBox, apply the OuterGlowBitmapEffect to the TextBox. -->
        <Trigger Property="IsFocused" Value="True">
          <Setter Property = "BitmapEffect" >
            <Setter.Value>

              <!-- The OuterGlow is blue, extends out 30 pixels, has the 
                   maximum noise possible, and is 40% Opaque. -->
              <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="30" Noise="1"
               Opacity="0.4" />
            </Setter.Value>
          </Setter>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>



  <StackPanel>

    <!-- The Style defined above applies to this TextBox which creates
         an outer glow around the it. -->
    <TextBox Name="textBox1"  Width="200" />

  </StackPanel>

</Page>

В следующем примере показано, как использовать разметку с кодом программной части для применения OuterGlowBitmapEffect к TextBox. Эффект свечения появляется, когда TextBox получает фокус. В этом примере показана разметка.

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

  <StackPanel>

    <!-- When this TextBox gains focus, a blue glow surrounds it. -->
    <TextBox Width="200" GotFocus="OnFocusCreateGlow"></TextBox>

  </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 OuterGlowExample : Page
    {

        // Add OuterGlow effect.
        void OnFocusCreateGlow(object sender, RoutedEventArgs args)
        {

            // Get a reference to the TextBox.
            TextBox myTextBox = (TextBox)sender;

            // Initialize a new OuterGlowBitmapEffect that will be applied
            // to the TextBox.
            OuterGlowBitmapEffect myGlowEffect = new OuterGlowBitmapEffect();

            // Set the size of the glow to 30 pixels.
            myGlowEffect.GlowSize = 30;

            // Set the color of the glow to blue.
            Color myGlowColor = new Color();
            myGlowColor.ScA = 1;
            myGlowColor.ScB = 1;
            myGlowColor.ScG = 0;
            myGlowColor.ScR = 0;
            myGlowEffect.GlowColor = myGlowColor;

            // Set the noise of the effect to the maximum possible (range 0-1).
            myGlowEffect.Noise = 1;

            // Set the Opacity of the effect to 40%. Note that the same effect
            // could be done by setting the ScA property of the Color to 0.4.
            myGlowEffect.Opacity = 0.4;

            // Apply the bitmap effect to the TextBox.
            myTextBox.BitmapEffect = myGlowEffect;

        }

    }
}

В следующем примере показано, как анимировать свойство GlowSize эффекта OuterGlowBitmapEffect, чтобы запустить внешнюю анимацию свечения, когда TextBox получит фокус.

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

  <StackPanel>


    <TextBox Width="200">
      <TextBox.BitmapEffect>

        <!-- This BitmapEffect is targeted by the animation. -->
        <OuterGlowBitmapEffect x:Name="myOuterGlowBitmapEffect"  
         GlowColor="Blue" GlowSize="0" />

      </TextBox.BitmapEffect>
      <TextBox.Triggers>
        <EventTrigger RoutedEvent="TextBox.GotFocus">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the GlowSize from 0 to 40 over half a second. --> 
              <DoubleAnimation
                Storyboard.TargetName="myOuterGlowBitmapEffect"
                Storyboard.TargetProperty="GlowSize"
                From="0" To="40" Duration="0:0:0.5" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </TextBox.Triggers>
    </TextBox>

  </StackPanel>

</Page>

Полный пример см. в разделе Пример растровых эффектов.

См. также

Поделиться через

Практическое руководство. Создание эффекта свечения Glow на внешнем крае объекта

Пример

См. также

Задачи

Основные понятия

Другие ресурсы

Дополнительные ресурсы