Set an image as a Button's content in style

Question

I have a WPF button defined like this:

<Button Style="{StaticResource RevertButtonStyle}" />

Here is how the style looks:

<Style x:Key="RevertButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Height" Value="25" />
    <Setter Property="Width" Value="20" />
    <Setter Property="Margin" Value="3,0,0,0" />
</Style>

How do I change the style to specify the Content to use an image called "revert.png"?

Thanks.

Breadboard

Answer 1

You can't use set the Content property to an instance of the Image control, as then the Image could be used by more than one Button. This would result in a "visual is already the child of another visual" exception.

Instead, you can use a DataTemplate like so:

<Setter Property="ContentTemplate">
    <Setter.Value>
        <DataTemplate>
            <Image Source="revert.png" />
        </DataTemplate>
    </Setter.Value>
</Setter>

Obviously you may need to adjust the image's source URI.

Trehala

This immediately helped me - I had the "visual is already..." exception with a Path I was setting as the button content in a style. Thanks. – Noxious

Answer 2

In my application, I have defined an ImageButton control that specifies an ImageSource property.

This is styled like this:

<Style TargetType="{x:Type controls:ImageButton}">
    <Setter Property="ForceCursor" Value="True" />
    <Setter Property="Cursor" Value="Hand" />

    <Setter Property="ToolTip" Value="{Binding Path=Caption, RelativeSource={RelativeSource Mode=Self}}" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:ImageButton}">
                <Image Width="16" Height="16" Source="{Binding Path=ImageSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" Name="image" />

                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="image" Property="Opacity" Value="0.3" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

But in your case, if you want to use the same image for all Button objects with a certain Style set, you could simply just use <Image Source="pack://application:,,,/My.Assembly.Name;component/Icons/revert.png" /> in the Template if the image you want to use has been included as a resource in the application.

Gere

thx, but it didn't work out very well. Please see CodeNaked's post. – Breadboard

Sorry yeah, I misspoke. Should have been ContentTemplate (as in the code dump I posted), not Content as in my original summary. Have edited for future viewers. – Gere