WPF threading during an asynchronous process in VB.NET

In this article, you will see a continuous animation while processing an operation on a background thread in WPF.
  • 2836

WPF applications have two threads one for rendering and another for the UI. The rendering thread runs hidden in the background while the UI thread receives input, handles events, paints the screen, and runs application code. The UI thread queues work items inside an object called a Dispatcher.

Here I am trying to show a continuous animation while processing an operation on a background thread.

<Window x:Class="WpfApplication1.Window1"
    Title="WPF" Height="220" Width="180">
        <Storyboard  x:Key="PulseStoryboard" AutoReverse="True" >
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty=
                <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="Lime"/>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty=(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="Green"/>
    <Grid x:Name="LayoutRoot" >
            <RowDefinition Height="*"/>
            <RowDefinition Height="60" />
        <Ellipse Width="100" Height="100" Margin="10" Stroke="{x:Null}" x:Name="ellipse">
                <RadialGradientBrush GradientOrigin="0.25,0.25">
                    <GradientStop Offset="0" Color="Red"/>
                    <GradientStop Offset="1" Color="Blue"/>
        <Button Margin="10" Content="Start" Grid.Row="1" x:Name="button" Click="button_Click"/>

Code behind VB window

Imports System.Windows
Imports System.Threading
Imports System.ComponentModel
Imports System.Windows.Media.Animation
Namespace WpfApplication1
    Partial Public Class Window1
        Inherits Window
        Private pulseStoryboard As Storyboard
        Private worker As BackgroundWorker
        Public Sub New()
            pulseStoryboard = DirectCast(Me.Resources("PulseStoryboard"), Storyboard)
            pulseStoryboard.RepeatBehavior = RepeatBehavior.Forever
            worker = New BackgroundWorker()
            AddHandler worker.DoWork, New DoWorkEventHandler(AddressOf worker_DoWork)
            AddHandler worker.RunWorkerCompleted, New RunWorkerCompletedEventHandler(AddressOf worker_RunWorkerCompleted)
        End Sub
        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            pulseStoryboard.Begin(Me, True)
            button.IsEnabled = False
        End Sub
        Private Sub worker_RunWorkerCompleted(ByVal sender As Object, ByVal e As RunWorkerCompletedEventArgs)
            button.IsEnabled = True
        End Sub
        Private Sub worker_DoWork(ByVal sender As Object, ByVal e As DoWorkEventArgs)
            For i As Integer = 1 To 50
        End Sub
    End Class
End Namespace


See the Figures, which shows how ellipse changes its colour after click on start.

thread1.gif    thread2.gif    thread3.gif


I hope this will help you to understand animation during
 an asynchronous Process in WPF.


More Articles

© 2020 DotNetHeaven. All rights reserved.