Create custom shaped buttons in WPF

See more:

C#

WPF

C#4.0

Hello,

I need to create a custom shaped button which looks like a forward arrow. Three or four of such buttons are to be placed next to each other in such a way that the tip of the first button is just near the tail of the next button


I have made a style for the button using polygon in .xaml & assigned this style to the button. Now, if i add this button to a form, i can see this button in the desired style.
But, still the button has the rectangular shape, which is not visible as the borders & remaining area are transparent. So, the button occupies a rectangular area on the form irrespective of the style which i created.

Because of this, i cannot keep the forward shaped butons next to each other, as close as desired. Here, for the tip of one forward button to come near the tail of the next button, the rectangular area of the buttons must overlap, which is not correct.


Is there any way to remove the rectangular area of the button & make it exactly to occupy the desired shape as specified by the style.


The .xaml file for my code is given below

<window x:class="Styles.MainWindow" xmlns:x="#unknown">
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="150" Width="525">
    <window.resources>
<Style x:Key="Poly1" TargetType="{x:Type Button}">
        	<setter property="Template">
        		<setter.value>
        			<controltemplate targettype="{x:Type Button}">
        				<grid>
                            <polygon fill="{TemplateBinding Background}" points="10,10 80,10 120,45 80,75 10,75 45,45" stroke="{TemplateBinding BorderBrush}" strokethickness="2" />
        					<contentpresenter horizontalalignment="{TemplateBinding HorizontalContentAlignment}" recognizesaccesskey="True" snapstodevicepixels="{TemplateBinding SnapsToDevicePixels}" verticalalignment="{TemplateBinding VerticalContentAlignment}" />
        				</grid>
        				<controltemplate.triggers>
        					<trigger property="IsFocused" value="True" />
        					<trigger property="IsDefaulted" value="True" />
        					<trigger property="IsMouseOver" value="True" />
        					<trigger property="IsPressed" value="True" />
        					<trigger property="IsEnabled" value="False" />
        				</controltemplate.triggers>
        			</controltemplate>
        		</setter.value>
        	</setter>
        </Style>
</window.resources>
<wrappanel>
        <Button Style="{DynamicResource Poly1}"></Button>
        <Button Style="{DynamicResource Poly1}"></Button>
 </wrappanel>
</window>