Image Slider in Windows Store App

Introduction

In this article we will implement an image slider in a Metro Style Application. The feature of this image slider is that it will show the image one by one from the set of images. The slider also has buttons for going forward and backward. When the forward button is clicked the images will be shown sequentially until the last image is shown; the backward button works in the same manner except in reverse of the forward button.  

In the following we are including the entire code of the XAML file and the code behind file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2012
• File -> New -> Project
• Choose Template -> Visual C# -> Metro Style Application
• Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the MainPage.xaml and MainPage.xaml.cs files.

Step 3 : The MainPage.xaml file is as in the following code:

Code :

<Page

    x:Class="App1.MainPage"

    IsTabStop="false"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App14"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="Red">

 

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height=".083*"></RowDefinition>

            <RowDefinition Height=".333*"></RowDefinition>

            <RowDefinition Height=".033*"></RowDefinition>

            <RowDefinition Height=".133*"></RowDefinition>

            <RowDefinition Height=".333*"></RowDefinition>

        </Grid.RowDefinitions>

        <TextBlock Grid.Column="1" Grid.Row="0" Text="Image Slider in Metro Apps"

                   FontSize="30" FontWeight="ExtraBold" HorizontalAlignment="Center"

                   VerticalAlignment="Center">

        </TextBlock>

        <Image x:Name="img1" Grid.Column="1" Grid.Row="1" Source="Tulips.jpg">

        </Image>

        <Image x:Name="img2" Grid.Column="1" Grid.Row="1" Source="Desert.jpg"

               Visibility="Collapsed">

        </Image>

        <Image x:Name="img3" Grid.Column="1" Grid.Row="1" Source="Hydrangeas.jpg"

               Visibility="Collapsed">

        </Image>

        <Image x:Name="img4" Grid.Column="1" Grid.Row="1" Source="Jellyfish.jpg"

               Visibility="Collapsed">

        </Image>

        <TextBlock x:Name="txt1" FontSize="20" FontWeight="Bold" Text="Image 1"

                   Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center">

        </TextBlock>

        <Button Grid.Column="1" Grid.Row="3" Content="Backward" FontWeight="Bold"

                Background="Green" HorizontalAlignment="Left" Click="Button_Click_1">

        </Button>

        <Button Grid.Column="1" Grid.Row="3" Content="Forward" FontWeight="Bold"

                Background="Green" HorizontalAlignment="Right" Click="Button_Click_2">

        </Button>

    </Grid>

</Page>

 

Step 4 : The MainPage.xaml.cs file is as in the following code:

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;

 

namespace App1

{

    public sealed partial class MainPage : Page

    {

        int i=1;

        public MainPage()

        {

            this.InitializeComponent();

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        }

 

        private void Button_Click_1(object sender, RoutedEventArgs e)

        {

            if (i == 2)

            {

                img1.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img2.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img3.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img4.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                txt1.Text = "Image 1";

                i--;

            }

            if (i == 3)

            {

                img2.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img3.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img4.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                txt1.Text = "Image 2";

                i--;

            }

            if (i == 4)

            {

                img3.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img2.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img4.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                txt1.Text = "Image 3";

                i--;

            }

        }

 

        private void Button_Click_2(object sender, RoutedEventArgs e)

        {

 

            if (i == 3)

            {

                img4.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img2.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img3.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                txt1.Text = "Image 4";

                i++;

            }

 

            if (i == 2)

            {

                img3.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img2.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img4.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                txt1.Text = "Image 3";

                i++;

            }

            if (i == 1)

            {

                img2.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img3.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                img4.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                txt1.Text = "Image 2";

                i++;

            }

        }

    }

}

 
Step 5 : After running this code the output looks like this: