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):
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 :
You can learn about LinearGradientBrush from the following MSDN :
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 :
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 :
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.
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!
5 Comments »
- How to convert bytes to BitmapImage WPF
- Auto-fixing height and width of Button in WPF DataGrid
- How to enlarge or re-size Calendar in WPF DatePicker
- Saving forms settings(location, height) using Serialization
- Give underline effect to a textbox in WPF using Adorners
- Tricky delegates
- How to dynamically load assemblies including unreferenced assemblies
- Using Extension methods – Convert Image to Byte or Base64
- Allow numbers or letters and disable right-click in textbox
- How to use Owner Drawn Controls
- WPF Tutorial : Drawing Visual