WPF VB - TemplateBinding Fill on Custom User Control and XAML

Question

Making my first WPF application and I'm having problems with a custom user control that I have created. The custom control is a little football shirt made with paths and two labels, one for name and one for number. Eventually the user will adjust the formation of a team using this control, but the fill colour should match the team selected. I've set up a dependency property for the fill / brush which I hoped I could edit in my XAML, but the fill is transparent no matter what colour I set it too. What am I doing wrong? And is this the best way to make such a control that I can drag around a canvas / drop onto other panels to swap data. Here is the code:

PlayerIcon.xaml -

<UserControl x:Class="PlayerIcon"
         x:Name="PlayerIcon"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:Custom="clr-namespace:RowZedPlus"
         mc:Ignorable="d" 
         d:DesignHeight="60" d:DesignWidth="100">
<Grid x:Name="LayoutRoot" HorizontalAlignment="Center">

    <Grid.RowDefinitions>
        <RowDefinition Height="19"></RowDefinition>
        <RowDefinition Height="0"></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Label Grid.Row="0" HorizontalContentAlignment="Center" Background="Transparent" Foreground="White">
        <TextBlock Name="PlayerName" Foreground="White" FontSize="8">
            HELLO
        </TextBlock>
    </Label>

    <Canvas Margin="0,0,40,0" HorizontalAlignment="Center" Grid.Row="1">
        <!-- Jersey/Main Shirt -->
        <Path x:Name="PlayerShirt" Stroke="#ff000000" Fill="{TemplateBinding Custom:PlayerIcon.PlayerColour}" StrokeMiterLimit="1.0" Data="F1 M 0.899,9.143 C 0.899,9.143 3.484,14.188 3.984,17.000 C 6.484,15.562 9.984,15.562 9.984,15.562 L 9.984,37.625 C 9.984,37.625 25.297,40.438 31.672,37.625 C 31.609,29.250 31.672,15.562 31.672,15.562 C 31.672,15.562 35.922,15.812 37.234,16.812 C 37.234,16.812 37.554,12.941 40.421,9.253 L 24.386,3.357 C 23.526,6.286 20.586,8.812 20.586,8.812 C 20.586,8.812 18.047,6.857 16.922,3.500 C 16.922,3.500 2.790,8.143 0.899,9.143 Z">
        </Path>
        <!-- Jersey/Left Sleeve -->
        <Path StrokeThickness="0.5" Stroke="#ff000000" StrokeMiterLimit="1.0" Fill="White" Data="F1 M 1.484,9.000 C 1.484,9.000 4.109,15.230 5.984,16.168 L 3.734,17.250 C 3.734,17.250 0.250,13.188 0.250,9.375 L 1.484,9.000 Z"/>
        <!-- Jersey/Right Sleeve -->
        <Path StrokeThickness="0.5" Stroke="#ff000000" StrokeMiterLimit="1.0" Fill="White" Data="F1 M 39.688,9.000 C 39.688,9.000 37.062,15.230 35.188,16.168 L 37.438,17.250 C 37.438,17.250 40.922,13.188 40.922,9.375 L 39.688,9.000 Z"/>
        <!-- Jersey/Left Collar -->
        <Path StrokeThickness="0.5" Stroke="#ff000000" StrokeMiterLimit="1.0" Fill="White" Data="F1 M 16.922,3.500 L 14.711,4.244 C 14.711,4.244 16.672,9.438 18.109,10.500 L 20.586,8.812 C 20.586,8.813 17.109,5.875 16.922,3.500 Z"/>
        <!-- Jersey/Right Collar -->
        <Path StrokeThickness="0.5" Stroke="#ff000000" StrokeMiterLimit="1.0" Fill="White" Data="F1 M 24.386,3.357 L 26.504,4.136 C 26.504,4.136 24.636,9.294 23.198,10.357 L 20.734,8.750 C 20.734,8.750 24.198,5.732 24.386,3.357 Z"/>
        <!-- Jersey/Bottom Shirt -->
        <Path StrokeThickness="0.5" Stroke="#ff000000" StrokeMiterLimit="1.0" Fill="White" Data="F1 M 9.984,36.875 C 17.172,38.688 25.609,38.812 31.734,36.875 L 31.734,37.938 C 25.922,40.312 18.160,40.312 9.984,37.938 C 9.984,37.938 9.984,37.188 9.984,36.875 Z"/>
        <!-- Jersey/<Path> -->
        <Path StrokeThickness="0.5" Stroke="#fffb02ef" StrokeMiterLimit="1.0" Data="F1 M 7.422,45.375"/>

        <Label HorizontalContentAlignment="Center" Background="Transparent" Foreground="#FFED0606">
            <TextBlock Name="PlayerNumber" Margin="5,5,0,0" Foreground="White" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center">
            </TextBlock>
        </Label>
    </Canvas>



</Grid>

PlayerIcon.xaml.vb -

Partial Public Class PlayerIcon

Public Shared ReadOnly PlayerColourProperty As DependencyProperty = _
                   DependencyProperty.Register("PlayerColour", _
                   GetType(Brush), GetType(PlayerIcon), _
                   New FrameworkPropertyMetadata(Brushes.Red))

Public Property PlayerColour() As Brush
    Get
        Return GetValue(PlayerColourProperty)
    End Get

    Set(ByVal value As Brush)
        SetValue(PlayerColourProperty, value)
    End Set
End Property

End Class

MainWindow.xaml -

<Custom:PlayerIcon PlayerColour="Green"></Custom:PlayerIcon>
<Custom:PlayerIcon Canvas.Left="300" PlayerColour="Purple"></Custom:PlayerIcon>

Answer 1

You want to be using a RelativeSource binding for this.

As documentation for TemplateBinding states you can only use it in ControlTemplate definitions.

Try switching Fill="{TemplateBinding Custom:PlayerIcon.PlayerColour}" to

Fill="{Binding RelativeSource={RelativeSource FindAncestor,
                                              AncestorType={x:Type Custom:PlayerIcon}},
                Path=PlayerColour}"

You are on the right path AFAIK w.r.t to this UserControl. You've got the control abstracted. You can now expand the functionality and tie them into their corresponding bits accordingly.

on a side-note:

Nice football jersey Path btw :) looks nice