move a XAML border like a car meter

Question

I've got a gauge like a car counter. I put on the gauge center a XAML border like a needle.

I want to move my "needle" from 0 to desired value.

For example the 0 is -133° and my desired value is 15°. And I want to get the needle up to this desired value.

I want to move the needle degre by degre. I use a thread to do that but my needle don't move. It just at -133° and go to 15° directly.

It's the first time I use a thread in c#. I think I didn't do it correctly :)

My XAML needle:

<Border x:Name="Aiguille_Jour" Width="3" Height="45" Grid.Row="3" Grid.Column="3" Background="Black" Margin="0 0 0 40"
            VerticalAlignment="Center" HorizontalAlignment="Center" CornerRadius="120 120 0 0" RenderTransformOrigin="1 1">
        <Border.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="-133"/>
                <TranslateTransform/>
            </TransformGroup>
        </Border.RenderTransform>

        <Border.Effect>
            <DropShadowEffect BlurRadius="5" Color="Black" ShadowDepth="0"/>
        </Border.Effect>
    </Border>

private void Recup_ET_Affiche_Data()
{
    //other code before....
    //
    Thread thread = new Thread(() =>
    {
        for(int i= -133; i <= 15; i++)
        {
            this.Dispatcher.Invoke(() =>
            {
                Update(i);
            });
        }
        
    });
    thread.Start();
    
    //Other code after...
    //
}

private void Update(int i)
{
    RotateTransform rt_Jour = new RotateTransform(i);
    Aiguille_Jour.RenderTransform = rt_Jour;
    Thread.Sleep(10);
}

The other code is to put data in other objects in my window.

should I refresh the display?

Thank you in advance

Just a guess, but maybe you can try `for(int i= -133; i <= 15; i++) { int temp = i; this.Dispatcher.Invoke(() => { Update(temp); }); }` — SomeBody, Oct 20 '20 at 07:28
@Franck: Good. Here are more information why you need this temporary variable: https://stackoverflow.com/questions/271440/captured-variable-in-a-loop-in-c-sharp — SomeBody, Oct 20 '20 at 08:30

score 0 · Accepted Answer · answered Oct 20 '20 at 12:36

I solved my problem.

instead of using a border like a needle, i use an image of a needle (more simple)

And I implemente the animation of the image with WPF animation. (more simple too) [here] https://learn.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/animation-overview?view=netframeworkdesktop-4.8

My border was replace by :

<Image x:Name="AiguilleJour" Source="Aiguille.png" Grid.Row="3" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center" Panel.ZIndex="500"
           Height="45" Margin="0 0 0 40" RenderTransformOrigin="0.5 1">
        <Image.RenderTransform>
            <RotateTransform x:Name="RotationJour"/>
        </Image.RenderTransform>
    </Image>

My thread was replace by :

var rotationAnimation = new DoubleAnimation(-133, 15, TimeSpan.FromSeconds(1.5));
        RotationJour.BeginAnimation(RotateTransform.AngleProperty, rotationAnimation);

Thank you for the help.

move a XAML border like a car meter

1 Answers1