Amazing .NET

Surface Reflection Effect [WPF]

2012-08-31T06:00:00.000+05:30

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]

2012-08-24T06:00:00.000+05:30

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

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.
Create a transparent window as I have described in my previous blog Transparent Window [WPF].
Create a Close button as I have described in previous blog.
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.
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.
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.
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.
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.
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();

}
That's it! Now go back to Blend and select your solution and right click and select Test Solution.

Happy Coding :)

Developing a Custom Button [WPF]

2012-08-17T11:00:00.000+05:30

Hello Everyone!!
This is Tushar...

Today, I am going to tell you how to develop a custom button of your own design in WPF. You just follow the steps as :

· 1. Open an existing WPF application or create a new one. Add a new window (e.g. MYWindow) to your project.


Adding lable as Button element


Selecting shape from toolbox

· 2. To create a button, first let’s design it in our editor Expression Blend.For that, Select Ellipse from tool box and draw it inside the editor to the desired shape and size. We can use Rectangle instead if wanted to create a rectangular button. Also we can use label to give a caption to our button. While deciding the button elements, if it consists of more than one element, the group all the elements consisting to make our button into a group(e.g. Canvas)


Drawing an ellipse


Make Button... Menu

· 3. Once we designed our button shape, select the element or a group of elements i.e. Ellipse(or other shape) and click on Tools menu and select Make Button… option.

· 4. Now, a Create Style resource window is opened. Give the specific Name to your button style. Let’s give the name e.g. btnCloseStyle since we intend to create the Close button and Press OK.Here our desired element is changed into a button.


Creating Style Resource


Renaming Button

· 5. Give the appropriate Name to the button created by selecting button element from Object and Timeline section and giving it a specific name (e.g. btnClose) from Properties section.

Editing Control Part

· 6. When a button control is created, it consists of internal part out of which some may not be needed for us anymore. So as to edit its control part, right click on button element in Object and Timeline section and select Edit Control Part (Template) and select Edit Template. See in Object and Timeline section, you can see [ContentPresenter] along with the element we added. Here in our case, we’ll not need ContentPresenter to add a Caption to our button. So we are deleting it. If you want it anyway no need to delete it. To delete it, just right click on the [ContentPresenter] and click on Delete. Here our button is ready.


Creating event for Button click

· 7. Now, We’ll create events for button we created. For that go to Properties section and click on <Events> icon.Here we can see many events related to button control. We give name to this event say btnClose_Click and double click in textbox. We can either double click in black textbox; in this case the Expression Blend automatically assigns a name to the event. Now Expression Blend communicates with Visual Studio to load a Code-Behind page where we have defined an event handler method (Here for button click event).

· Inside event handler method, we can write the logic which should get executed after clicking the button we created. Here we are closing the window when we click on Close button.

Inside Visual studio editor, we write the code as:

private void btnClose_Click(object sender, RoutedEventArgs e)

{

this.Close();

}

· 8. Now we’ll create and apply style to button we created so as to configure its triggers when mouse pointer is hovered over it or it is mouse clicked. Now right click on button element in Object and Timeline section and select Edit Control Part (Template) and select Edit Template. Now look in Interaction section’s Triggers section. You can see events related to buttons. You click on any trigger and change the corresponding properties of the elements. Well set triggers of the button as:

1. Default


Editing Triggers for button

We set here the trigger for the button when it is in its default state. Here we set ellipse as well as label element’s opacity to 90%.

2. When Mouse Over

We set here the triggers for the button when mouse curser is hover over the button. Here we set ellipse as well as label element’s opacity to 100%.

3. When Button is pressed.

We set here the behavior for the button when button is pressed. Here we change the color of button to more dark shade so as to make the button fee like pressed.

· 9. You can also assign ToolTip to your button so as to guide the user to make understand about the use of button. In Properties section of the window, add ToolTip for the button.

Adding ToolTip for Button

· 10. Now go to Project tab and right click on solution’s icon and click on Test Solution. Now a window is shown to you with the button we made for closing the window.

· Hover mouse over it you can see the changes taking place in the behavior of the button. If You clicked on the button and kept it in pressed condition, you see the button color is darken. And when you leave button pressed and its clicked event is fired and you observe that the window is closed.

Final Output

Happy Coding :)

Transparent Window [WPF]

2012-08-10T09:53:00.002+05:30

Hello Everyone!!!

This is Tushar and I love to work with technologies like .NET.

From Now I am going to say lot of things whatever I experienced about advanced technologies in .NET.

To create a transparent window in WPF, Microsoft Expression Blend is so much helpful.

1. You first create a WPF project/Open existing WPF project.

2. Select Project tab of Blend. You can see the all the project related
files in a tree, similar to Visual studio.Right click on your project’s
icon and click on Add New Item…

3.   A New Item prompt is opened with 4 options in it. Select Window.Give appropriate name with
   extension as .xaml (e.g. MyTransparantWindow.xaml) and check Include code file so as to create
     a code-behind file with same name extended by extension specific to programming language.

If you are using c# then the name will be e.g. MyWindow.xaml.cs else if using VB as programming language, then name will be given as MyWindow.xaml.vb

4. On clicking OK a new WPF window will be created.And you can see its elements in Object and Timeline section e.g. Window, LayoutRoot etc.

5. To make your window transparent, we’ll select window and look into properties tab.
In properties section, you can set various properties of the selected element.

Now, let’s select brush to None from Brushes section.
You can observe that the background of the window is disappeared.

6. From the Appearance section of properties, we check Allow Transparency checkbox so as to allow our window to be transparent.

Now, we’ll assign some background to our window so that it’ll feel the transparency of the window.

7. Select a Rectangle from toolbox and draw it in the region inside our window as big as desired size for the window.

8. This element will be shown in Object and Timeline section. Let’s rename it to our desired name e.g. MyWindowBackgroudRectancle.

9. From properties section, set the background color for the rectangle

10. Now, set the opacity of the window. We can set extent of transparency, that how much transparent our window would be. So to do so, just set opacity in the Appearance section by inputting the percentage of the transparency. This can be easily done by just clicking and dragging your mouse over the bar provided to set the opacity. The opacity can also be set at run-time using:

<Element Name>.Opacity=<Value[from 0 to 1]>

E.g. in ‘c#’, MyWindowBackgroudRectancle. Opacity=0.5; //This will assign 50% opacity to our rectangle named MyWindowBackgroudRectancle.

Now just set newly developed window as start page and your project as starting project and run the Application….

Happy Coding :)

BDW, Today, Its my Birthday! Cheeeeeeeeers!