Windows Phone Controls: Part 3

Introduction

Welcome again! We're always here to present new topics in Windows Phone App development, because it’s all about Windows Phone. It’s probably our last part of Windows Phone Controls. Today we’ll talk about the Image control in Windows Phone. It’s really awesome and you’ll definitely like it. So let’s get crackiing in it, the Windows Phone Image Control.

Working with Image Control

You can use an Image control from the Toolbox or just write a simple code like that and you need to use four RadioButtons. We talked about RadioButtons in our first part of this section Windows Phone Controls – Part 1. If you aren’t familiar with RadioButtons then feel free to have a look at that. So, our design looks like this picture below.

radio button
                                 Figure 1

Adding an Image to Our Project

Now we have a little bit of work to go. We need to add an image to our project. Just right-click in the Solution Explorer and go to Add >> New Folder.

add new folder
                                                                              Figure 2

Give it a name such as “Images”.

image folder
                                          Figure 3

Now, right-click on the “Images” folder and go to Add >> Existing Item.

existing item
                                                                                 Figure 4

Now, go to your destination directory to select your desired image. Select and add it.

insert image
                                                                                    Figure 5

Designing UI and Code Behind

Now, in the XAML code show the path of the image you’ve added in the Source property of the Image control. The XAML code is given below.

  1. <Grid>  
  2.     <Image x:Name="Image1"   
  3.     HorizontalAlignment="Left"   
  4.     Height="473"   
  5.     VerticalAlignment="Top"  
  6.     Width="380"   
  7.     Source="Images/sample.jpg"  
  8.     Stretch="None"   
  9.     Margin="10,10,0,0"/>  
  10.   
  11.     <RadioButton x:Name="NoneButton"   
  12.                 Content="None"   
  13.                 HorizontalAlignment="Left"   
  14.                 VerticalAlignment="Top"   
  15.                 Checked="StretchModeButton_Checked"   
  16.                 Margin="10,488,0,0"/>  
  17.     <RadioButton x:Name="FillButton"   
  18.                 Content="Fill"   
  19.                 HorizontalAlignment="Left"   
  20.                 VerticalAlignment="Top"   
  21.                 Checked="StretchModeButton_Checked"   
  22.                 Margin="222,488,0,0"/>  
  23.     <RadioButton x:Name="UniformButton" Content="Uniform"   
  24.                 HorizontalAlignment="Left"   
  25.                 VerticalAlignment="Top"   
  26.                 Checked="StretchModeButton_Checked"   
  27.                 Margin="10,555,0,0"/>  
  28.         <RadioButton x:Name="UniformToFillButton"   
  29.                 Content="UniformToFill"   
  30.                 HorizontalAlignment="Left"   
  31.                 VerticalAlignment="Top"   
  32.                 Checked="StretchModeButton_Checked"   
  33.                 Margin="222,555,0,0"/>  
  34. </Grid>  
Listing 1

Here, we’ve shown the path full path of our image in line number seven. We will mainly show the four image Zooming properties, for example Fill, Uniform, Uniform to Fill and Normal (None). Our four RadioButtons will handle this operation. The C# code is given here.
  1. private void StretchModeButton_Checked(object sender, RoutedEventArgs e)  
  2. {  
  3.     RadioButton button = sender as RadioButton;  
  4.     if (Image1 != null)  
  5.     {  
  6.         switch (button.Name)  
  7.         {  
  8.             case "FillButton":  
  9.                 Image1.Stretch = Windows.UI.Xaml.Media.Stretch.Fill;  
  10.                 break;  
  11.             case "NoneButton":  
  12.                 Image1.Stretch = Windows.UI.Xaml.Media.Stretch.None;  
  13.                 break;  
  14.             case "UniformButton":  
  15.                 Image1.Stretch = Windows.UI.Xaml.Media.Stretch.Uniform;  
  16.                 break;  
  17.             case "UniformToFillButton":  
  18.                 Image1.Stretch = Windows.UI.Xaml.Media.Stretch.UniformToFill;  
  19.                 break;  
  20.             default:  
  21.                 break;  
  22.         }  
  23.     }  
  24. }  
Listing 2

Here, we’ve applied a very simple logic, like a Switch Case operation. We just call every RadioButton by their name as in line number eight, eleven, fourteen and seventeen and call Windows Media Class. Image1 is our Image control’s name. It’s really a few lines of code but really helpful.

Running the Application

If you run the application it’ll look exactly like this.

show image

background image

Summary

I hope you can do this with me. Well, that’s it. I’ll be here with a new topic soon, until then good bye. Have a nice day. Happy coding.

You can read the original article at http://bit.ly/1wdOeR8

<< Windows Phone Controls - Part 2

Up Next
    Ebook Download
    View all
    Learn
    View all