John has developed a Windows Store app for viewing images. The following figure shows the UI of the app. The UI of the App The app has the following functionalities: The users are able to select an image from the Image List section.

John has developed a Windows Store app for viewing images. The following figure shows the UI
of the app.
The UI of the App

The app has the following functionalities:
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.
Now, John has been assigned the task to add the fadein and fadeout animation effects for the
preview of the image. This implies that whenever the user selects an image in Image List, the
currently-displayed image fades out and the selected image fades-in into the UI.
Help John add the preceding functionality to the app.


Solution;

XAML code:

<Page
    x:Class="Exercise01.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Exercise01"
    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}" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Content="Image List" HorizontalAlignment="Left" Margin="10,10,0,0" BorderThickness="0" FontSize="24" Background="Blue" VerticalAlignment="Top" Width="315"/>
        <ListBox x:Name="lstboxPictureList" HorizontalAlignment="Left" Height="697" Margin="10,61,0,0" VerticalAlignment="Top" Width="315" SelectionChanged="lstboxPictureList_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.Resources>
       <Storyboard x:Name="fadeInImage" Storyboard.TargetName="imgPeview">
       <FadInThemeAnimation></FadInThemeAnimation>
       </Storyboard>
       <Storyboard x:Name="fadeInImage" Storyboard.TargetName="imgPeview">
       <FadeOutThemeAnimation></FadeOutThemeAnimation>
       </Storyboard>
       </Image.Resources>
        </Image>
        </Button>
    </Grid>
    </Viewbox>

</Page>

========================================================================

CS code:

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Threading.Tasks;

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.Media.Imaging;

using Windows.UI.Xaml.Navigation;

using System;

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

namespace Exercise01

{

    /// <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()

        {

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

            {

                lstboxPictureList.Items.Add(i + ".jpg");

            }

            lstboxPictureList.SelectedIndex = 0;

        }

      

        /// <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();

        }

        private void lstboxPictureList_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            fadeOutImage.Begin();

        }

        private void fadeOutImage_Completed(object sender, object e)

        {

           imgPreview.Source = new BitmapImage(new uri("ms-appx:///Assets/"+ istboxPictureList.SelectedValue));

           fadeInImage.Begin();

        }

    }

}