Surface Reflection Effect [WPF]

Hello Everyone!
This is Tushar.
Today, I am going to tell you how  to create a surface reflection of any element/object in your UI.
When you run this, you will feel that your element/object is placed on a glassy surface and its reflection is shown on that surface. Isn't it great?
Well, here you just need to follow following steps:

1.  Open Expression Blend and create a new project.(Here our project name is MyWPFProject.sln)

2.  Here we'll create a reflection for some buttons. For that we'll create our own styles for that button and give it the surface reflection effect.

3.  First select Window from Object and Timeline and set its background to Solid Color Brush with background color Black. Select a rectangle from Toolbox and draw it inside the window. Since we are going to develop a rectangular button, hence we have selected rectangle. You can select other shapes also as per your need.Apply Gradient brush to the rectangle by selecting the rectangle from Object and Timeline Panel and in the Brushes section, select gradient brush and apply your favorite color. You can change the effect of gradient fill by applying brush transform tool.First Select your rectangle from Object and Timeline panel and then select Brush Transform Tool from toolbox. Now you can see an arrow over selected rectangle. Just adjust the position of the arrow so as to change the extent of the fill of gradient brush in the rectangle.

Brush Transform Tool

4. Lets apply some curved fill to the rectangle so that it should look like as a button. For that select the rectangle from the Object and Timeline Panel and click on Select tool.Now adjust the position of the handle shown at the top-left corner of the selected rectangle.You can see the radius of the rectangle corners changing.

Making rectangle curved corner

5. Now to create a reflection, Copy the rectangle and paste it.Now name it as the reflection of the original rectangle. 

Here we name it as Rectangle_reflection. Select this rectangle and Go to Transform section in Properties panel and select Flip Tab.Click on Flip Y Axis. Now you can see the rectangle is flipped

6. Keeping Rectangle_Reflection selected go to Brushes section and select Gradient Brush.Now select one of the dot and change its Alpha to 0.Also Change its Stroke to No Brush Now you can see that from one edge, the rectangle have no edge.

Setting Alpha value to 0

7. Apply brush transform tool to Rectangle_Reflection and adjust it such that the rectangle looks as the reflection of the original reflection.

8. Now select both the rectangles and from Tools menu select Make Button... and give appropriate name for the button style resource and click OK.Now right click on created button and select Edit Template[Control Part] and click on Edit Template.  

Editing Control template of the button

Here adjust Content Presenter such that it should be over the original rectangle. and end complete template editing.

Adjusting position of Content Presenter

9. Now copy this button's two more instances and set their content properties. You can apply different styles and triggers to these buttons as I have explained in my previous blog Developing a Custom Button [WPF].

10. Now right click on your window and click on Startup and run the project.

Final Output showing 3 instances of buttons with surface reflection effect

Fade Animation [WPF]

Hello Everyone! This is Tushar.

Today, I am going to tell you how to implement Fade-In and Fade-Out effects for windows in WPF.

Edit Code in Visual Studio

1. Create a new project or open an existing project. Right click on Project in solution explorer and select Add New Item... Now a window is shown to you. Select Window and give appropriate name to your window (e.g. MyWindow.xaml) and click on OK.
2. Create a  transparent window as I have described in my previous blog Transparent Window [WPF].
3. Create a Close button as I have described in previous blog.
4. OK. Now we’ll handle behavior of window from Code behind. There will be two situations:
     I.    Window will Fade-In when window get loaded.
     II.   Window will Fade-Out when window get unloaded.
5. Now right click on your window in solution explorer and select Edit in Visual Studio. As soon as you do this, Expression Blend communicates with Visual Studio and your project gets loaded into visual studio.
6. Now Open Code-Behind file for your window (in our case MyWindow.xaml.cs) and you can see a class there. Now Set Opacity property of the window to 0(zero) in the constructor of the class.
7. To Fade-In window at the start-up, follow the following steps                                      I.    Create a Window Loaded event handler for the window to be faded.  To do this, go back to Blend and select Window from Object and Timeline Panel and go to Properties panel and click on Events icon. Here you can see many events related to window. Double click on Loaded event TextBox. Now again Visual studio gets loaded automatically and you can see an EventHandler method is generated there in the Code-Behind file.                                                                                        II.    Inside Event Handler method, write the following code snippet
   
   
   
   var ObjAnimation = new DoubleAnimation(1,(Duration)TimeSpan.FromSeconds(0.5)); 
   this.BeginAnimation(UIElement.OpacityProperty, ObjAnimation);
   
   
   III.    In this code snippet we are creating a variable for DoubleAnimation Class. The constructor for DoubleAnimation class takes final values as first parameter and duration to reach that value as second parameter. Then we call BeginAnimation () method where we are passing property to be changed and DoubleAnimation variable. This method starts animating as it changes specified property value to the final value in given duration. Here for example we are changing windows opacity property to 1 in 0.5 second.
8. To Fade-Out window at the start-up, follow the following steps:
   I.    Inside Event Handler method for close button, write the following code snippet
   
   
   var ObjAnimation = new DoubleAnimation(0,(Duration)TimeSpan.FromSeconds(0.5));
   ObjAnimation.Completed += new EventHandler(Animation_FadeOutCompleted);
   this.BeginAnimation(UIElement.OpacityProperty, ObjAnimation);
   
   
   II.    In this code snippet we are changing windows opacity property to 0 in 0.5 second.
9. As the animation completes, an event handler method named Animation_FadeOutCompleted is invoked. The Event-Handler is added for this method at line No. 3 in the code snippet. We close the window as soon as fade-out animation completes. The event handler method is written as :
   
   
   void Animation_FadeOutCompleted(object sender, EventArgs e)
   {
   this.Close();
   }
   
   
10. That's it! Now go back to Blend and select your solution and right click and select Test Solution.

Happy Coding :)