如何旋转动态加载至ListView列表视图中的图片

To dynamically rotate images in your ListView, you’ll need to bind the Rotation property of each Image to a property in your item view model, then update that property when you want to trigger rotation. Here’s a step-by-step breakdown:

1. Update Your XAML to Bind the Rotation Property #

First, modify the Image element in your ListView’s DataTemplate to bind its Rotation property. This lets each image’s rotation state be controlled by the corresponding item in your data source:

<ListView Grid.Row="1" x:Name="invList" ItemSelected="invListSelected" RowHeight="50" VerticalOptions="FillAndExpand">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="64"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="64"/>
                    </Grid.ColumnDefinitions>
                    <!-- Add Rotation binding and x:Name for animation access -->
                    <Image x:Name="ItemImage"
                           Grid.Column="0" 
                           Source="{Binding ImageSource}" 
                           Rotation="{Binding ImageRotation}"
                           VerticalOptions="Center" 
                           HorizontalOptions="Center"/>
                    <!-- Rest of your Grid content here -->
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

2. Add a Rotation Property to Your Item View Model #

Each item in your ListView needs to track its own rotation angle. Create a view model class for your list items that implements INotifyPropertyChanged so the UI updates when the rotation value changes:

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

public class InventoryItem : INotifyPropertyChanged
{
    // Your existing properties (e.g., image source, item details)
    public string ImageSource { get; set; }

    private double _imageRotation;
    public double ImageRotation
    {
        get => _imageRotation;
        set
        {
            if (_imageRotation != value)
            {
                _imageRotation = value;
                OnPropertyChanged();
            }
        }
    }

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

3. Trigger Rotation from User Interaction #

When you want to rotate an image (e.g., on item selection), update the ImageRotation property of the selected item. For instant rotation, use this in your invListSelected handler:

private void invListSelected(object sender, SelectedItemChangedEventArgs e)
{
    var selectedItem = e.SelectedItem as InventoryItem;
    if (selectedItem == null) return;

    // Rotate 90 degrees clockwise (adjust the value as needed)
    selectedItem.ImageRotation += 90;

    // Optional: Deselect the item after rotation
    invList.SelectedItem = null;
}

4. Add Smooth Animation (Optional) #

For a smooth, animated rotation, use Xamarin.Forms’ animation API. You’ll need the x:Name we added to the Image element to access it directly:

private async void invListSelected(object sender, SelectedItemChangedEventArgs e)
{
    var selectedItem = e.SelectedItem as InventoryItem;
    if (selectedItem == null) return;

    // Get the selected ViewCell and find the Image
    var listView = sender as ListView;
    var viewCell = listView.TemplatedItems.GetItem<ViewCell>(listView.SelectedItem);
    var image = viewCell.FindByName<Image>("ItemImage");

    if (image != null)
    {
        // Animate rotation to the new angle over 500ms
        await image.RotateTo(selectedItem.ImageRotation + 90, 500);
        // Update the view model to persist the new rotation state
        selectedItem.ImageRotation += 90;
    }

    invList.SelectedItem = null;
}

Key Notes #

• Each item maintains its own rotation state, so rotating one image won’t affect others.
• For continuous rotation (e.g., a spinning icon), you can loop the RotateTo animation or update the ImageRotation property in a timer.
• Ensure your ListView’s data source is a collection of InventoryItem instances (or your equivalent view model) for bindings to work correctly.

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