WPF Image Command Binding

Question

I\'m putting a WPF application together in which I have an image control which I want to bind a custom command object to from my view model that will execute when the image

Answer 1

You need to put the image in a button, and bind the button to the command:

<Button Command="{Binding MyCommand}">
    <Image Source="myImage.png" />
</Button>

If you don't want the standard button chrome, just change the template of the button with something like that:

<ControlTemplate x:Key="tplFlatButton" TargetType="{x:Type Button}">
    <Border Width="{TemplateBinding Width}"
            Height="{TemplateBinding Height}"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          TextElement.Foreground="{TemplateBinding Foreground}"
                          TextElement.FontFamily="{TemplateBinding FontFamily}"
                          TextElement.FontSize="{TemplateBinding FontSize}"
                          TextElement.FontStretch="{TemplateBinding FontStretch}"
                          TextElement.FontWeight="{TemplateBinding FontWeight}"/>
    </Border>
</ControlTemplate>

Note that you will also need to change other properties to override the default button style, otherwise the template above will use the default button background and border:

<Style x:Key="stlFlatButton" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{x:Null}" />
    <Setter Property="BorderBrush" Value="{x:Null}" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Template" Value="{StaticResource tplFlatButton}" />
</Style>

Answer 2

Here's yet another solution I personally love to use most of the time if I want an image with command without enclosing it in another control.

<Image Source="Images/tick.png" Cursor="Hand" Tooltip="Applies filter">
     <Image.InputBindings>
          <MouseBinding Gesture="LeftClick" Command="{Binding ApplyFilter, Mode=OneTime}" />
     </Image.InputBindings>
</Image>

I set its properties Hand and Tooltip so that it's more clear that it's an action and not a static image.

Answer 3

reset control template of the button and use image in control template..

 <Button Width="100" Height="100" Command="{Binding SampleCommand}">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Image Stretch="Uniform" Source="Images/tick.png"></Image>
                </ControlTemplate>
            </Button.Template>
        </Button>

Answer 4

Simplified version of answer from @Robert Rossney:

<TextBlock>
    <Hyperlink Command="{Binding SomeCommand}" TextDecorations="{x:Null}">
        <Image Source="{StaticResource image.png}" Width="16" />
    </Hyperlink>
</TextBlock>

The best way to include an image is to use a {StaticResource x}, see WPF image resources

Answer 5

It can be simpler to avoid using a button and use a Hyperlink instead:

<TextBlock DockPanel.Dock="Top">
   <Hyperlink Command="{Binding SomeCommand}">
      <Image Source="image.png" />
   </Hyperlink>
</TextBlock>

Note that this will render the hyperlink with the default text decoration, so you'll want to add a style that removes that - putting this in the resource dictionary of the containing element will do the trick:

<Style x:Key={x:Type Hyperlink}" TargetType="Hyperlink">
   <Setter Property="TextDecorations"
           Value="{x:Null}" />
</Style>