John is developing a Windows Store app for viewing images. He has created the UI of the app, as shown in the following figure.

John is developing a Windows Store app for viewing images. He has created the UI of the app, as
shown in the following figure.
The UI of the App
Now, he has to add the functionalities to the app so that:
The users are able to select an image from the Image List section.
Once the user selects the image from the Image List section, the preview of the selected image
is displayed in the Image Preview section.
The preview of the selected image uniformly fits in the defined area.
Help John to add the preceding functionalities to the app.

Solution:
XAML CODE:

<Page
    x:Class="ImageViewer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImageViewer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Viewbox>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button Content="Image List" HorizontalAlignment="Left" Margin="10,10,0,0" BorderThickness="0" FontSize="24" Background="Blue" VerticalAlignment="Top" Width="315"/>
            <ListBox  HorizontalAlignment="Left" Height="697" Margin="10,61,0,0" VerticalAlignment="Top" Width="315" SelectionChanged="IstBoxPictureList_SelectionChanged"/>

            <Button Content="Image Preview"  HorizontalAlignment="Left" Margin="346,10,0,0" BorderThickness="0" FontSize="24" Background="Blue" VerticalAlignment="Top" Width="1010"/>
            <Button IsEnabled="False" HorizontalAlignment="Left" Height="697" Margin="346,61,0,0" VerticalAlignment="Top" Width="1010">
                <Image x:Name="Imgpreview" Source="Assets/1.jpg" Stretch="Uniform"></Image>
            </Button>


        </Grid>
    </Viewbox>
</Page>

----------------------------------------------------------------------------------------------------

CS Code

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

using Windows.UI.Xaml.Media.Imaging;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace ImageViewer

{

    /// <summary>

    /// An empty page that can be used on its own or navigated to within a Frame.

    /// </summary>

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

         public void loadPictureList()

        {

         if(int i=1; i<9; i++)

           {

            IstboxPictureList.Iteme.Add(1 + ".jpg");

           }

           IstboxPictureList.SelectedIndex = 0;

         }

        private void IstboxPictureList_SeletionChanged(object sender, SeletionChanged e)

        {

         imgPrivate.Sourcr = New BitmapImage(New Uri("ms-appx:///Assers/"+ lstboxPictureList.SelectedValue));

        }

        /// <summary>

        /// Invoked when this page is about to be displayed in a Frame.

        /// </summary>

        /// <param name="e">Event data that describes how this page was reached.  The Parameter

        /// property is typically used to configure the page.</param>

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

           loadPictureList(); 

        }

    }

}