#341 – Create a Button with an Image and Text
July 13, 2011 6 Comments
Since a Button is a ContentControl, it can have any other control as its content, rather than text. You can include an Image control, to create a button with an image on its face. You can also include multiple controls on the button, by settings its main content to be a container, which in turn contains other controls.
In the example below, we create a Button that has both an image and some text (a caption).
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" > <StackPanel> <Image Source="Misc-Settings-icon.png" Height="64" Width="64"/> <Label Content="Settings" HorizontalAlignment="Center"/> </StackPanel> </Button>
HI Sean,
I repeat your example in my apps. All is ok, no errors but when aplication runs image doesn’t appear. I use VS 2012 for Desktop, my image properties.png is located in C:\…\apps_name\ImageButton\Icons\. Here is a XAML code:
Could tell me how fix it, please ?
regards,
Artur
Make sure to just set the Source property to the image name, with no path. And then include the image as a binary resource in your project. (See https://wpf.2000things.com/2011/04/12/274-embed-images-into-your-project-as-binary-resources/ )
Hi Sean,
What if I want a custom button with an image and text (+animations…)? How do I set the image source and the text when using the custom button? Is it possible with only xaml?
You can see an example of that in this post–image on a custom button.
Hi Sean,
Thank you for your answer. Sorry, I haven’t understood which post you were referring to. (I did a search but haven’t found any post either).
I know how to create a custom control with an image and text and animate each; but in order to use the control I need to add dependency properties (imageSource and TextContent). I was wondering if there was a way to do that without code-behind only by using xaml;
It sounds like you answered your own question. If you need to add dependency properties, then you’re not doing that in XAML but adding properties.