首页 > 其他分享 >打造真实感十足的速度表盘:WPF实现动态效果与刻度绘制

打造真实感十足的速度表盘:WPF实现动态效果与刻度绘制

时间:2024-03-16 09:45:33浏览次数:16  
标签:表盘 System 动态效果 刻度 using WPF 绘制 指针

 

概述:这个WPF项目通过XAML绘制汽车动态速度表盘,实现了0-300的速度刻度,包括数字、指针,并通过定时器模拟速度变化,展示了动态效果。详细实现包括界面设计、刻度绘制、指针角度计算等,通过C#代码与XAML文件结合完成。

  1. 新建 WPF 项目: 在 Visual Studio 中创建一个新的 WPF 项目。
  2. 设计界面: 使用 XAML 设计速度表的界面。你可以使用 Canvas 控件来绘制表盘、刻度、指针等。确保设置好布局和样式。
<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Speedometer" Height="400" Width="400">
    <Grid>
        <Canvas>
            <!-- 绘制表盘、刻度等元素 -->
        </Canvas>
    </Grid>
</Window>
  1. 绘制表盘和刻度: 在 Canvas 中使用 Ellipse 绘制表盘,使用 Line 绘制刻度。同时,添加数字标签。
<Ellipse Width="300" Height="300" Fill="LightGray" Canvas.Left="50" Canvas.Top="50"/>
<Line X1="200" Y1="100" X2="200" Y2="50" Stroke="Black" StrokeThickness="2"/>
<TextBlock Text="0" Canvas.Left="180" Canvas.Top="90"/>
<!-- 添加其他刻度和数字标签 -->
  1. 实现动态效果: 在代码文件中,使用定时器或者动画来实现指针的动态变化效果。在 MainWindow.xaml.cs 文件中添加以下代码:
using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace YourNamespace
{
    public partial class MainWindow : Window
    {
        private double currentSpeed = 0;
        private const double MaxSpeed = 300;

        private readonly Line speedPointer;

        public MainWindow()
        {
            InitializeComponent();
            
            // 初始化指针
            speedPointer = new Line
            {
                X1 = 200,
                Y1 = 200,
                Stroke = Brushes.Red,
                StrokeThickness = 3
            };
            canvas.Children.Add(speedPointer);

            // 使用定时器更新速度
            var timer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(100) };
            timer.Tick += Timer_Tick;
            timer.Start();
        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            // 模拟速度变化
            currentSpeed = currentSpeed < MaxSpeed ? currentSpeed + 5 : 0;

            // 更新指针角度
            UpdateSpeedometer();
        }

        private void UpdateSpeedometer()
        {
            // 计算指针角度
            double angle = currentSpeed / MaxSpeed * 270 - 135;

            // 使用 RotateTransform 旋转指针
            var rotateTransform = new RotateTransform(angle);
            speedPointer.RenderTransform = rotateTransform;
        }
    }
}

这个例子中,我们使用了一个定时器(DispatcherTimer)来模拟速度的变化,并在定时器的 Tick 事件中更新指针的角度。UpdateSpeedometer 方法根据当前速度计算出指针的角度,并使用 RotateTransform 进行旋转。

确保在 MainWindow.xaml 文件中的 Canvas 中添加了名称为 canvas 的属性:

<Canvas x:Name="canvas">
    <!-- 绘制其他元素 -->
</Canvas>

运行效果如:

 

这是一个基本的实例,你可以根据需要进一步优化和扩展,例如添加动画效果、改进界面设计等。

 

源代码获取:https://pan.baidu.com/s/1J4_nbFklHbpqsgfwAfTiIw?pwd=6666

 

标签:表盘,System,动态效果,刻度,using,WPF,绘制,指针
From: https://www.cnblogs.com/hanbing81868164/p/18076722

相关文章

  • WPF中轻松操控GIF动画:WpfAnimatedGif库详解
    概述:在WPF中使用`WpfAnimatedGif`库展示GIF动画,首先确保安装了该库。通过XAML设置Image控件,指定GIF路径,然后在代码中使用库提供的方法实现动画控制。这简化了在WPF应用中处理GIF图的过程,提供了方便的接口来管理动画播放和暂停。当使用 WpfAnimatedGif 库在WPF中显示GIF图动......
  • WPF线程模型
    1.渲染系统概述WPF采用保留模式渲染系统(RetainedModeRenderingSystem),该系统可分为UI线程和复合线程两个主要部分,两者协作完成WPF应用程序的渲染工作。1.1立即模式GUI和保持模式GUI图形API可分为保留模式API和即时模式API。Direct2D是一种即时模式API。WPF......
  • WPF 禁止程序重复运行
    Location:App.xaml.csCode:添加如下代码privatestaticSystem.Threading.Mutexmutex;//系统能够识别有名称的互斥,因此可以使用它禁止应用程序启动两次//第二个参数可以设置为产品的名称:Application.ProductName//每次启动应用程序,都会验证名称......
  • WPF —— Grid网格布局
    1:Grid网格布局简介Grid为WPF中最常用的布局容器,作为View中的主要组成部分,负责框架中整体的页面布局。2:网格标签Grid.ColumnDefGrid.ColumnDefinitions自定义列只能设置宽度不能设置高度ColumnDefinition每一个列可以设置宽度,宽度可以是一个具体值也可以设置*的意......
  • 【C#】WPF获取屏幕分辨率
    SystemParameters提供的接口,其实是获取渲染过程中的实际高宽,是受系统DPI设置的影响。以1920*1080和125%DPI为例:分辨率高度:1080,实际获取的高度为:864。分辨率宽度:1920,实际获取的宽度为:1536。 结果展示代码需要额外的包 usingSystem.Drawing;usingSystem;using......
  • WPF绘图指南:用XAML轻松实现圆、线、矩形、文字、图片创意元素
     概述:在WPF中,通过使用不同的元素如Ellipse、Line、Rectangle等,可以轻松绘制各种图形,包括圆、线条、椭圆、矩形、多边形等。同时,通过TextBlock展示文字,Image展示图片,以及Path创建路径和曲线,使得图形的绘制变得灵活多样。通过简单的XAML代码,开发者可以快速构建各种图形和界面元......
  • 探究WPF中文字模糊的问题:TextOptions的用法
    有网友问WPF中一些文字模糊是什么问题。之前我也没有认真思考过这个问题,只是大概知道和WPF的像素对齐(pixelsnapping)、抗锯齿(anti-aliasing)有关,通过设置附加属性TextOptions.TextFormattingMode或者TextOptions.TextRenderingMode来解决。这次我也查了下资料,了解了这几个附加属性......
  • wpf datagrid row background color alternatively changed based on row index,Alter
    <Windowx:Class="WpfApp7.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.c......
  • WPF RichTextBox 文本超过限定行数移除旧数据
    在使用serilog.sinks.richtextbox显示日志时,会需要移除旧的日志信息的需求,实现打码如下;根据换行符“\n”进行判断; privatevoidCheckAndRemoveText(){intnewLineCount=0;boolremoveText=false;foreach(Paragraphparagraphin_richTex......
  • WPF 实现文件/文件夹监听工具
    参考gpt环境软件/系统版本说明WindowsWindows10专业版22H219045.4046MicrosoftVisualStudioMicrosoftVisualStudioCommunity2022(64位)-17.6.5Microsoft.NetSDK8.0.101手动安装Microsoft.NetSDK7.0.306MicrosoftVisualStudio......