#341 – Create a Button with an Image and Text

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>

Advertisement

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

6 Responses to #341 – Create a Button with an Image and Text

  1. Artur says:

    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

  2. ab says:

    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?

    • Sean says:

      You can see an example of that in this post–image on a custom button.

      • ab says:

        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;

      • Sean says:

        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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: