Add icon to button with Visual Studio

Question

I have a simple question. I want to add an icon to a C# WPF Button control. I do not want to have to write C# code, or edit XAML to do this.

However, when I click on the button in the Designer, there is no option under properties to set an image. How do you do this through the Visual Studio GUI?

Solution 1

The easiest/best way to do this is to add an Image control as the Content of the Button.

The property window is somewhat limited in what it can do, and only supports text for that property. This does include bindings, so you could use an Image StaticResource. I couldn't find an easy way to create one from the property designer either though.

So basically, you are stuck with editing XAML. Either with a direct Content property or by creating an element in Resources Its not that bad! Just write:

<Button>
   <Button.Content>
      <Image ImageSource="..."/>
   </Button.Content>
</Button>

Now of course, you could create a custom button that exposed that property via the designer, but thats even more XAML. Its WPF, you are going to have to write XAML, so learning how should be a priority.

Solution 2

Visual Studio 2015: create a button. create an image. set the source of the image to the right file of your resources (e.g. a .png file that you included to your project) drag the image over the button. A text shows that asks you to press ALT to replace the text of the button with the image.

I currently don't know how to get both, image and text, for a button.

in XAML, it looks like this:

<Button x:Name="button12" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75">
   <Image x:Name="image" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="24" Source="gfx/new.png"/>
</Button>

Comments

[Dai]

Add the image as a child control of the button.

[MethodMan]

this is not that trivial its why not use a ImageButton is that an option..?