Home > DeveloperSection > Articles > Image Control in Windows 7 Phone Development

Image Control in Windows 7 Phone Development

Windows Phone Windows Phone 
0 Comment(s)
 5732  View(s)
Rate this:

Image Control in Windows 7 Phone Development

The Image Control allows you to display images in your Windows 7 Phone Development or Application. To have a first closer look at this control you just created a new project and dragged and drop an Image Control into your ‘MainPage.xaml’ form design. Let’s see a brief description on it.

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.

Image Control in Windows 7 Phone Development

Image Control in Windows 7 Phone Development

Image Control in Windows 7 Phone Development

Image Control in Windows 7 Phone Development

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


            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>



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



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





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()





        private void btnShowImage_Click(objectsender, RoutedEventArgse)





        private void btnHide_Click(objectsender, RoutedEventArgse)









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.

Image Control in Windows 7 Phone Development

Now clicks on button ‘Show Image’.

Image Control in Windows 7 Phone Development

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

Don't want to miss updates? Please click the below button!

Follow MindStick