How do I specify Command on Button when I'm using a Template in WPF?

Question

I have a Button template to define what my edit button should look like:

<ControlTemplate x:Key="EditButton" TargetType="{x:Type Button}">
     <Button Style="{StaticResource GrayOutButtonStyle}" >
        <Image x:Name="editImage" Source="{StaticResource EditIcon}" />
     </Button>
</ControlTemplate>

I want to declare the Command in the XAML where I create the button (not in the template). But when I set the Command attribute in the Button, it's being ignored:

<Button Template="{StaticResource EditButton}" 
        Command="{Binding Source={StaticResource ViewModel}, Path=EditCommand}" 
        CommandParameter="{Binding}" />

What's wrong with my syntax?

(Note: If I remove the template from this button then the Command works, so it's something about using a template that's messing it up.).

Answer 1

Why does your Button template include another Button? That makes no sense and would suffer from a StackOverflow if your template was applied implicitly. It should just be the Image, in which case your command should work.

To be clear, what's happening is you have an outer Button which correctly has the ICommand applied to it. However, it's being rendered as another Button with an Image inside it. Hence, when you click the Image, you're actually clicking the inner Button, which has no ICommand associated with it. The outer Button never "sees" the click, so it never executes the command.

Your only other option, which I wouldn't recommend, but should work, is to have the inner button bind to the properties on the outer button:

<ControlTemplate ...>
    <Button Command="{TemplateBinding Command}" CommandParameter="{Binding CommandParameter}" ...>
        <Image .../>
    </Button>
</ControlTemplate>

HTH,
Kent