Updating WPF control in "real time"

Question

I'm writing an application which will display the current image seen by a camera and it needs to update the shown image in real time, or close to it. Essentially, I have a camera with which I can capture images and I need to capture one every, say, 1 second and display that image to the screen. Currently, my application has an Image control and I'm capturing a BitmapImage from the camera and setting this as the Image.Source. My trouble is getting this to continuously update. Unfortunately, I have no experience dealing with something like this that has to update itself forever (or until the application I'm writing is closed) and honestly there seems to be very little to none (that I have been able to unearth) on the web about doing something like this in WPF/C#. I suspect I'll have to spawn a thread to perform the image capturing, but honestly, that's part of my issue--I have very little experience working with threads and am a bit confused on how all that works. Thanks so much for any help you can provide.

Answer 1

You should read up on data binding in WPF. WPF is riddled with observer patterns to update the display as soon as a bound data item is changed. The fact that you are changing the Image.Source instead of changing the content of the image may be what's confusing things. You need to set up the image control in XAML as data-bound to a bitmap object (probably a field of your form) and then alter or reload the bitmap object as needed. The data-bound image control should redraw itself automatically with each change to the bitmap object.

Since you mention background threads, you need to be careful to modify the properties of UI elements (Image, Bitmap) only on the UI thread. If you receive a new image in the background thread and want to show it in the UI, you will need to synchronize that update to the UI thread. See Dispatcher.Invoke()

Answer 2

To make the data binding get updated properly, you can use INotifyPropertyChanged. Just add a reference to System.ComponentModel:

using System.ComponentModel;

Then inherit the interface:

MyWindow : INotifyPropertyChanged

Then add the following code:

public event PropertyChangedEventHandler PropertyChanged;

private void NotifyPropertyChanged(String info)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(info));
    }
}

Finally, add your property that you want to bind to.

private BitmapImage currentImage;
public BitmapImage CurrentImage{get{return currentImage;} set{currentImage=value;NotifyPropertyChanged("CurrentImage");}}

Finally, in your xaml, change the binding to {Binding CurrentImage} and then for the window, set the data context to relative source self... this would be a property for the window:

DataContext="{Binding RelativeSource={RelativeSource Self}}"

That should get the binding working properly. Doing things on a separate thread would require the dispatcher

Answer 3

I am in a similar situation, except that the Image is passes to my WPF client via WCF. So I have set a timer and call the WCf service every1 second. But when I assign the ImageSource to the bitmapImage the image is flickering, as in I get a white screen ,Image, whit screen, image How to make it continuous?