Universal Windows Platform Controls - Part Three

Before reading this article, please go through the following articles.

1. Universal Windows Platform Controls - Part One
   
2. Universal Windows Platform Controls - Part Two

Introduction

Welcome again! We’re always here to bring a new topic in Universal Windows Platform App development because it’s all about Windows Phone. It’s our last part of Universal Windows Platform Controls. Today, we’ll talk about Image Control in UWP. It’s really awesome and you’ll definitely like it. So, let’s get cracking in UWP Image Control.

Working with Image Control

You can take an Image control from Toolbox or just write a simple code, as written below, along with setting four RadioButtons. We’ve talked about RadioButtons in our first part of this section. If you aren't familiar with RadioButton, feel free to take a look at it. So, our design looks like the picture below.



Adding an image to our project

Now, we have to do a little bit of work before stepping ahead. We need to add an image to our project. Just right click in the Solution Explorer and go to Add >> New Folder. Give it a name, like “Images”.

Now, right click on the “Images” folder and go to Add >> Existing Item. Go to your destination directory to select your desired image. Select and add it.

Designing UI and Code Behind

Now, in the XAML code, show the path of the image that you’ve added in the source property of Image Control. 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 full path of our image in line seven. We will mainly show four image zooming properties- Fill, Uniform, Uniform to Fill, and Normal (None). Our four RadioButtons will handle these operations. 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 Switch Case operation. We just call every RadioButton by its name, as shown in line no. 8, 11, 14, and 17, and call Windows Media Class. Image1 is our Image Control’s name. These really small lines of codes are really helpful.

Running the Application

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





Summary

Hope you are now able to work on Image Controls. Well, that’s it. I’ll be here with a new topic soon. Till then, good bye.

Happy coding!

Source code is here.