27

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.

Cfun
  • 8,442
  • 4
  • 30
  • 62
sean717
  • 11,759
  • 20
  • 66
  • 90

2 Answers2

45

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.

CodeNaked
  • 40,753
  • 6
  • 122
  • 148
  • 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. – Pieter Müller Oct 14 '11 at 15:16
4

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.

fatty
  • 2,453
  • 2
  • 25
  • 24
  • thx, but it didn't work out very well. Please see CodeNaked's post. – sean717 Aug 30 '11 at 23:14
  • 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. – fatty Aug 30 '11 at 23:16