如何在Xamarin Android(Mvvm Cross)的GridView中批量旋转图片

嘿，这个需求其实挺清晰的，咱们用Mvvm Cross的MVVM思路来一步步实现就行，核心就是让ViewModel驱动每个图片项的旋转状态，然后通过绑定让视图自动更新，完全符合Mvvm Cross的设计理念。

第一步：改造Model，添加旋转状态属性 #

首先，你的图片Model需要新增一个旋转角度的属性，并且要实现属性变更通知，这样ViewModel更新角度时，视图能立刻感知到。咱们直接继承Mvvm Cross的MvxNotifyPropertyChanged来简化实现：

public class ImageItem : MvxNotifyPropertyChanged
{
    // 你原来的图片属性（比如本地路径、URL或者Drawable资源名）
    public string ImageSource { get; set; }

    private int _rotationAngle;
    /// <summary>
    /// 图片旋转角度（0-359）
    /// </summary>
    public int RotationAngle
    {
        get => _rotationAngle;
        set => SetProperty(ref _rotationAngle, value);
    }
}

第二步：在ViewModel中实现旋转命令 #

接下来，ViewModel需要创建两个命令，分别对应顺时针和逆时针旋转，然后在命令执行时遍历所有图片项，更新它们的旋转角度：

public class YourGridViewViewModel : MvxViewModel
{
    // 绑定到GridView的图片集合，用ObservableCollection保证集合变更通知
    private ObservableCollection<ImageItem> _imageItems;
    public ObservableCollection<ImageItem> ImageItems
    {
        get => _imageItems;
        set => SetProperty(ref _imageItems, value);
    }

    // 顺时针旋转命令
    public ICommand RotateClockwiseCommand { get; }
    // 逆时针旋转命令
    public ICommand RotateCounterClockwiseCommand { get; }

    public YourGridViewViewModel()
    {
        // 初始化你的图片集合（这里模拟加载数据，替换成你实际的数据源）
        ImageItems = new ObservableCollection<ImageItem>
        {
            new ImageItem { ImageSource = "your_image_1" },
            new ImageItem { ImageSource = "your_image_2" },
            // ...更多图片项
        };

        // 初始化命令
        RotateClockwiseCommand = new MvxCommand(ExecuteRotateClockwise);
        RotateCounterClockwiseCommand = new MvxCommand(ExecuteRotateCounterClockwise);
    }

    private void ExecuteRotateClockwise()
    {
        foreach (var item in ImageItems)
        {
            // 顺时针转90度，取模360保证角度在0-359之间
            item.RotationAngle = (item.RotationAngle + 90) % 360;
        }
    }

    private void ExecuteRotateCounterClockwise()
    {
        foreach (var item in ImageItems)
        {
            // 逆时针转90度，加360再取模避免出现负数
            item.RotationAngle = (item.RotationAngle - 90 + 360) % 360;
        }
    }
}

第三步：布局与绑定设置 #

现在到视图层，咱们需要完成三个绑定：

1. 两个按钮绑定到ViewModel的旋转命令
2. GridView绑定到图片集合
3. GridView的每个Item中的ImageView绑定到图片源和旋转角度

主布局（比如MainLayout.axml）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 旋转按钮组 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:gravity="center">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="顺时针旋转"
            local:MvxBind="Click RotateClockwiseCommand" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="逆时针旋转"
            android:layout_marginLeft="16dp"
            local:MvxBind="Click RotateCounterClockwiseCommand" />
    </LinearLayout>

    <!-- MvxGridView自动处理集合绑定和Item模板 -->
    <MvxGridView
        android:id="@+id/imageGridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3" <!-- 根据你的需求设置列数 -->
        android:verticalSpacing="8dp"
        android:horizontalSpacing="8dp"
        android:padding="8dp"
        local:MvxBind="ItemsSource ImageItems"
        local:MvxItemTemplate="@layout/image_grid_item" />
</LinearLayout>

GridView的Item模板（image_grid_item.axml）

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:scaleType="centerInside" <!-- 保证图片旋转后不会变形 -->
    <!-- 绑定图片源（根据你的实际类型调整，比如DrawableName/ImageUrl等） -->
    local:MvxBind="DrawableName ImageSource; Rotation RotationAngle" />

第四步：视图代码（可选，用MvxGridView可省略） #

如果用了MvxGridView，不需要手动设置Adapter，Mvvm Cross会自动处理。如果用原生GridView，需要在Activity中设置MvxAdapter：

[MvxActivity(typeof(YourGridViewViewModel))]
public class YourGridViewActivity : MvxActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetContentView(Resource.Layout.MainLayout);

        var gridView = FindViewById<GridView>(Resource.Id.imageGridView);
        var adapter = new MvxAdapter(this, BindingContext);
        adapter.ItemTemplateId = Resource.Layout.image_grid_item;
        gridView.Adapter = adapter;
    }
}

一些注意事项 #

• 图片源绑定：如果你的图片是网络URL，把DrawableName换成ImageUrl，并且确保你已经集成了Mvvm Cross的图片加载插件（比如MvxGlidePlugin）；如果是本地文件路径，用FilePath绑定。
• 角度处理：通过取模运算保证角度始终在0-359之间，避免出现异常值。
• 性能优化：如果图片数量很多，遍历更新角度可能有点慢，可以考虑用批量通知，但一般情况下几十上百张图都没问题。

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