Making Hexagon shaped buttons

Question

I've searched around and could not find out my answer. Is there a way to make a button and have it be displayed as a hexagon instead of having 4 sides? I would like this hexagon button to have all the features that come with the button property. It could be viable through a bitmap image of some sort, but I'd rather be able to edit the xaml code or just use a template to create hexagon buttons. Thanks in advanced!

Answer 1

That is beauty of WPF... you change change the entire look and feel of a control and it will still retain it's behavior. You do this using Styles and ControlTemplates. Here's a sample button that is a (crudely drawn) hexagon:

<Button HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="252,169,266,0" Width="Auto" Height="66" x:Name="Button" Background="sc#1, 0.138459474, 0.7573992, 0" Content="Testing 123" BorderBrush="sc#1, 0, 0, 0" Foreground="sc#1, 1, 1, 1">
  <Button.Template>
   <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
    <Grid Width="Auto" Height="Auto" x:Name="Grid">
     <Grid.ColumnDefinitions>
      <ColumnDefinition/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
      <RowDefinition/>
     </Grid.RowDefinitions>
     <Path d:LayoutOverrides="None" d:LastTangent="0,0" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Width="Auto" Height="Auto" x:Name="Path" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Data="M51.78125,7.125 L83.5,24 85.75,49 53.78125,62.0625 21.8125,44.25 22.78125,24.25 51.78125,7.125 z"/>
     <TextBlock VerticalAlignment="Center" Margin="0,0,0,0" x:Name="TextBlock" Text="{TemplateBinding Content}" TextWrapping="Wrap" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" FontStretch="{TemplateBinding FontStretch}" Foreground="{TemplateBinding Foreground}"/>
    </Grid>
   </ControlTemplate>
  </Button.Template>
 </Button>

There's a lot going on here and a lot for you to learn, but the key thing to notice here that I've set the Button's Template property to a ControlTemplate instance. A ControlTemplate allows you to completely redefine what visuals will be displayed for your control. Inside of the ControlTemplate you can use any other set of visuals/controls you want to acheive the look you desire. I'm also using TemplateBinding in the template to map properties that are set on the button to properties of controls inside of my template.

Like I said, there's a lot to learn, so you should start here in the SDK. Note also that I used Expression Interactive Designer to whip this little sample together. You might want to download that and use it to experiment with building your controls and seeing what features of WPF it uses to accomplish the higher level concepts it presents.

HTH,
Drew

Answer 2

Thanks for your quick and very helpful response! I just started learning XAML and playing around with the WinFX components recently and am already amazed at what it has to offer. Thanks for the helpful sites and the help!

Answer 3

Hi Drew ,

I copy and past it but it gave me 3 errore as  below :

Error 1 The Key attribute can only be used on a tag contained in a Dictionary (such as a ResourceDictionary). Line 10 Position 34. D:\WorkingDirectory\fjalali\Wpf_test1\Wpf_test1\Window1.xaml 10 34 Wpf_test1

Error 2 The property 'LayoutOverrides' was not found in type 'Path'. D:\WorkingDirectory\fjalali\Wpf_test1\Wpf_test1\Window1.xaml 18 31 Wpf_test1

Error 3 The property 'LastTangent' was not found in type 'Path'. D:\WorkingDirectory\fjalali\Wpf_test1\Wpf_test1\Window1.xaml 18 56 Wpf_test1

and here my code:

<

 

Window x:Class="Wpf_test1.Window1"

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

Title="Window1" Height="300" Width="300">

 

 

 

<Grid>

 

 

<Button HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="252,169,266,0" Width="Auto" Height="66" x:Name="Button" Background="sc#1, 0.138459474, 0.7573992, 0" Content="Testing 123" BorderBrush="sc#1, 0, 0, 0" Foreground="sc#1, 1, 1, 1">

 

 

<Button.Template>

 

 

<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">

 

 

<Grid Width="Auto" Height="Auto" x:Name="Grid">

 

 

<Grid.ColumnDefinitions>

 

 

<ColumnDefinition/>

 

 

</Grid.ColumnDefinitions>

 

 

<Grid.RowDefinitions>

 

 

<RowDefinition/>

 

 

</Grid.RowDefinitions>

 

 

<Path d:LayoutOverrides="None" d:LastTangent="0,0" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Width="Auto" Height="Auto" x:Name="Path" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Data="M51.78125,7.125 L83.5,24 85.75,49 53.78125,62.0625 21.8125,44.25 22.78125,24.25 51.78125,7.125 z"/>

 

 

<TextBlock VerticalAlignment="Center" Margin="0,0,0,0" x:Name="TextBlock" Text="{TemplateBinding Content}" TextWrapping="Wrap" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" FontStretch="{TemplateBinding FontStretch}" Foreground="{TemplateBinding Foreground}"/>

 

 

</Grid>

 

 

</ControlTemplate>

 

 

</Button.Template>

 

 

</Button>

 

 

</Grid>

</

 

Window>

---

just impossible is impossible