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.


                                 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.


                                                                              Figure 2

Give it a name such as “Images”.


                                          Figure 3

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


                                                                                 Figure 4

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


                                                                                    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.

<Grid>
    <Image x:Name="Image1"
    HorizontalAlignment="Left"
    Height="473"
    VerticalAlignment="Top"
    Width="380"
    Source="Images/sample.jpg"
    Stretch="None"
    Margin="10,10,0,0"/>

    <RadioButton x:Name="NoneButton"
                Content="None"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Checked="StretchModeButton_Checked"
                Margin="10,488,0,0"/>
    <RadioButton x:Name="FillButton"
                Content="Fill"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Checked="StretchModeButton_Checked"
                Margin="222,488,0,0"/>
    <RadioButton x:Name="UniformButton" Content="Uniform"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Checked="StretchModeButton_Checked"
                Margin="10,555,0,0"/>
        <RadioButton x:Name="UniformToFillButton"
                Content="UniformToFill"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Checked="StretchModeButton_Checked"
                Margin="222,555,0,0"/>
</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.

private void StretchModeButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton button = sender as RadioButton;
    if (Image1 != null)
    {
        switch (button.Name)
        {
            case "FillButton":
                Image1.Stretch = Windows.UI.Xaml.Media.Stretch.Fill;
                break;
            case "NoneButton":
                Image1.Stretch = Windows.UI.Xaml.Media.Stretch.None;
                break;
            case "UniformButton":
                Image1.Stretch = Windows.UI.Xaml.Media.Stretch.Uniform;
                break;
            case "UniformToFillButton":
                Image1.Stretch = Windows.UI.Xaml.Media.Stretch.UniformToFill;
                break;
            default:
                break;
        }
    }
}

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.





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