WPF custom shaped button template using path as attached property - wpf

Question

I'm still pretty new to WPF. I'm trying to create a button template that uses path data for the button shape. My application has several buttons that will perform similar tasks, but will need different shapes. I'm trying to create an attached property that will pass the path data to my template. What I've got so far:
The attached property:
Public Class CustomShapeButton
Inherits Button
Public Shared PathDataProperty As DependencyProperty = DependencyProperty.RegisterAttached("PathData", GetType(Path), GetType(CustomShapeButton), New PropertyMetadata(Nothing))
Public Shared Sub SetPathData(obj As DependencyObject, value As Path)
obj.SetValue(PathDataProperty, value)
End Sub
Public Shared Function GetPathData(obj As DependencyObject) As Path
Return DirectCast(obj.GetValue(PathDataProperty), Path)
End Function
End Class
And the button template, located in my resource dictionary:
<Style x:Key="TransparentNavButton" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Path x:Name="pth" Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(hmi:CustomShapeButton.PathData)}" Stroke="Black" Stretch="Fill"/>
<ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,4,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="pth" Property="Fill" Value="#60FF0000"/>
<Setter TargetName="pth" Property="Stroke" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then trying to implement it something like this:
<Button Content="Button" Width="60" Height="50" Style="{StaticResource TransparentNavButton}">
<hmi:CustomShapeButton.PathData>
<Path Data="M1 1 L20 0 L20 20 L0 20 Z"/>
</hmi:CustomShapeButton.PathData>
</Button>
I can't seem to get the path data to show up on the button. What am I missing?

Answer 1

Your problem is that you're creating an attached property of type Path but assigning it to the PathData property in your template, which is of type Geometry. To fix this, change the attached property declaration like so:
Public Class CustomShapeButton
Public Shared PathDataProperty As DependencyProperty = DependencyProperty.RegisterAttached("PathData", GetType(Geometry), GetType(CustomShapeButton), New PropertyMetadata(Nothing))
Public Shared Sub SetPathData(obj As DependencyObject, value As Geometry)
obj.SetValue(PathDataProperty, value)
End Sub
Public Shared Function GetPathData(obj As DependencyObject) As Geometry
Return DirectCast(obj.GetValue(PathDataProperty), Geometry)
End Function
End Class
Then use it like this:
<Button Content="Button" Width="60" Height="50"
hmi:CustomShapeButton.PathData="M1 1 L20 0 L20 20 L0 20 Z"
Style="{StaticResource TransparentNavButton}" />
One more thing to note: your CustomShapeButton class doesn't need to inherit from Button - in fact, it doesn't have to inherit from anything at all. If however you'd like to create your own derived button class that has the PathData property, then you could inherit from Button, in which case you would declare PathData as a regular dependency property and not as an attached property.