如何阻止Grid子元素随Grid.RenderTransform缩放

这个问题我之前也碰到过！核心原因是你用了RenderTransform来缩放Grid——这种视觉变换会作用于Grid里的所有子元素，所以你的四个角按钮才会跟着一起缩放。有两种靠谱的解决办法，优先推荐第一种符合布局逻辑的方案：

放弃用CompositeTransform.ScaleX/Y来拉伸Grid，直接调整Grid的Width和Height属性。这样子元素可以通过布局对齐固定在角落，完全不会被缩放。

步骤1：给四个角按钮设置布局对齐 #

在初始化按钮时，给每个按钮设置对齐方式和边距，让它们自动固定在Grid的四个角落：

// 左上角按钮（tickBtn）
tickBtn.HorizontalAlignment = HorizontalAlignment.Left;
tickBtn.VerticalAlignment = VerticalAlignment.Top;
tickBtn.Margin = new Thickness(8); // 留边距避免贴紧边缘

// 右上角按钮（delBtn）
delBtn.HorizontalAlignment = HorizontalAlignment.Right;
delBtn.VerticalAlignment = VerticalAlignment.Top;
delBtn.Margin = new Thickness(8);

// 左下角按钮（skewBtn）
skewBtn.HorizontalAlignment = HorizontalAlignment.Left;
skewBtn.VerticalAlignment = VerticalAlignment.Bottom;
skewBtn.Margin = new Thickness(8);

// 右下角按钮（strBtn）
strBtn.HorizontalAlignment = HorizontalAlignment.Right;
strBtn.VerticalAlignment = VerticalAlignment.Bottom;
strBtn.Margin = new Thickness(8);

步骤2：修改拉伸按钮的事件处理逻辑 #

把原来修改ScaleX/Y的代码，改成直接调整Grid的尺寸：

public static void resBtn_Manip(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var grid = ImageControl; // 你的Grid控件
    if (grid == null) return;

    // 根据拖动增量计算新宽高，同时设置最小尺寸防止缩得太小
    double newWidth = grid.Width + e.Delta.Translation.X;
    double newHeight = grid.Height + e.Delta.Translation.Y;
    
    grid.Width = Math.Max(200, newWidth); // 最小宽度可按需调整
    grid.Height = Math.Max(200, newHeight); // 最小高度可按需调整
}

这种方法完全遵循WPF/UWP的布局系统，按钮位置会自动适应Grid尺寸变化，不需要额外维护变换逻辑，代码简洁又可靠。

如果因为旋转、倾斜等其他需求，必须保留RenderTransform缩放Grid的方案，那可以给每个角按钮添加反向的CompositeTransform，抵消Grid的缩放效果，让按钮保持原始大小和位置。

步骤1：给每个按钮初始化Transform #

tickBtn.RenderTransform = new CompositeTransform();
delBtn.RenderTransform = new CompositeTransform();
skewBtn.RenderTransform = new CompositeTransform();
strBtn.RenderTransform = new CompositeTransform();

步骤2：在Grid缩放时同步更新按钮的反向变换 #

每次修改Image_Drag.ScaleX/Y后，调用以下方法更新按钮的Transform：

private static void UpdateButtonTransforms()
{
    double scaleX = ImageManipulation.Image_Drag.ScaleX;
    double scaleY = ImageManipulation.Image_Drag.ScaleY;

    // 左上角按钮
    var tickTransform = tickBtn.RenderTransform as CompositeTransform;
    tickTransform.ScaleX = 1 / scaleX;
    tickTransform.ScaleY = 1 / scaleY;
    tickTransform.TranslateX = (tickBtn.ActualWidth / 2) * (1 - 1/scaleX);
    tickTransform.TranslateY = (tickBtn.ActualHeight / 2) * (1 - 1/scaleY);

    // 右上角按钮
    var delTransform = delBtn.RenderTransform as CompositeTransform;
    delTransform.ScaleX = 1 / scaleX;
    delTransform.ScaleY = 1 / scaleY;
    delTransform.TranslateX = (-delBtn.ActualWidth / 2) * (1 - 1/scaleX);
    delTransform.TranslateY = (delBtn.ActualHeight / 2) * (1 - 1/scaleY);

    // 左下角按钮
    var skewTransform = skewBtn.RenderTransform as CompositeTransform;
    skewTransform.ScaleX = 1 / scaleX;
    skewTransform.ScaleY = 1 / scaleY;
    skewTransform.TranslateX = (skewBtn.ActualWidth / 2) * (1 - 1/scaleX);
    skewTransform.TranslateY = (-skewBtn.ActualHeight / 2) * (1 - 1/scaleY);

    // 右下角按钮
    var strTransform = strBtn.RenderTransform as CompositeTransform;
    strTransform.ScaleX = 1 / scaleX;
    strTransform.ScaleY = 1 / scaleY;
    strTransform.TranslateX = (-strBtn.ActualWidth / 2) * (1 - 1/scaleX);
    strTransform.TranslateY = (-strBtn.ActualHeight / 2) * (1 - 1/scaleY);
}

// 在拉伸按钮的事件处理里调用
public static void resBtn_Manip(object sender, ManipulationDeltaRoutedEventArgs e)
{
    ImageManipulation.Image_Drag.ScaleX += e.Delta.Translation.X;
    ImageManipulation.Image_Drag.ScaleY += e.Delta.Translation.X;
    UpdateButtonTransforms(); // 添加这行同步按钮变换
}

这种方法需要处理缩放中心带来的位置偏移，逻辑稍复杂，但能保留你原来的RenderTransform方案。

内容的提问来源于stack exchange，提问作者Adam McMahon