Satyendra's Blog

Here i will be discussing about the technologies I am working with and interested in…

Creating custom controls in WPF (Custom button control)

on December 28, 2011

Expression blend has a variety of controls for the users to use. But many times the users have their own requirements. In such cases the user can create his own custom control for the WPF or Silverlight application by programming a class that inherits from one of the System.Windows.Controls classes. Here I will be explaining the concept by creating a custom button control which can be reused across other WPF projects.

So let me begin with the task. The button which we intend to build looks somewhat like this.

Start expression blend and select WPF Control Library from the new project window.

Then draw the controls as shown in the screen below

I have drawn 3 controls: Image, TextBlock for button text and TextBlock for the functionality description.

Some important properties which we need to set for the above 3 controls shown below. Set these properties and also set other required properties such as margin and foreground color of the text according to your requirements. Here you can use any image as a temporary placeholder while making the control. The actual image can be later set by the user when he uses the control in some project.

Also set the IsTabStop property of the UserControl to checked so that the control can receive focus from keyboard also.

Now select all the 3 controls, right click them and group them into the border.

Name the border as bdButtonBorder. Set the bdButtonBorder properties as follows(although you can use your own imagination and depending upon how the button should look and feel set your own properties)

Property Value
BorderBrush #FFF8F3F3
BackgroudBrush This is a gradient brush which has the starting value as #FFECEBEB and the ending value as #FF8A8787
BorderThickness Left, Right, Top and Bottom all set to 1
CornerRadius 2

Now the control should look something like shown below

So now the custom button is somewhat ready but still many things need to be done.

  1. The above button simply feels like a static image if used like this. To provide a button like look and feel we have to create some animations (or use behaviors. In this post I will do this using timeframe animation). For e.g. when the mouse moves over the button it should be highlighted. When the user clicks the button it should look like it is being clicked otherwise the behavior seems somewhat unusual to the user.
  2. We must be able to change the default text and image provided within the button. We need to write some code for this.

Let me start with the 2nd problem defined above. We must be able to change the default text and image content of the button. We will do this by exposing certain properties so that the control is re-usable.  Go to Projects tab, right click MainControl.xaml.cs and select Edit In Visual Studio. The code behind file now opens in visual studio. Add the code as shown below.

Now you can go ahead and compile the control by running it in Visual Studio or by selecting Project -> Build Project in blends. After this browse to the project debug folder (usually “\ProjectName\bin\debug\”). There you can see a file called as “CustomButton.dll”. This is the button which we have just created. Just add a reference to this DLL in your WPF Application project and you can use that control and set its properties which we have defined above. Note that after you have added the reference the control will appear in the Assets tab which you can search by the Locations category in Assets tab (Select CustomButton.dll and then select MainControl). When you run that application it still might not behave like a button since we have not added any animations or behaviors to it. The properties will appear as shown below and can be changed by the user. So the user can now use his own text, description and image for the custom button which we have just created.

We have solved our 2nd problem. We have exposed some of the properties which can be selected by the user when he runs the application. Now we will try to solve the 1st problem. The button should behave like a button. When a user brings mouse over it some change must happen so that the user knows that indeed the button is working. Sometimes the button will be disabled by the user so it should look like it is disabled. When the button is clicked it should look like the user is pressing the button. So here are some of the states of button which we are going to change now:

  • Normal State (When there is no interaction of the user with the button and the button is enabled for use. This is the default state.)
  • Disabled State (When there is no interaction of the user with the button and the button is disabled.)
  • MouseEnter State (When the user brings the cursor into the button.)
  • MouseLeave State (It is the normal state of button.)
  • MouseLeftButtonDown State (When the user presses the button)
  • MouseLeftButtonUp State (When the user releases the button. We will keep this same as MouseEnter state)

So let us first record the properties which we will have to set for the different states of the button. Note that these properties will not be set as soon as the event occurs. We will give some time for property to change by using timeline. The values in the table represent the final value of that state when the timeline is completed. We only need to set the initial timeline value (at t=0 sec) and final timeline value (at t=0.5 sec in this case).

Property(Of bdBorder) / State(FinalValue) MouseEnter MouseLeave(Default State) MouseLeftButtonDown Disabled
Background Brush(Gradient) Starting value #FFF6AB75 #FFECEBEB #FFF6AB75 #FFECEBEB
Background Brush (Gradient) Ending value #FF0EFF00 #FF8A8787 #FF0EFF00 #FF8A8787
Border Brush (Solid Color) #FFFF6F00 #FFF8F3F3 #FFFF6F00 #FFF8F3F3
Render Transform(Translate) X=2 Y=2 (for both TextBlock’s and Image )

In addition for Disabled state we have to set the Foreground Brushes for text blocks and the transparency of Image. The value will be as follows:

txtCustomButtonText txtCustomButtonDescription imgButtonImage
Foreground Brush: #FF866C6C Foreground Brush: #FF866C6C Opacity: 50%

Note that all you can use your custom values for the colors. The above values are just for reference. So let us begin with the animations part. Since animations will involve a lot of steps so I will prefer a video for that instaed of writing each and every step. So just go ahead and play the following video.

Similar to how it is shown in the above video you can create a disabled state for the button by using a new storyboard and set the values using above table. Now you can finally build the library by selecting Project -> Build Project. You can finally use the control by adding the reference to the compiled library (CustomButton.dll) in your project. The following video shows the demo of complete button.

You can download the source code of the control from here and source code of the demo app from here.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: