Getting started:

1.       Open Visual Studio

2.       Create new Silverlight Windows 7 Phone Development Project

3.       Enter your project Name

4.       Click on button ‘Ok’

Now drag and drop Image control on ‘MainPage.xaml’ from toolbox option which is at top left corner. After doing this thing; set the image path by selecting Source property of Image control.

Now write down the following code to build this layout;

Code of ‘MainPage.xaml’:

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" Width="480">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28" Background="#FF6C1643">
            <TextBlock x:Name="ApplicationTitle" Text="My Application" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Image Demo" Margin="0,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="90" Width="424" FontSize="48" Foreground="#FFE8E8EB" AllowDrop="False" />
        </StackPanel>
 
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="#FF194533" Visibility="Visible">
            <Button Content="Show Image" Height="92" HorizontalAlignment="Left" Margin="0,392,0,0" Name="btnShowImage" VerticalAlignment="Top" Width="206" Background="#FF15A7E8" DataContext="{Binding}" AllowDrop="False" UseLayoutRounding="False" VerticalContentAlignment="Center" Click="btnShowImage_Click" />
            <Image Height="304" HorizontalAlignment="Left" Margin="48,40,0,0" Name="imgMerry" Stretch="Fill" VerticalAlignment="Top" Width="344" DataContext="{Binding}" Source="/testPhoneApp;component/Images/Merry.jpg" Visibility="Visible" />
            <Button Content="Hide Image" Height="92" HorizontalAlignment="Right" Margin="0,392,42,0" Name="btnHide" VerticalAlignment="Top" Width="202" Background="#FF15A7E8" Click="btnHide_Click" />
        </Grid>
    </Grid>

Code of ‘MainPage.xaml.cs’:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
 
namespace testPhoneApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void btnShowImage_Click(objectsender, RoutedEventArgse)
        {
            imgMerry.Visibility=System.Windows.Visibility.Visible;
        }
 
        private void btnHide_Click(objectsender, RoutedEventArgse)
        {
            imgMerry.Visibility=System.Windows.Visibility.Collapsed;
        }
     
    }
} 

Now execute your application then following output will be appearing. Here two buttons are given; Show Image and Hide Image. When you have clicked on button ‘Show Image’ then image will be show and you have clicked on button ‘Hide Image’ then Image will be collapsed or hide. By default Image will be hiding.

Now clicks on button ‘Show Image’.

This is a complete description about how to use Image control in Windows 7 Phone Development. I hope you will enjoy this article.