Developing a Custom Button [WPF]

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 :)