WPF Image only updates in run-time on last frame - wpf

Question

I'm new to XAML. I wrote following routine to rotate an image by a given angle (0 to 360). I put in a slider control to set the angle based on slider value. Works great! However, when running the program and clicking the 'spin' button,a For/Next loop goes from 0 to 360 and the image will only display the last angle rotation (360). I did put in a Sleep command to slow, just in case I wasn't catching the previous updates. Any help with why it won't update continuously would be greatly appreciated. Thank you.
Imports System.Threading.Thread
Imports System.Windows.Media.Imaging.BitmapImage
Class MainWindow
Private Sub Slider1_ValueChanged(sender As System.Object, e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles Slider1.ValueChanged
' ---- when I adjust manually, this works perfectly
Dim rotateTransform1 As New RotateTransform
rotateTransform1.Angle = Slider1.Value
lblAngle.Content = rotateTransform1.Angle
Image1.RenderTransform = rotateTransform1
End Sub
Private Sub btnSpin_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles btnSpin.Click
Dim spinAngle as Double
For SpinAngle 0 to 360
spinWheel(spinAngle)
Sleep(50)
Next spinAngle
End Sub
Private Sub spinWheel(ByVal spinAngle)
Dim rotateTransform1 As New RotateTransform
rotateTransform1.Angle = SpinAngle 'Slider1.Value
Image1.RenderTransform = rotateTransform1
lblAngle.Content = rotateTransform1.Angle
Image1.InvalidateVisual()
End Sub
Public Sub New()
' This call is required by the designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
' Image1.createOption = BitmapCreateOptions.IgnoreImageCache
End Sub
End Class
XAML
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="677" Width="910">
<Grid Background="#FF006903">
<Grid.RowDefinitions>
<RowDefinition Height="238*" />
<RowDefinition Height="178*" />
</Grid.RowDefinitions>
<Button Content="SPIN!" Height="23" HorizontalAlignment="Left" Margin="521,101,0,0" Name="btnSpin" VerticalAlignment="Top" Width="75" Grid.Row="1" FontFamily="Tahoma" FontSize="15" FontWeight="ExtraBold" />
<Image Height="615" Margin="32,7,0,0" Name="Image1" Stretch="None" VerticalAlignment="Top"
RenderTransformOrigin=" 0.5,0.5" Source="/rotatePicture;component/Images/purp_wheel_cropped.png"
Grid.RowSpan="2" HorizontalAlignment="Left" Width="619" />
<Slider Height="25" HorizontalAlignment="Left" Margin="127,188,0,0" Name="Slider1" VerticalAlignment="Top" Width="350" Maximum="360" Grid.Row="1" />
<Label Content="Label" Height="28" HorizontalAlignment="Left" Margin="521,175,0,0" Name="lblAngle" VerticalAlignment="Top" Width="75" Grid.Row="1" FontFamily="Tahoma" FontSize="15" FontWeight="ExtraBold" />
<Image Height="29" HorizontalAlignment="Left" Margin="535,252,0,0" Name="Image2" Stretch="Fill" VerticalAlignment="Top" Width="55" Source="/rotatePicture;component/Images/wheel_pointer.png" />
</Grid>
</Window>

Answer 1

The problem with your approach is that you are blocking the UI thread by repeatedly calling Sleep in a Click handler. WPF provides a very elegant mechanism for what you are trying to do. It's called Animation.
A method that animates the rotation of a FrameworkElement may look like shown below in C# (sorry, but I don't speak VB).
private void RotateElement(
FrameworkElement element, double from, double to, TimeSpan duration)
{
var transform = element.RenderTransform as RotateTransform;
if (transform != null)
{
var animation = new DoubleAnimation(from, to, duration);
transform.BeginAnimation(RotateTransform.AngleProperty, animation);
}
}
Note that the RotateTransform must already be contained in the RenderTransform property of the FrameworkElement. It could for example be assigned in XAML like this:
<Image RenderTransformOrigin="0.5,0.5" ...>
<Image.RenderTransform>
<RotateTransform/>
</Image.RenderTransform>
</Image>
You would call the RotateElement method in a Button Click handler like this:
private void btnSpin_Click(object sender, RoutedEventArgs e)
{
RotateElement(Image1, 0, 360, TimeSpan.FromMilliseconds(360 * 50));
}
Note also that in your Slider1_ValueChanged it is also not necessary to create a new RotateTransform every time.
Moreover, there is rarely any need to call InvalidateVisual, as you do in spinWheel.

Answer 2

Clemens answer is good. Do not forget that you can pause/resume animations but only if you create them in code-behind. If I remember correctly you can't control animations if you start them in XAML.