WPF中实现图像传感器与MVVM控件间斜线绘制的最优方案

阿华AIGC实验室

2026-4-30

最优解决方案：保留Grid布局+叠加Canvas绘制斜线

你遇到的问题很典型——既要利用Grid的强大布局能力定位控件，又要自由绘制斜线连接不同位置的元素。我推荐的最优方案是在Grid中叠加一个Canvas专门负责绘制连接线，这样控件的定位逻辑完全保留，线条绘制又能不受Grid单元格的限制，实现精准的斜线连接。

具体实现步骤

1. 修改XAML，添加用于绘制线条的Canvas

首先在你的Grid中添加一个覆盖整个Grid范围的Canvas，确保它不会遮挡其他控件的交互（设置Background="Transparent"）：

<Window x:Class="WpfHouseExample.Views.MainView" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:local="clr-namespace:WpfHouseExample.Views" 
        mc:Ignorable="d" 
        Background="Transparent" 
        Title="MainView" 
        Height="450" 
        Width="300"
        Loaded="Window_Loaded"
        SizeChanged="Window_SizeChanged">
    <Grid ShowGridLines="True">
        <!-- 新增Canvas，覆盖所有行列 -->
        <Canvas x:Name="connectionCanvas" Grid.RowSpan="10" Grid.ColumnSpan="6" Background="Transparent"/>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <!-- 显示控件 -->
        <ContentControl Grid.Row="2" Grid.Column="0" Grid.RowSpan="2" x:Name="Humidity1" Margin="0,0,0,2" HorizontalAlignment="Right"/>
        <ContentControl Grid.Row="6" Grid.Column="0" Grid.RowSpan="2" x:Name="Humidity2" Margin="0,0,0,2"/>
        <ContentControl Grid.Row="2" Grid.Column="5" Grid.RowSpan="2" x:Name="Humidity3" Margin="0,0,0,2"/>
        <ContentControl Grid.Row="6" Grid.Column="5" Grid.RowSpan="2" x:Name="Humidity4" Margin="0,0,0,2"/>
        
        <!-- 房屋图片 -->
        <Image Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="10" Source="pack://application:,,,/Images/House.png" Margin="20"/>
        
        <!-- 传感器Ellipse，添加命名方便后台引用 -->
        <Ellipse x:Name="Sensor1" Width="20" Height="20" Fill="LightGreen" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="3" Grid.RowSpan="2"/>
        <Ellipse x:Name="Sensor2" Width="20" Height="20" Fill="LightGreen" Grid.Column="3" Grid.ColumnSpan="2" Grid.Row="3" Grid.RowSpan="2"/>
        <Ellipse x:Name="Sensor3" Width="20" Height="20" Fill="LightGreen" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="5" Grid.RowSpan="2"/>
        <Ellipse x:Name="Sensor4" Width="20" Height="20" Fill="LightGreen" Grid.Column="3" Grid.ColumnSpan="2" Grid.Row="5" Grid.RowSpan="2"/>
    </Grid>
</Window>

2. 后台代码实现线条绘制逻辑

在窗口的Loaded和SizeChanged事件中，计算每个显示控件和对应传感器的中心位置，然后创建Line添加到Canvas中：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfHouseExample.Views
{
    public partial class MainView : Window
    {
        public MainView()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            // 绘制所有连接线
            DrawConnection(Humidity1, Sensor1);
            DrawConnection(Humidity2, Sensor2);
            DrawConnection(Humidity3, Sensor3);
            DrawConnection(Humidity4, Sensor4);
        }

        private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            // 窗口大小变化时重新绘制线条
            connectionCanvas.Children.Clear();
            DrawConnection(Humidity1, Sensor1);
            DrawConnection(Humidity2, Sensor2);
            DrawConnection(Humidity3, Sensor3);
            DrawConnection(Humidity4, Sensor4);
        }

        private void DrawConnection(FrameworkElement displayControl, FrameworkElement sensor)
        {
            if (displayControl == null || sensor == null) return;

            // 获取显示控件的中心位置（转换到Canvas坐标系）
            Point displayCenter = displayControl.TranslatePoint(
                new Point(displayControl.ActualWidth / 2, displayControl.ActualHeight / 2), 
                connectionCanvas);

            // 获取传感器的中心位置（转换到Canvas坐标系）
            Point sensorCenter = sensor.TranslatePoint(
                new Point(sensor.ActualWidth / 2, sensor.ActualHeight / 2), 
                connectionCanvas);

            // 创建连接线
            Line connectionLine = new Line
            {
                Stroke = Brushes.LightGreen,
                StrokeThickness = 2,
                X1 = displayCenter.X,
                Y1 = displayCenter.Y,
                X2 = sensorCenter.X,
                Y2 = sensorCenter.Y
            };

            connectionCanvas.Children.Add(connectionLine);
        }
    }
}