How To View An Image Using View Box Control In Universal Application Development With XAML And C#

Before reading this article, please go through the article's link, given below-

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

By reading this article, you can learn, how to use view an image, using View Box Control to open an image file in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP-

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step App development.

Step 1- Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give the Suitable Name for your App (UWPViewApp) ->OK.



Step 2- Choose the Target and minimum platform version your Windows Universal Application will support. Afterwards, the project creates App.xaml and MainPage.xaml.



Step 3- Open (double click) the file MainPage.xaml in Solution Explorer and click the Toolbox tab on the left to open the list of common XAML controls. Expand common XAML controls and drag the required control to the middle of the design canvas

Add TextBlock control, change the name and text property,



Add TextBlock control, change the name and text property,



Add Button control and change the name and content property,



Afterwards, add a ViewBox Control and change the name property.



Add an image control inside the View Box.



Double click the button control. It generates click event and add the code, given below-

private async void btnBrowse_Click(object sender, RoutedEventArgs e)
{
    //Using File Picker top open your Media File
    FileOpenPicker openPicker = new FileOpenPicker();
    openPicker.ViewMode = PickerViewMode.Thumbnail;
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    openPicker.FileTypeFilter.Add(".jpg");
    openPicker.FileTypeFilter.Add(".png");
    Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();
    if (file != null) {
        var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
        var image = new BitmapImage();
        image.SetSource(stream);
        imgDisp.Source = image;
    }
}

Note: Automatically, the code, given below, will be generated in XAML code view, while we are done in the design view-

<Page x:Class="UWPViewBox.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPViewBox" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="120,53,0,0" TextWrapping="Wrap" Text="View Box Test" VerticalAlignment="Top" FontWeight="Bold" />
        <TextBlock x:Name="tblFileSelect" HorizontalAlignment="Left" Margin="78,116,0,0" TextWrapping="Wrap" Text="Select Your Image" VerticalAlignment="Top" />
        <Button x:Name="btnBrowse" Content="Browse" HorizontalAlignment="Left" Margin="217,110,0,0" VerticalAlignment="Top" Click="btnBrowse_Click" />
        <Viewbox x:Name="VBImage" HorizontalAlignment="Left" Height="348" Margin="28,191,0,0" VerticalAlignment="Top" Width="289">
            <Image x:Name="imgDisp" Height="100" Width="100" /> </Viewbox>
    </Grid>
</Page>

Step 4 - Deploy your App in Local Machine.

Select an image, using File open picker.



Image displayed in the View Box Control is given below-



Summary

Now, you have successfully created and tested view an image, using View Box Control in Visual C# - UWP environment.