Reflection effect using Silverlight
Introduction
Reflection is an easy way to add a feeling of depth to your user experience. This effect can take even the most plain of product shots and make
it look interesting! Adding reflections at design time is simple enough when using tools like Expression Blend or Photoshop, but what if you could
produce this effect programmatically at run time?
The Code
The above effect is created by our DrawReflectedImage function in MainPage.xaml.cs:
<UserControl x:Class="SilverlightReflection.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
Width="530" Height="400">
<Canvas x:Name="LayoutRoot">
<Canvas.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FF979797" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
</Canvas>
</UserControl>
So to break it down, the main things going on here are rendering the image, rendering a copy of the image, flipping it, and applying a graduated opacity mask.
The reason why we've chosen to use Rectangles instead of just using Image objects directly is simply to allow more flexibility. It makes adding the subtle white
border very easy.
Conclusion
Having suffered in a limited and inconsistent HTML world for too long, it's great to finally be able to produce this level of
finish dynamically at runtime.
Article Information
Platform: Silverlight 2.0
Published: 15 March 2008
Download: Reflection.zip
If this article has saved you time and money, perhaps you would consider a small donation to keep this site running?
| Powered by |
 |
Copyright SilverlightSource.net 2009. All rights reserved.