如何根据指定属性以最简单的方式实现Grid的旋转

给你提供一种比你现有思路更简洁的实现方案，不需要手动维护4个Grid，也不需要逐个处理子元素的旋转逻辑： #

方案核心逻辑 #

利用.NET MAUI/Xamarin.Forms的渲染变换+隐式样式实现一次性配置，全程只需要维护1个Grid：

1. 给外层Grid设置对应角度的Rotation属性，直接完成整体旋转
2. 给Grid内的所有ImageButton添加隐式样式，统一设置反向旋转，不需要逐个绑定或修改
3. 调整Grid的偏移量保证旋转后尺寸和位置与原始状态完全一致

完整代码实现 #

第一步：修改Page类的构造逻辑 #

class Page
{
    private Color Color;
    private Grid Grid;
    private Figure[] _figures;

    public Page (Figure[] Figures, Color color)
    {
        _figures = Figures;
        Color = color;
        InitializeGrid();
        LoadImageButtons();
        AdjustRotation();
    }

    private void InitializeGrid()
    {
        // 可根据实际需求修改Grid的行列定义，示例为2行2列布局
        Grid = new Grid
        {
            RowDefinitions =
            {
                new RowDefinition { Height = GridLength.Star },
                new RowDefinition { Height = GridLength.Star }
            },
            ColumnDefinitions =
            {
                new ColumnDefinition { Width = GridLength.Star },
                new ColumnDefinition { Width = GridLength.Star }
            },
            // 隐式样式统一控制所有子ImageButton的旋转属性，无需逐个修改
            Resources = new ResourceDictionary
            {
                new Style(typeof(ImageButton))
                {
                    Setters =
                    {
                        new Setter { Property = ImageButton.RotationProperty, Value = 0 }
                    }
                }
            }
        };
    }

    private void LoadImageButtons()
    {
        // 批量加载ImageButton，绑定数据源
        for (int i = 0; i < _figures.Length; i++)
        {
            var button = new ImageButton();
            // 此处可接入你需要的转换器处理ImageSource绑定
            button.SetBinding(ImageButton.SourceProperty, new Binding(nameof(Figure.Source), source: _figures[i]));
            // 按数组顺序分配行列位置，可根据实际布局调整逻辑
            Grid.SetRow(button, i / 2);
            Grid.SetColumn(button, i % 2);
            Grid.Children.Add(button);
        }
    }

    private void AdjustRotation()
    {
        // 按Color属性映射对应旋转角度，可根据实际需求调整映射规则
        int rotationAngle = Color switch
        {
            var c when c == Color.Red => 90,
            var c when c == Color.Blue => 180,
            var c when c == Color.Green => 270,
            _ => 0
        };
        // 外层Grid执行旋转
        Grid.Rotation = rotationAngle;
        // 统一修改子元素旋转角度为反向，保证图片显示方向正常
        ((Style)Grid.Resources[typeof(ImageButton)]).Setters.First(s => s.Property == ImageButton.RotationProperty).Value = -rotationAngle;
        
        // 旋转90/270度时调整偏移，保证Grid尺寸和位置与原始状态一致
        if (rotationAngle is 90 or 270)
        {
            Grid.TranslationX = (Grid.Height - Grid.Width) / 2;
            Grid.TranslationY = (Grid.Width - Grid.Height) / 2;
        }
    }
}

第二步：补全Figure类的可绑定属性 #

需要将Source属性改为公共属性才能正常完成绑定：

class Figure
{
    public ImageSource Source {get; set;}
    public Figure(ImageSource source)
    {
        Source = source;
    }
}

方案优势 #

• 全程只需要维护1个Grid，不需要写重复的布局代码
• 子元素的反向旋转通过隐式样式统一处理，不需要逐个修改子元素属性
• 旋转后自动调整偏移，保证Grid的显示尺寸和原始尺寸完全一致
• 数据源完全复用同一个Figure数组，不需要额外处理数据映射

内容的提问来源于stack exchange，提问作者Luca Hafer