locked
displaying one image at a time RRS feed

  • Question

  • I want to use the Image control to show three images one at a time in a loop, but it only seems to display the last image; the Image control does not seem to show both first and second images. Is there a way to force the Image control to display each image?

    string[] names = { "first.bmp", "second.bmp", "third.bmp" };
    foreach (string name in names)
    {
       
    BitmapImage bi = new BitmapImage();
        bi.BeginInit();
        bi.UriSource =
    new Uri("image full path" + name, UriKind.RelativeOrAbsolute);
        bi.EndInit();
        image1.Source = bi;
    }

    Friday, December 26, 2008 3:32 PM

Answers

  • Hi,

     

    -->What I want to achieve is to display each image as it goes through a loop; in other words, the user should be able to see each image rather than the last one.

     

    You can use a DispatcherTimer to control the imate path by time, this means that the timer fires Tick event to show the a certain image in a special time.

    The following is a small example of using DispatcherTimer.

     

    XAML code:

    <Window x:Class="WpfTestOnShowImage.Window1"

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

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

        Title="Window2" Height="300" Width="300">

        <StackPanel>

            <Border BorderBrush="LightCyan" BorderThickness="2" Width="100" Height="100">

                <Image Name="image1"  />

            </Border>

            <Button Content="Show image" Width="80" Height="20" Click="OnShowImage" />

        </StackPanel>

    </Window>

     

    In the code behind:

    using System;

    using System.Windows;

    using System.Windows.Media.Imaging;

    using System.Windows.Threading;

    namespace WpfTestOnShowImage

    {

        public partial class Window1 : Window

        {

            int index = 0;

            public Window1()

            {

                InitializeComponent();

            }

            private void OnShowImage(object sender, RoutedEventArgs e)

            {

                DispatcherTimer time = new DispatcherTimer();

                time.Interval = TimeSpan.FromSeconds(2);

                time.Tick += TimerOnTick;

                time.Start();

            }

            void TimerOnTick(object sender, EventArgs e)

            {

                string[] names = { "apple.jpg", "banana.gif", "orange.jpg" };

                if (index == 0)

                {

                    InitializedImage(names[0]);

                    return;

                }

                if (index == 1)

                {

                    InitializedImage(names[1]);

                    return;

                }

                if (index == 2)

                {

                    InitializedImage(names[2]);

                    return;

                }

            }

            void InitializedImage(string imagePath)

            {

                BitmapImage bi = new BitmapImage();

                bi.BeginInit();

                bi.UriSource = new Uri(@"Images/" + imagePath, UriKind.Relative);

                bi.EndInit();

                image1.Source = bi;

                index++;

            }

        }

    }

     

    If you are still having some questions with, please feel free to ask.

     

    Thanks.

    Monday, December 29, 2008 6:42 AM

All replies

  • Hi lexpress,

    You iterate 3 times through your foreach loop.

    So the instance "bi" of the 1st and 2nd iteration are overwritten by the 3rd iteration.



    The easiest way to solve this problem is to use 3 images I guess :)
    (depending on what functionality you try to achieve there are many solutions)


    Kind regards,
    Wim
    Friday, December 26, 2008 4:42 PM
  • When image.source = first image is called, I expected the image to display the first image, but as you pointed out the first image gets overwritten by the second, and so on. At the end, the image only shows the last image.  What I want to achieve is to display each image as it goes through a loop; in other words, the user should be able to see each image rather than the last one. I don't want to create more than one image control. Any suggestions? I probably can use other methods such as drawing an image on a canva, etc., but have the same doubt at this point.
    Friday, December 26, 2008 4:55 PM
  • Hi,

     

    -->What I want to achieve is to display each image as it goes through a loop; in other words, the user should be able to see each image rather than the last one.

     

    You can use a DispatcherTimer to control the imate path by time, this means that the timer fires Tick event to show the a certain image in a special time.

    The following is a small example of using DispatcherTimer.

     

    XAML code:

    <Window x:Class="WpfTestOnShowImage.Window1"

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

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

        Title="Window2" Height="300" Width="300">

        <StackPanel>

            <Border BorderBrush="LightCyan" BorderThickness="2" Width="100" Height="100">

                <Image Name="image1"  />

            </Border>

            <Button Content="Show image" Width="80" Height="20" Click="OnShowImage" />

        </StackPanel>

    </Window>

     

    In the code behind:

    using System;

    using System.Windows;

    using System.Windows.Media.Imaging;

    using System.Windows.Threading;

    namespace WpfTestOnShowImage

    {

        public partial class Window1 : Window

        {

            int index = 0;

            public Window1()

            {

                InitializeComponent();

            }

            private void OnShowImage(object sender, RoutedEventArgs e)

            {

                DispatcherTimer time = new DispatcherTimer();

                time.Interval = TimeSpan.FromSeconds(2);

                time.Tick += TimerOnTick;

                time.Start();

            }

            void TimerOnTick(object sender, EventArgs e)

            {

                string[] names = { "apple.jpg", "banana.gif", "orange.jpg" };

                if (index == 0)

                {

                    InitializedImage(names[0]);

                    return;

                }

                if (index == 1)

                {

                    InitializedImage(names[1]);

                    return;

                }

                if (index == 2)

                {

                    InitializedImage(names[2]);

                    return;

                }

            }

            void InitializedImage(string imagePath)

            {

                BitmapImage bi = new BitmapImage();

                bi.BeginInit();

                bi.UriSource = new Uri(@"Images/" + imagePath, UriKind.Relative);

                bi.EndInit();

                image1.Source = bi;

                index++;

            }

        }

    }

     

    If you are still having some questions with, please feel free to ask.

     

    Thanks.

    Monday, December 29, 2008 6:42 AM
  •  

    Hi Jim,

     

    Thanks for the answer; I guess you are trying to force the Image control’s message loop to complete so that it can finish drawing the image. I actually have a situation where a thread is responsible for getting images and send them to the Image control as shown below.

    Image pump thread                                 GUI thread
    Get an image from somewhere

    Send an image via event                    --> drawing routine performs Invoke and assigns the new image to the Image.
    Wait for the next image (blocked)                    

    In this case, it might be difficult to use the DispatcherTimer; the thread’s blocking period is less than 20 ms. I need to update the image as fast as possible. Is there a way to accomplish this without using the DispatherTimer?

    Thanks.

    Wednesday, December 31, 2008 2:59 AM
  • I resolved this problem for a sprite sheet program using the following two lines of code.

    Form1.ActiveForm.Invalidate();

    panel1.Update();


    All the image controls were contained in the panel.


    All the image controls were contained in the panel.

     

    This causes the images to draw but they may only be visible for a split second.

    Wednesday, May 20, 2009 6:06 PM