Confessions of a .NET Developer!

A rounded edged button in WPF

In this post, i shall create a cool rounded button using WPF.

For changing the appearance of a control, you need to create a control template which overrides the default template of that control.
It will look something like this(Click on the link below):

Style Button
Cool isn’t it?!!

Ohkay lets get started!
Here is the XAML for the style :

So we have defined a style, specified a key for it and also specified the TargetType which in our case is a Button.
Next a setter is given with “Template” as the property and its value as “ControlTemplate” to restyle our button.
You can see inside our ControlTemplate is a Border. It means that we are actually replacing the Button with a Border and giving other properties. You can place your own shape or control inside the template like an ellipse to create a circular button.
Next take a look at how i have specified the Background for the Border.

Here is the XAML for the Brush :

LinearGraidentBrush

Brush

You can learn about LinearGradientBrush from the following MSDN :
http://msdn.microsoft.com/en-us/library/ms754083.aspx
http://wpf.2000things.com/tag/lineargradientbrush/

Difference is that my way of specifying GradientStop. In my way you can give RGB colors directly. RGB can be easily calculated using MS Paint->Edit Colors->Define Custom Colors

Next is the ContentPresenter which holds the content of the Button. Test by removing it and you can see the Text Hello has disappeared!
You can replace the ContentPresenter with a TextBlock or even replace it with a ViewBox.
But textblock can only place text and no images inside the button. Taking the case of the ViewBox, well ContentPresenter is more lightweight compared to the former.

Now you can apply the style to a button like this :

Staticresource

After applying you can see the Style has changed!
But wait! Before you start rejoicing, you can click it, the click event will work but the clicking effect of zoom won’t come.

For that we can use Transformations here, i shall apply a RenderTransform here to get a feel of clicking it.

Here is the complete XAML :

Complete

Complete XAML

What i have done here is, adding a Trigger. Its quite clear what it says, When the IsMouseOver property of the Button is True, then it will apply the ScaleTransform. The zooming effect is brought using the ScaleX and ScaleY factors.
Don’t forget to add the Setter “RenderTransformOrigin” to 0.5,0.5. This will ensure that the zooming starts form the middle of the Button. Change the values and play with it! You can see the difference.

That’s it!
It was fun making this button!
In case of any doubt or suggestions, leave a comment and i shall try my best to rectify it!
Thanks for reading!
Have a nice day!

Advertisements

February 22, 2011 - Posted by | WPF

5 Comments »

  1. Wonderfull

    Comment by rahul | November 2, 2011 | Reply

  2. Thanks for the detailed information. This worked great for me.

    Comment by James G. | December 21, 2011 | Reply

  3. Thanks a lot man you’re the best

    Comment by Rem | April 3, 2012 | Reply

  4. Of course, I’m new to it but sorry I have gone over this code 5 times and word by word and all I get is line which it gets resized on Mouse Over trigger.
    so what is making this not to work?

    Thanks.

    Comment by amit | May 29, 2012 | Reply

  5. also, not sure why code is in JPG

    Comment by amit | May 29, 2012 | Reply


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: