Home/ Questions/Q 7649051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T10:52:06+00:00

I am modifying the button visual appearance in my XAML code with a hexagon.

  • 0

I am modifying the button visual appearance in my XAML code with a hexagon. Now, I want to add 2 lines to the two outer edges of the hexagon like the image below:

https://skydrive.live.com/redir.aspx?cid=204df65b0e6e1655&resid=204DF65B0E6E1655!117&parid=204DF65B0E6E1655!107&authkey=!AEzKZRmwMNhBWxM

Can anyone tell how and where to add it ? My code is something like this

    <Page.Resources>
    <Style TargetType="Button">   
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Canvas>
                        <Polygon Canvas.Top="30"  Points=
                     "430,0 
                     400,32
                     -30,32
                     -60,0
                     -30,-32
                     400,-32"
             Stroke="Brown" StrokeThickness="10"/>
                        <ContentPresenter Canvas.Left="80" Foreground="White" FontSize="40"></ContentPresenter>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid Background="Black">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Button Grid.Row="1" Margin="40,-100 0,-50" HorizontalAlignment="Center">Hello World</Button>    

</Grid>

I cant get the line to connect to those edges and spread all the way to the page end.
Any idea ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Do you want this within your button style? I was able to achieve this through the XAML button control template code below.

    I put separators in a grid and then put rectangles on top them to add stroke to the image.
    I also added an upper margin of 2 onto the polygon to align with the rectangles. 

    <ControlTemplate TargetType="Button">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="500"/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Rectangle Fill="White" Grid.Column="0"/>
                        <Rectangle Fill="White" Grid.Column="2"/>
                         <Separator Background="White" Grid.Column="0"/>
                        <Separator Background="White" Grid.Column="2"/>
                        <Canvas Grid.Column="1" Margin="64,2,0,0">
                            <Polygon Points=
                 "430,0 
                 400,32
                 -30,32
                 -60,0
                 -30,-32
                 400,-32"
         Stroke="Brown" StrokeThickness="10"/>
                          <ContentPresenter Canvas.Left="80" Foreground="White" FontSize="40"/>

                        </Canvas>
                    </Grid>
                </ControlTemplate>
    • 0