Windows Phone

Windows Phone 7: The Silverlight Image Element

2/4/2011 5:57:42 PM
The equivalent program in Silverlight is even simpler. Let’s create a project named SilverlightLocalBitmap. First create a directory in the project to store the bitmap. This isn’t strictly required but it makes for a tidier project. Programmers usually name this directory Images or Media or Assets depending on the types of files that might be stored there. Right-click the project name and choose Add and then New Folder. Let’s name it Images. Then right-click the folder name and choose Add and Existing Item. Navigate to the Hello.png file. (If you’ve created a different bitmap on your own, keep in mind that Silverlight supports only JPEG and PNG files.)

From the Add button choose either Add or Add as Link. If you choose Add, a copy will be made and the file will be physically copied into a subdirectory of the project. If you choose Add as Link, only a file reference will be retained with the project but the file will still be copied into the executable.

The final step: Right-click the bitmap filename and display Properties. Note that the Build Action is Resource. It’s possible to change that Build Action to Content, but let’s leave it for now and I’ll discuss the difference shortly.

In Silverlight, you use the Image element to display bitmaps just as you use the TextBlock element to display text. Set the Source property of Image to the folder and filename of the bitmap within the project:

Example 1. Silverlight Project: SilverlightLocalBitmap File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Source="Images/Hello.png" />

The display looks a little different than the XNA program, and it’s not just the titles. By default, the Image element expands or contracts the bitmap as much as possible to fill its container (the content grid) while retaining the correct aspect ratio. This is most noticeable if you set the SupportedOrientations attribute of the PhoneApplicationPage start tag to PortraitOrLandscape and turn the phone sideways:

If you want to display the bitmap in its native pixel size, you can set the Stretch property of Image to None:

<Image Source="Images/Hello.png"
Stretch="None" />

Other -----------------
- Windows Phone 7: XNA Texture Drawing
- Windows Phone 7: An Introduction to Touch - Routed Events
- Windows Phone 7 : Working with Attachments
- Programming Windows Phone 7: An Introduction to Touch - The Manipulation Events
- Programming Windows Phone 7: An Introduction to Touch - Low-Level Touch Events in Silverlight
- Windows Phone 7: Composing a New Message
- Programming Windows Phone 7: An Introduction to Touch - The XNA Gesture Interface
- Programming Windows Phone 7: An Introduction to Touch - Low-Level Touch Handling in XNA
- Windows Phone 7: Responding to a Message
- Windows Phone 7: Checking for New Messages
- Windows Phone 7: Sorting and Searching Your Mail
- Windows Phone 7: Customizing Your Contacts List
- Windows Phone 7: Working with the Me Card
- Windows Phone 7: Posting to Facebook or Windows Live
- Programming Windows Phone 7 : Simple Clocks (part 2)
- Programming Windows Phone 7 : Simple Clocks (part 1)
- Windows Phone7: Pinning a Contact to Start
- Windows Phone7: Adding a Picture or Ringtone to a Contact
- Windows Phone7: Deleting a Contact
- Programming Windows Phone 7: XNA Orientation
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox

- Sigma 24mm f/1.4 DG HSM Art

- Canon EF11-24mm f/4L USM

- Creative Sound Blaster Roar 2

- Alienware 17 - Dell's Alienware laptops

- Smartwatch : Wellograph

- Xiaomi Redmi 2
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8