从WPF中的计时器回调更新UI线程中的图像控件

Question

I have an image control in a Xaml file as follows:

<Viewbox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Top" HorizontalAlignment="Center">
    <Image Name="Content"/>
</Viewbox>

I'd like to update this image with a different image every 10 seconds. I create a system.threading.Timer instance, initialize it with a callback, pass in the UI control as a state object and set the interval to 10 seconds as follows:

contentTimer = new Timer(OnContentTimerElapsed, Content , 0 , (long) CONTENT_DISPLAY_TIME);

The callback looks as follows:

    private void OnContentTimerElapsed( object sender )
    {
        Image content = (Image)sender;

        //update the next content to be displayed
        nCurrentImage = (nCurrentImage % NUM_IMAGES) + 1;                        

        //get the url of the image file, and create bitmap from the jpeg
        var path = System.IO.Path.Combine(Environment.CurrentDirectory, "../../DisplayContent/Image_" + nCurrentImage.ToString() + ".jpg");
        Uri ContentURI = new Uri(path);
        var bitmap = new BitmapImage(ContentURI);

        //update the image control, by launching this code in the UI thread
        content.Dispatcher.BeginInvoke(new Action(() => { content.Source = bitmap; }));
    }

I still keep getting the following exception:

An unhandled exception of type 'System.InvalidOperationException' occurred in WindowsBase.dll
Additional information: The calling thread cannot access this object because a different thread owns it.

I was able to get a solution by updating just the numCurrentImage variable, and then updating the Content.Source in the MainWindow class in callbacks running on the UI thread, something as follows (note, I'm getting frames at 30fps from a kinect):

    int nCurrentImage;
    Public MainWindow()
    {
        InitializeComponent();

        nCurrentImage = 1;

        System.Timers.Timer contentTimer = new System.Timers.Timer(OnContentTimerElapsed, CONTENT_DISPLAY_TIME);
        contentTimer.Elapsed += OnContentTimerElapsed;

        ...
        //Some kinect related initializations
        ...
        kinect.multiSourceReader.MultiSourceFrameArrived += OnMultiSourceFrameArrived;
    }

    private void OnContentTimerElapsed( object sender )
    {            
        //update the next content to be displayed
        nCurrentImage = (nCurrentImage % NUM_IMAGES) + 1;
    }

    private void OnMultiSourceFrameArrived(object sender, MultiSourceFrameArrivedEventArgs e)
    {
        UpdateContent(nCurrentImage);
    }

   private void UpdateContent(int numImage)
    {
        var path = System.IO.Path.Combine(Environment.CurrentDirectory, "../../DisplayContent/Image_" + numImage.ToString() + ".jpg");
        Uri ContentURI = new Uri(path);
        var bitmap = new BitmapImage(ContentURI);
        Content.Source = bitmap;
    }

Even though that works, it just doesn't make good programming sense to update it that way, since half of the work is being done by one thread, and the rest by the UI thread.

Any Ideas what I'm doing wrong?

Answer 1

Even though that works, it just doesn't make good programming sense to update it that way, since half of the work is being done by one thread, and the rest by the UI thread.

Actually this is exactly what you want to be doing. You want to be doing your non-UI work in a non-UI thread, and doing your UI work in a UI thread.

That said, while this is fundamentally what you want to be doing, you don't need to do all of this yourself so explicitly. You can simply use a DispatcherTimer and it will fire the callback in the UI thread, rather than a thread pool thread. It is, more or less, doing much of what you're doing manually.

Answer 2

Update the XAML image element, I like to name them all with an X to remind me it's a XAML element.

<Image Name="XContent"/>

When timer fires,

...
bitmap.Freeze();

XContent.Dispatcher.Invoke(()=>{
   XContent.Source = bitmap;
}