Reflection of Images Using Expression Blend 4

Here is an article on reflected images using Microsoft Expression Blend in WPF.

Here is an article on reflected images using Microsoft Expression Blend in WPF.


1. Open a new project in Expression Blend and name it "RefImage" or any other name as you like with project type "WPF" and select Language as C#:



2. Select LayoutRootand then setBackground to black from the Properties pane.

3. Go to Assets Library and select a StackPanel Control and draw it on top of your LayoutRoot control.



4. Copy any image from any of your folders and paste on top of the stack panel and name the image as "Image1".


Note: Adjust the size of the window according to your design.

5. Right-click on the image and from the drop-down menu select Group Into->Border.
6. Then Select border from tool pane and draw it of the same size as the Image in the bottom of the stackpanel:


7. Now add the following code to the second Border Control:

<Border BorderBrush="Black" BorderThickness="1" Height="197">
<Border.Background>
<VisualBrush Visual="{Binding ElementName=Image1}"/>
</Border.Background>
</Border>

8. We have used our Image1 as a VisualBrush for second Border. Your window design should be like this now:


9. In this step just copy the Stackpanel by right-clicking on Stackpanel in the object and timeline pane and paste it onto the window and again do the same for the third Stackpanel. So that your window would be something like this:



10. The top image is our real image and the bottom one is just VisualBrush applied to Border control. For the reflection effects select the Border control, go to Properties pane->Transformsection ->Scaleproperty. Set the value of Y to "-1". Do the same procedure for the other two Border controls.



11. Now its time to fade-out our image to show the mirroring effect. Select the border control and from the brushes section change the opacity mask by setting the transparency of first gradient to 0% and for the second gradient to 65% for all the three Borders:



First Gradient Second Gradient



12. Finally select the Border and position your cursor above the bottom handler and you will see that cursor changes its appearance suggesting that you can skew your border. Skew it a bit and after that grab it by the same handler and pull it up (so it shrinks a bit). As follows:


13. After applying step 12 for all the images you will get the following result :