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.

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.

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.