×
Namespaces

Variants
Actions
(Difference between revisions)

Creating a button with an image and text in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Text replace - "[[Category:Silverlight" to "[[Category:XAML")
hamishwillee (Talk | contribs)
m (Text replace - "Category:UI" to "Category:UI on Windows Phone")
Line 1: Line 1:
[[Category:Windows Phone]][[Category:XAML]][[Category:UI]][[Category:Code Examples]]
+
[[Category:Windows Phone]][[Category:XAML]][[Category:UI on Windows Phone]][[Category:Code Examples]]
 
{{Abstract|This article explains how to create a Button with an image and text in Windows Phone 7.}}  
 
{{Abstract|This article explains how to create a Button with an image and text in Windows Phone 7.}}  
 
{{SeeAlso|
 
{{SeeAlso|

Revision as of 05:37, 2 July 2013

This article explains how to create a Button with an image and text in Windows Phone 7.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested withCompatibility
Platform(s): Windows Phone
Windows Phone 8
Windows Phone 7.5
Article
Created: girishpadia (17 Oct 2011)
Last edited: hamishwillee (02 Jul 2013)

Introduction

Most buttons on Windows Phone are relatively "flat" and are labelled with text. This text is defined in the Content parameter (a ContentControl) of the Button XAML definition:

<Button Content="Button" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center"  />

This example shows how you can replace the button text with a picture.

ContentControl.jpg

Note: The wonderful flower you are seeing in the above image is captured by my digital camera.

Implementation

Create a project with any name of your choice (ContentControl in this example) and place a button in the mainPage.xaml file. As soon as you place the button you will see the MainPage.xaml will change to code much like the following.

<Button Content="Button" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center"  />

Remove this content property from this XML text (Content="Button") so that your code should be simillar to below.

<Button HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center"  />

Now we need to add an image to the project so that it can be later used as a button's image:

  1. Right click on project and select Add->New Folder.
    A blank folder will be generated. Rename it to "Image".
  2. Add an image to this new "Image" folder. "You can do this by right click on Image folder and select Add->Existing item

For this example the image name is "myimage.JPG".

Now again go back to your button code in XAML file and add the image as shown:

<Button HorizontalAlignment="Center" VerticalAlignment="Center" >
<StackPanel>
<Image Source="Image\myimage.JPG" Stretch="Fill" Height="334" Width="339" />
</StackPanel>
</Button>

You can see in the designer view that the picture is now part of your button. We add a <TextBlock> below this image - using either the toolbox (drag'n'drop) or typing the xml code of TextBlock. After adding TextBlock your above code will look something like this.

<Button HorizontalAlignment="Center" VerticalAlignment="Center" >
<StackPanel>
<Image Source="Image\myimage.JPG" Stretch="Fill" Height="334" Width="339" />
<TextBlock Text="This button has picture!" TextAlignment="Center" />
</StackPanel>
</Button>

That's it. We have added a picture and text within the button. Press F5 and run the project and see the output in emulator.

References

See the examples section of ContentControl Class for other examples of setting button content.

1092 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×