Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: 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>
Posted 20-Oct-11 22:09pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi,
 
no, everything in our world lives in rectangular spaces ... which is best for combining arbitrary things (what would you excpect if someone places a vertical line between such butons).
 
Your special case needs a special solution - which in fact is almost trivial: use negative margins (at least: right margin) ... and don't start your polygon 'anywhere in the middle' of the rectangular space (meaning: start at 0,0 not 10,10).
 
Cheers
Jürgen
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 680
1 Maciej Los 300
2 Suvendu Shekhar Giri 229
3 Sascha Lefévre 229
4 Richard Deeming 195
0 Sergey Alexandrovich Kryukov 9,678
1 OriginalGriff 9,135
2 Peter Leow 5,082
3 Kornfeld Eliyahu Peter 3,373
4 Maciej Los 2,606


Advertise | Privacy | Mobile
Web03 | 2.8.150327.1 | Last Updated 26 Oct 2011
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100