首页 > 解决方案 > 像汽车仪表一样移动 XAML 边框

问题描述

我有一个像汽车计数器一样的仪表。我在仪表中心放置了一个像针一样的 XAML 边框。

我想将我的“针”从 0 移动到所需的值。

例如,0 是-133°,我想要的值是 15°。我想让针达到这个期望值。

我想逐级移动针。我用一根线来做,但我的针不动。它就在-133°,直接转到15°。

这是我第一次在 C# 中使用线程。我想我做得不对:)

我的 XAML 针:

<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);
}

另一个代码是将数据放在我窗口中的其他对象中。

我应该刷新显示吗?

先感谢您

标签: c#xaml

解决方案


我解决了我的问题。

我没有像针一样使用边框,而是使用针的图像(更简单)

我用 WPF 动画实现了图像的动画。(也更简单)[这里] https://docs.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/animation-overview?view=netframeworkdesktop-4.8

我的边框被替换为:

<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>

我的线程被替换为:

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

感谢您的帮助。


推荐阅读