WPF中ItemsControl与Canvas的坐标百分比存储及跨容器加载问题

嘿，刚好我之前处理过类似的需求，给你一步步拆解怎么实现：

1. 先搞定数据模型：存储相对比例而非绝对坐标 #

首先你需要一个专门的类来保存相对于容器尺寸的比例值（0到1之间），而不是原始的绝对像素坐标。这样不管容器多大，都能算出对应的位置：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class RelativePoint : INotifyPropertyChanged
{
    private double _relativeX;
    private double _relativeY;

    // 0-1之间的比例值，比如0.1就是容器宽度的10%
    public double RelativeX
    {
        get => _relativeX;
        set { _relativeX = Math.Clamp(value, 0, 1); OnPropertyChanged(); }
    }

    public double RelativeY
    {
        get => _relativeY;
        set { _relativeY = Math.Clamp(value, 0, 1); OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

这里用Math.Clamp把比例值限制在0-1之间，防止点跑到容器外面去。

2. 在第一个容器（ContainerA）中，把绝对坐标转成相对比例保存 #

假设你是通过鼠标点击在ContainerA的Canvas上添加点，那就在点击事件里把鼠标的绝对坐标转换成相对比例：

private void ContainerA_MouseDown(object sender, MouseButtonEventArgs e)
{
    var container = sender as ItemsControl;
    // 避免容器还没加载完成（宽高为0）的情况
    if (container == null || container.ActualWidth <= 0 || container.ActualHeight <= 0)
        return;

    // 获取鼠标在容器内的绝对坐标
    var absolutePos = e.GetPosition(container);
    // 转换为相对比例
    var relativeX = absolutePos.X / container.ActualWidth;
    var relativeY = absolutePos.Y / container.ActualHeight;

    // 把相对点加入你的ViewModel集合（假设用MVVM模式）
    var vm = DataContext as YourViewModel;
    vm.SavedRelativePoints.Add(new RelativePoint { RelativeX = relativeX, RelativeY = relativeY });

    // 这里可以加序列化保存逻辑，比如用Newtonsoft.Json把SavedRelativePoints存到文件/数据库
    // File.WriteAllText("points.json", JsonConvert.SerializeObject(vm.SavedRelativePoints));
}

3. 在第二个容器（ContainerB）中，把相对比例转成新容器的绝对坐标 #

这一步的关键是用MultiValueConverter，绑定相对比例和容器的实际宽高，实时计算出当前容器内的绝对坐标：

先写Converter： #

using System;
using System.Globalization;
using System.Windows.Data;

public class RelativeToAbsoluteConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        // values[0]是RelativeX/RativeY，values[1]是容器的ActualWidth/ActualHeight
        if (values.Length != 2 || 
            !(values[0] is double relativeValue) || 
            !(values[1] is double containerSize) ||
            containerSize <= 0)
            return 0;

        // 计算绝对坐标
        return relativeValue * containerSize;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        // 如果需要从绝对坐标转回相对比例，再实现这个方法，这里暂时用不到
        throw new NotImplementedException();
    }
}

然后是ContainerB的XAML： #

把Converter加到资源里，然后通过MultiBinding把相对比例和容器宽高绑定到Canvas.Left/Top：

<Window.Resources>
    <local:RelativeToAbsoluteConverter x:Key="RelToAbsConverter"/>
</Window.Resources>

<ItemsControl x:Name="ContainerB" ItemsSource="{Binding SavedRelativePoints}">
    <!-- 指定ItemsPanel为Canvas -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    
    <!-- 给每个Item设置Canvas坐标 -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource RelToAbsConverter}">
                        <Binding Path="RelativeX"/>
                        <Binding ElementName="ContainerB" Path="ActualWidth"/>
                    </MultiBinding>
                </Setter.Value>
            </Setter>
            <Setter Property="Canvas.Top">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource RelToAbsConverter}">
                        <Binding Path="RelativeY"/>
                        <Binding ElementName="ContainerB" Path="ActualHeight"/>
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>
    
    <!-- 自定义点的样式 -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Width="12" Height="12" Fill="DarkBlue" Stroke="White" StrokeThickness="1"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

关键细节提醒 #

• 当ContainerB的尺寸变化时，ActualWidth/ActualHeight会自动触发绑定更新，点的位置会实时适配新尺寸，不用手动写逻辑。
• 保存数据时，直接序列化SavedRelativePoints集合即可（比如JSON、XML），完全和容器尺寸无关，通用性极强。
• 如果不是用MVVM，直接在后台代码里管理List<RelativePoint>也可以，原理是一样的。

这样就能完美实现你要的效果：在100×100的ContainerA里的(10,10)点，保存成(0.1,0.1)，加载到200×200的ContainerB里就会自动变成(20,20)，完全按比例适配～

内容的提问来源于stack exchange，提问作者yan yankelevich