Link to home
Start Free TrialLog in
Avatar of David M
David M

asked on

UWP Image Slider, remove button correctly

I have a slideshow app that when a button is pressed it will cycle through  5 images.
I would like to be able to remove the need for a button and the slideshow just to start when the app is loaded.

Please see my code bellow:
ImageSlideshow.xaml
<Page
    x:Class="TimerInWindowsStoreApps.ImageSlideShow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TimerInWindowsStoreApps"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid x:Name="LayoutRoot" Background="Black">
        <Grid Margin="0,50">
            <Grid.RowDefinitions>
                <RowDefinition Height="410"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" Margin="0,0,0,10" Grid.RowSpan="2">
                <Border BorderBrush="Black" Grid.Row="0" BorderThickness="1" Width="1080">
                    <Image x:Name="ImageSource" AutomationProperties.Name="ImageSource" VerticalAlignment="Center" Stretch="Fill" Height="auto" Width="auto">
                    </Image>
                </Border>
            </StackPanel>
            <Grid x:Name="Input" Grid.Row="1" Margin="0,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Center">
                <StackPanel Orientation="Horizontal" Margin="-780,346,460,-533" RenderTransformOrigin="0.5,0.5">
                    <StackPanel.RenderTransform>
                        <CompositeTransform ScaleY="1"></CompositeTransform>
                    </StackPanel.RenderTransform>
                    <Button x:Name="playSlideshow"  Margin="0,0,10,0" Click="playSlideshow_Click" Content="Play" Height="242" Width="420" ></Button>

                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</Page>

Open in new window


ImageSlideSHow.xaml.cs

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.Media.Imaging;
using Windows.UI.Xaml.Navigation;

namespace TimerInWindowsStoreApps
{
    public sealed partial class ImageSlideShow : Page
    {
        public ImageSlideShow()
        {
            this.InitializeComponent();
        }
        DispatcherTimer playlistTimer = null;
        List<string> Images = new List<string>();
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            Images.Add("1.png");
            Images.Add("2.png");
            Images.Add("3.png");
            Images.Add("4.png");
            Images.Add("5.png");
            playlistTimer = new DispatcherTimer();
            playlistTimer.Interval = new TimeSpan(0, 0, 5);
            playlistTimer.Tick += playlistTimer_Tick;
            ImageSource.Source = new BitmapImage(new Uri("ms-appx:///Assets/" + Images[count]));
        }
        int count = 0;
        void playlistTimer_Tick(object sender, object e)
        {
            if (Images != null)
            {
                if (count == Images.Count - 1)
                    count = 0;
                if (count < Images.Count)
                {
                    count++;
                    ImageRotation();
                }
            }
        }
        private void ImageRotation()
        {
            ImageSource.Source = new BitmapImage(new Uri("ms-appx:///Assets/" + Images[count].ToString()));
        }
        private void playSlideshow_Click (object sender, RoutedEventArgs e)
        {
            if (Images != null)
            {
                playlistTimer.Start();
            }
        }
        private void pauseSlideshow_Click(object sender, RoutedEventArgs e)
        {
            if (Images != null)
            {
                playlistTimer.Stop();
            }
        }
        private void previousItem_Click(object sender, RoutedEventArgs e)
        {
            if (Images != null)
            {
                count--;
                if (count >= 0)
                {
                    ImageRotation();
                }
                else
                {
                    count = Images.Count - 1;
                    ImageRotation();
                }
            }
        }

        private void nextItem_Click(object sender, RoutedEventArgs e)
        {
            if (Images != null)
            {
                count++;
                if (count < Images.Count)
                {
                    ImageRotation();
                }
                else
                {
                    count = 0;
                    ImageRotation();
                }
            }
        }
    }
}

Open in new window


i have seen a solutions here:
https://stackoverflow.com/questions/15775055/how-to-run-method-after-page-load-is-complete-in-metro-app
but iv been unable to implement it

i am still learning this stuff so any help is greatly appreciated.
Avatar of David M
David M

ASKER

ASKER CERTIFIED SOLUTION
Avatar of David M
David M

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial