Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Creating a button with an image and text in Windows Phone

From Wiki
Jump to: navigation, search
girishpadia (Talk | contribs)
(Girishpadia - - Introduction)
pavan.pareta (Talk | contribs)
(Pavan.pareta - - Implementation)
 
(15 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Silverlight]]
+
[[Category:UI on Windows Phone]][[Category:Code Examples]][[Category:Windows Phone 7.5]][[Category:XAML]][[Category:Windows Phone 8]]
{{Abstract|This article explains how to define ContentControl in WP}}  
+
{{Abstract|This article explains how to create a Button with an image and text in Windows Phone.}}
 +
{{SeeAlso|
 +
* [http://msdn.microsoft.com/en-us/library/hh487169(v=vs.92).aspx Button Control Design Guidelines for Windows Phone]
 +
* [http://msdn.microsoft.com/en-us/library/system.windows.controls.button(v=vs.95).aspx Button Class]
 +
* [http://msdn.microsoft.com/en-us/library/system.windows.controls.contentcontrol(v=vs.95).aspx ContentControl Class]}}
  
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= [[Media:ContentControl.zip]]
 
|sourcecode= [[Media:ContentControl.zip]]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|sdk= [http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570 Windows Phone]
 
|sdk= [http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570 Windows Phone]
 
|platform= Windows Phone
 
|platform= Windows Phone
|creationdate= 20111017
+
|devicecompatability= All
|author=[[User:girishpadia]]
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20111017
 +
|author= [[User:girishpadia]]
 
}}
 
}}
 
  
 
==Introduction==
 
==Introduction==
  
'''ContentControl''' is a class which provides the button’s Content property. Button derives from Control but it can be also derived from '''ContentControl'''. This article explains the concept of ContentControl in Windows Phone. The motive of this article is to create a button with a picture and a text within it. Let's see how to cross this road.
+
Most buttons on Windows Phone are relatively "flat" and are labelled with text. This text is defined in the Content parameter (a [http://msdn.microsoft.com/en-us/library/system.windows.controls.contentcontrol(v&#61;vs.95).aspx ContentControl]) of the [http://msdn.microsoft.com/en-us/library/system.windows.controls.button(v&#61;vs.95).aspx Button] XAML definition:
 +
<code xml><Button Content="Button" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center"  /></code>
 +
This example shows how you can replace the button text with a picture.  
 +
[[File:ContentControl.jpg|none]]
 +
Note: The wonderful flower you are seeing in the above image is captured by my digital camera.  
  
==Description==
+
== Implementation ==
Create a project with any name of your choice ('''ContentControl''' in my case) and place a button with it. As soon as you place the button you will see the ''MainPage.xaml'' will change with the some code which may look like the following.
+
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.
 +
<code xml><Button Content="Button" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center"  /></code>
  
<code xml>
+
Remove this content property from this XML text ({{Icode|Content&#61;"Button"}}) so that your code should be simillar to below.
<Button Content="Button" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center"  />
+
<code xml><Button HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center"  /></code>
</code>
+
  
In above code, the button property "Content" is set to "Button". Now remove this content property from this XML text so that your code should be simillar to below.
+
Now we need to add an image to the project so that it can be later used as a button's image:
 +
# Right click on project and select '''Add->New Folder'''.
 +
#:A blank folder will be generated. Rename it to "Image".
 +
# 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:
 
<code xml>
 
<code xml>
<Button HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center" />
+
<Button HorizontalAlignment="Center" VerticalAlignment="Center" >
</code>
+
  <StackPanel>
 
+
      <Image Source="Image\myimage.JPG" Stretch="Fill" Height="334" Width="339" />
Remember that our motive is to create button with an image and a text within it. Now right click on project and select '''Add->New Folder'''. A blank folder will be generated. Rename it to "Image". The next step is to search a beautiful picture and add it to the Image folder which we create just now. You can do this by right click on Image folder and select Add->Existing item.. and select your favourite image. In this case the image name is '''"myimage.JPG".''' Now again go back to your button code in xaml file. We have already removed the content property from the code. Change the code to following to add the image which we just now added to our project.
+
  </StackPanel>
 
+
<code xml>
+
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Margin="6,100,6,101" Width="444">
+
<StackPanel>
+
  <Image Source="Image\myimage.JPG" Stretch="Fill" Height="334" Width="339" />
+
</StackPanel>
+
 
</Button>
 
</Button>
 
</code>
 
</code>
  
You can see in the designer that the picture is now part of your button. Stil we need to add text below the image. We can use '''<TextBlock>''' to add the text block. You can add the TextBlock from toolbox or you can type the xml code of TextBlock. After adding TextBlock your above code will look something like this.
+
You can see in the designer view that the picture is now part of your button. We add a {{Icode|TextBlock}} below this image - using either the toolbox (drag'n'drop) or typing the xml code of {{Icode|TextBlock}}. After adding {{Icode|TextBlock}} your above code will look something like this.
 
+
+
 
<code xml>
 
<code xml>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Margin="6,100,6,101" Width="444">
+
<Button HorizontalAlignment="Center" VerticalAlignment="Center" >
 
  <StackPanel>
 
  <StackPanel>
 
   <Image Source="Image\myimage.JPG" Stretch="Fill" Height="334" Width="339" />
 
   <Image Source="Image\myimage.JPG" Stretch="Fill" Height="334" Width="339" />
Line 50: Line 69:
 
</code>
 
</code>
  
 
 
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.
 
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.
  
==Image==
+
== References ==
 
+
  
[[Image:ContentControl.jpg]]
+
See the examples section of [http://msdn.microsoft.com/en-us/library/system.windows.controls.contentcontrol(v&#61;vs.95).aspx ContentControl Class] for other examples of setting button content.
==Note==
+
PS: The wonderful flower you are seeing in the above image is captured by my digital camera. :-)
+

Latest revision as of 04:25, 5 October 2013

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

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
Device(s): All
Article
Created: girishpadia (17 Oct 2011)
Last edited: pavan.pareta (05 Oct 2013)

[edit] 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.

[edit] 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.

[edit] References

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

This page was last modified on 5 October 2013, at 04:25.
1272 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.

×