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: