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.
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"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF" Height="220" Width="180">
<Window.Resources>
<Storyboard x:Key="PulseStoryboard" AutoReverse="True" >
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty=
(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="Lime"/>
</ColorAnimationUsingKeyFrames>
<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"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="LayoutRoot" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Ellipse Width="100" Height="100" Margin="10" Stroke="{x:Null}" x:Name="ellipse">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.25,0.25">
<GradientStop Offset="0" Color="Red"/>
<GradientStop Offset="1" Color="Blue"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Button Margin="10" Content="Start" Grid.Row="1" x:Name="button" Click="button_Click"/>
</Grid>
</Window>
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()
InitializeComponent()
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)
worker.RunWorkerAsync()
button.IsEnabled = False
End Sub
Private Sub worker_RunWorkerCompleted(ByVal sender As Object, ByVal e As RunWorkerCompletedEventArgs)
button.IsEnabled = True
pulseStoryboard.[Stop](Me)
End Sub
Private Sub worker_DoWork(ByVal sender As Object, ByVal e As DoWorkEventArgs)
For i As Integer = 1 To 50
Thread.Sleep(100)
Next
End Sub
End Class
End Namespace
OUTPUT
See the Figures, which shows how ellipse changes its colour after click on start.
CONCLUSION
I hope this will help you to understand animation during an asynchronous Process in WPF.