Add an image in a WPF button

I tried this solution:

<Button>
    <StackPanel>
        <Image Source="Pictures/img.jpg" />
        <TextBlock>Blablabla</TextBlock>
    </StackPanel>
</Button>

But I can see the image only in the project window, and when I launch the program it disappears.

If I try this:

  Image img = new Image();
  img.Source = new BitmapImage(new Uri("foo.png"));

  StackPanel stackPnl = new StackPanel();
  stackPnl.Orientation = Orientation.Horizontal;
  stackPnl.Margin = new Thickness(10);
  stackPnl.Children.Add(img);

  Button btn = new Button();
  btn.Content = stackPnl;

I get a "'System.Windows.Markup.XamlParseException' in PresentationFramework.dll" exception.

What is the solution?

In the case of a 'missing' image there are several things to consider:

1. When XAML can't locate a resource it might ignore it (when it won't throw a XamlParseException)

2. The resource must be properly added and defined:

• Make sure it exists in your project where expected.

• Make sure it is built with your project as a resource.

  (Right click → Properties → BuildAction='Resource')

Another thing to try in similar cases, which is also useful for reusing of the image (or any other resource):

Define your image as a resource in your XAML:

<UserControl.Resources>
     <Image x:Key="MyImage" Source.../>
</UserControl.Resources>

And later use it in your desired control(s):

<Button Content="{StaticResource MyImage}" />

Please try the below XAML snippet:

<Button Width="300" Height="50">
  <StackPanel Orientation="Horizontal">
    <Image Source="Pictures/img.jpg" Width="20" Height="20"/>
    <TextBlock Text="Blablabla" VerticalAlignment="Center" />
  </StackPanel>
</Button>

In XAML elements are in a tree structure. So you have to add the child control to its parent control. The below code snippet also works fine. Give a name for your XAML root grid as 'MainGrid'.

Image img = new Image();
img.Source = new BitmapImage(new Uri(@"foo.png"));

StackPanel stackPnl = new StackPanel();
stackPnl.Orientation = Orientation.Horizontal;
stackPnl.Margin = new Thickness(10);
stackPnl.Children.Add(img);

Button btn = new Button();
btn.Content = stackPnl;
MainGrid.Children.Add(btn);

Use:

<Button Height="100" Width="100">
  <StackPanel>
    <Image Source="img.jpg" />
    <TextBlock Text="Blabla" />
  </StackPanel>
</Button>

It should work. But remember that you must have an image added to the resource on your project!

You can set the button's background to the image if you then want to overlay text.

<Button>
   <Button.Background>
     <ImageBrush ImageSource="/AssemblyName;component/Pictures/img.jpg"/>
   </Button.Background>
   <TextBlock>Blablabla</TextBlock>
</Button>

Watch out for the image source syntax. See this question for help.

I also had the same issue. I've fixed it by using the following code.

        <Button Width="30" Margin="0,5" HorizontalAlignment="Stretch"  Click="OnSearch" >
            <DockPanel>
                <Image Source="../Resources/Back.jpg"/>
            </DockPanel>
        </Button>

Note: Make sure the build action of the image in the property window, should be Resource.

Try ContentTemplate:

<Button Grid.Row="2" Grid.Column="0" Width="20" Height="20"
		Template="{StaticResource SomeTemplate}">
	<Button.ContentTemplate>
		<DataTemplate>
			<Image Source="../Folder1/Img1.png" Width="20" />
		</DataTemplate>
	</Button.ContentTemplate>
</Button>
    

I found that I also had to set the Access Modifier in the Resources tab to 'Public' - by default it was set to Internal and my icon only appeared in design mode but not when I ran the application.