WPF Bitmap Effects Tutorial - Part III

Group Effects

Suppose we need multiple effects for controls. We can achieve this by grouping the effects.

You may interested the Part I and Part II of the same tutorial series

If you see in XAML behind, we have this:



Let's see how we can group multiple effects.

Let's say we need DropShadow as well as OuterGlow Bitmap effect for a TextBlock then how can we achieve this!



As you see in above XAML display, we have both effects with different colors.



Like this you can do effect combinations based on your imagination!

Effect When Event is Triggered

An effect can be triggered by an event, such as MouseOver, Focus, etc.

Let's have two triggers for two different controls, first one will be for image when we MouseOver the Image would have OuterGlow and the second one will be for a Focused and it would have OuterGlow effect.

Let's do it!



Code view of the above image

<TabControl.Resources>
  <Style x:Key="ImageStyle" TargetType="{x:Type Image}">
    <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="BitmapEffect">
          <Setter.Value>
            <OuterGlowBitmapEffect GlowColor="Gold"
                                   GlowSize="8"/>
          </Setter.Value>
        </Setter>
      </Trigger>
    </Style.Triggers>
  </Style>

  <Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
    <Style.Triggers>
      <Trigger Property="IsFocused" Value="True">
        <Setter Property="BitmapEffect">
          <Setter.Value>
            <OuterGlowBitmapEffect GlowColor="Red"
                                   GlowSize="8"/>
          </Setter.Value>
        </Setter>
      </Trigger>
    </Style.Triggers>
  </Style>
</TabControl.Resources>

And to apply the styles use as following:



Code view of the above image

<Image Source="Assets/Smiley_Love.png" Cursor="Hand"
       Style="{DynamicResource ImageStyle}"
       Margin="8,8,0,0" VerticalAlignment="Top" Width="128"
       Height="128" HorizontalAlignment="Left"
       d:LayoutOverrides="Width">
</Image>
<TextBox Height="23" Style="{DynamicResource TextBoxStyle}"
         Margin="6,0,147,126" VerticalAlignment="Bottom">
</TextBox>

Now we can have the following effects when MouseOver or Focus for respective controls.



You can also download the sample project used in the above article.

Hope this article helps.