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" />
</Grid>
|
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" />
