Set an image as a Button's content in style

wpf xaml datatemplate staticresource
sean717 picture sean717 · Aug 31, 2011 · Viewed 11.4k times · Source

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

CodeNaked picture CodeNaked · Aug 31, 2011

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.

Related questions

Binding(Converter) in Code Behind

<local:LabelTemp x:Key="labelTemplate"/> <DataTemplate x:Key="labelTemp"> <TextBlock Text="{Binding Converter={StaticResource labelTemplate},Path=Item.Items}"/> </DataTemplate> Can anyone help me how to write the above Xaml code into Code …

Read More
StaticResource reference inside DataTemplate

I've been experiencing some strange behaviour when referencing StaticResources from inside a DataTemplate defined in a ResourceDictionary. In this example, I fill a listbox with the numbers 1 to 9, using a DataTemplate defined in a ResourceDictionary. Here's the MainWindow.xaml code: &…

Read More
Access parent DataContext from DataTemplate

I have a ListBox which binds to a child collection on a ViewModel. The listbox items are styled in a datatemplate based on a property on the parent ViewModel: <Style x:Key="curveSpeedNonConstantParameterCell"> <Style.Triggers> <…

Read More