Changing the shape of a WPF button without changing other styles

Question

I would like to change the shape of the WPF button from the default round rectangle to another shape (say arrows), but I want to keep the rest of the style — fill color, border color, hover state, etc. I want the button to have the same styles as all other regular buttons (which, I think, depends on the version of Windows, the color of system themes, etc., so I don’t like that I can recreate the style of the button from scratch and hard code. correct colors).

Is there any way to do this?

Answer 1

You must subclass normal button control. You can then customize the subclass with a custom form, but all other properties will be inherited. This will allow you to change the shape for your button and nothing more.

Here is a good resource for creating a custom button if you have Blend:
http://msdn.microsoft.com/en-us/library/bb613598.aspx

Answer 2

Make a copy of the default button template and simply change the default panel to your own custom form.

In the case of the button, it seems you need to replace Border with something like Path defining the arrow.

Since a Path has no content, you may have to place both the form and the content in another panel that allows you to overlap objects such as a grid.

So, your end result will look something like this.

 <Grid> <Path /> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> 

instead of the standard

 <Button> <ContentPresenter /> </Button> 

Answer 3

If you want to inherit the default system colors / styles for Button , you can use TemplateBinding inside the Template button. For example, if you want to create a custom button that has the same background color as the system, you can use the following:

 <Button> <Button.Template> <ControlTemplate TargetType="Button"> <Grid> <!-- circle to have inherited colour --> <Ellipse Fill="{TemplateBinding Background}" Height="50" Width="50" /> <ContentPresenter /> </Grid> </ControlTemplate> </Button.Template> </Button> 

Ellipse then inherits the background color from Button , however it is set.