Click here to Skip to main content
15,892,674 members
Articles / Desktop Programming / WPF

WPF tutorial: use reflections, shadows and rotations to create 3D effects

Rate me:
Please Sign up or sign in to vote.
4.72/5 (26 votes)
18 Aug 20064 min read 180.1K   2.8K   70  
Some nice effects like reflections, rotations and shadows are used in this tutorial to create 3D effects. Only XAML code is used, so all effects are done in markup.
<Window x:Class="ImageEffects.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ImageEffects" Height="600" Width="800" Background="#CCCCCC"
    >
    <StackPanel>
      <Border BorderBrush="White" BorderThickness="5"  HorizontalAlignment="Center"  VerticalAlignment="Center">
        <Image Source="image.jpg" Width="200" Height="300" Stretch="Fill" x:Name="myImage"></Image>
        <Border.BitmapEffect>
          <BitmapEffectGroup>
            <DropShadowBitmapEffect Color="Black" Direction="20" ShadowDepth="25" Softness="1" 
       Opacity="0.5"/>
          </BitmapEffectGroup>
        </Border.BitmapEffect>
        <Border.RenderTransform>
          <SkewTransform CenterX="0" CenterY="0" AngleX="0" AngleY="10" />
        </Border.RenderTransform>
      </Border>
      <Border Width="210" Height="300" BorderThickness="5" BorderBrush="White">
        <Border.Background>
          <VisualBrush Visual="{Binding ElementName=myImage}">
            <VisualBrush.Transform>
              <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="200" CenterY="150"></ScaleTransform>
            </VisualBrush.Transform>
          </VisualBrush>
        </Border.Background>
        <Border.OpacityMask>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="Black"></GradientStop>
            <GradientStop Offset="0.6" Color="Transparent"></GradientStop>
          </LinearGradientBrush>
        </Border.OpacityMask>
        <Border.RenderTransform>
          <SkewTransform CenterX="30" CenterY="2" AngleX="-30" AngleY="10" />
        </Border.RenderTransform>
      </Border>
    </StackPanel>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Belgium Belgium
Hi, I'm Gill Cleeren, I'm a developer/architect from Belgium.
I've been developing .net applications for over 4 years, mainly ASP.net and C#.
Since a few months now, I've been busy with WPF.

You can check out my blog at www.snowball.be for more info on me and more articles like the one here!

Comments and Discussions