Xamarin中如何实现Rectangle继承Image位置并支持数值运算

• 你在构造函数里读不到Image真实位置、尺寸的核心原因：XAML UI的布局执行是分阶段的，InitializeComponent跑完的时候，整个页面还没进入测量、排列的流程，控件返回的Width/Height是未确定状态的默认值-1，X/Y是初始值0；等页面完全渲染挂载到视觉树后，这些属性才会被填充实际值，你点按钮触发读取能拿到正确值，就是因为此时页面已经走完了全量布局流程。
• 你想实现的「Rectangle继承Image位置、支持读取后做数学运算再赋值」的需求，纯静态XAML无代码是无法实现的，因为XAML的绑定无法在布局未完成时捕获到真实的位置参数，但有两个非常成熟的落地路径。

方案1：监听布局完成事件自动同步参数（和你现有逻辑最匹配） #

这个方案完全保留你现有XAML的结构，只是把之前手动点按钮才触发的读取逻辑，换成系统在布局完成时自动触发，不需要人工操作。

• 实现步骤：
  1. 构造函数里初始化完组件后，订阅Image的SizeChanged事件，这个事件会在控件位置、尺寸被实际确定时自动触发：

  public partial class MainPage : ContentPage
  {
      public MainPage()
      {
          InitializeComponent();
          // 订阅danzo的尺寸变化事件，布局完成自动触发
          danzo.SizeChanged += OnDanzoLayoutReady;
      }
  }
  

  2. 在事件处理方法里读取真实的控件参数，执行你需要的除法、缩放、偏移等数学运算，最后把计算结果赋值给Rectangle：

  private void OnDanzoLayoutReady(object sender, EventArgs e)
  {
      // 此时可以安全读取danzo的真实X、Y、宽高
      double realPosX = danzo.X;
      double realPosY = danzo.Y;
      double realWidth = danzo.Width;
      double realHeight = danzo.Height;
  
      // 在这里写你需要的数学运算，比如位置做偏移、尺寸按比例缩放
      // 举例：把Rectangle的X位置设为Image的1/2，Y位置设为Image的1/3，宽高是Image的0.8倍
      double targetRectX = realPosX / 2;
      double targetRectY = realPosY / 3;
      double targetRectW = realWidth * 0.8;
      double targetRectH = realHeight * 0.8;
  
      // 把计算好的Bounds赋值给Rectangle，AbsoluteLayout下两种写法都可以
      AbsoluteLayout.SetLayoutBounds(cropRect, new Rect(targetRectX, targetRectY, targetRectW, targetRectH));
  }
  

• 注意点：你现在给两个控件设置的AbsoluteLayout.LayoutFlags="PositionProportional"，代表只有位置是按容器比例计算的，宽高是固定值200；如果需要让Rectangle的尺寸也响应计算结果，记得把cropRect的LayoutFlags改成All，不然Bounds里设置的宽高不会实际生效。

方案2：绑定+值转换器实现低代码同步 #

如果想尽量减少后置代码的编写量，可以把Rectangle的布局参数直接绑定到Image控件上，通过自定义值转换器完成数学运算，不需要手动写事件赋值逻辑。

• 实现步骤：
  1. 写一个简单的值转换器，接收Image控件作为输入，输出经过数学运算的布局Rect：

  public class ImageToLayoutRectConverter : IValueConverter
  {
      public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
      {
          if (value is Image targetImg)
          {
              // 在这里写你的运算逻辑，比如尺寸除以2
              double calcW = targetImg.Width / 2;
              double calcH = targetImg.Height / 2;
              return new Rect(targetImg.X, targetImg.Y, calcW, calcH);
          }
          return Rect.Zero;
      }
  
      public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
      {
          throw new NotImplementedException();
      }
  }
  

  2. 在页面资源里注册这个转换器，把Rectangle的LayoutBounds直接绑定到Image的引用上：

  <!-- 页面资源区注册转换器 -->
  <ContentPage.Resources>
      <local:ImageToLayoutRectConverter x:Key="ImgToRectConverter"/>
  </ContentPage.Resources>
  
  <!-- 修改cropRect的绑定配置 -->
  <Rectangle x:Name="cropRect"
             AbsoluteLayout.LayoutBounds="{Binding Source={x:Reference danzo}, Converter={StaticResource ImgToRectConverter}}"
             AbsoluteLayout.LayoutFlags="All"
             BackgroundColor="Orange"
             Opacity="0.5"/>
  

• 这个方案的优势是后置代码量极少，后续调整运算规则只需要修改转换器内的逻辑即可，不需要改动事件订阅的相关代码。

内容的提问来源于stack exchange，提问作者Omar Moodie