使用带 Prism 的 MVVM 在 Xamarin Forms 中旋转图像的最简单方法是什么

Question

例如，在使用 ViewModel 命令单击图像时将图像旋转 180 度的最简单方法是什么？我正在使用棱镜。

由于点击背后也有一些逻辑，我尝试将其与手势识别器和事件处理程序混合使用，但它们不能很好地协同工作。

Answer 1

您可能会发现 Dave Britch 的行为库对此很有用。它在他的博客中有描述：

https://www.davidbritch.com/2016/07/xamarinforms-behaviors-rotateaction.html

来自他博客的截图：

下面的代码示例演示了使用 EventHandlerBehavior 和 RotateAction 类来实现在 X、Y 和 Z 轴上同时旋转 Image 控件的复合动画：

<Image x:Name="image" Source="monkey.png" Opacity="0" VerticalOptions="CenterAndExpand" />
<Button Text="Run Animation">
    <Button.Behaviors>
        <behaviors:EventHandlerBehavior EventName="Clicked">
            <!-- Compound Animation -->
            <behaviors:RotateAction TargetObject="{x:Reference image}" 
                                    Duration="600000" 
                                    FinalAngle="110520" />
            <behaviors:RotateAction TargetObject="{x:Reference image}" 
                                    Duration="600000" 
                                    FinalAngle="90360" 
                                    Axis="X" />
            <behaviors:RotateAction TargetObject="{x:Reference image}" 
                                    Duration="600000" 
                                    FinalAngle="71640" 
                                    Axis="Y" />
        </behaviors:EventHandlerBehavior>
    </Button.Behaviors>
</Button>

Answer 2

您可以在视图模型中定义一个新的属性来指示图像是否应该旋转：

private bool _showImageRotated;
public bool ShowImageRotated
{
    get => _showImageRotated;
    set => SetProperty(ref _showImageRotated, value);
}

然后，在您的 XAML 代码中，您可以使用从布尔值到双 – Rotation 属性 expects the degrees of the rotation as a double.

为此，定义一个新转换器：

public class BooleanToDegreesConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? 180 : 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

在您的 App.xaml 文件中注册此新转换器：

<converters:BooleanToDegreesConverter x:Key="BooleanToDegrees" />

然后使用它将图像的 Rotation 属性绑定到您在视图模型中定义的新布尔值属性：

<Image
    ...
    Rotation="{Binding ShowImageRotated, Converter={StaticResource BooleanToDegrees}}"
    ... />

执行此操作后，根据属性 ShowImageRotated.

的值，您的图像将显示为旋转或正常

方法二：用动画旋转图像

无需创建和使用转换器，您可以使用动画旋转图像，方法是将其添加到视图后面的代码中：

private YourViewModel _viewModel;

...

protected override void OnBindingContextChanged()
{
    base.OnBindingContextChanged();

    if (_viewModel != null)
    {
        _viewModel.PropertyChanged -= OnViewModelPropertyChanged;
    }

    _viewModel = BindingContext as YourViewModel;

    if (_viewModel != null)
    {
        // Subscribe to the viewmodel property changes to know when to start 
        // the rotation
        _viewModel.PropertyChanged += OnViewModelPropertyChanged;

        // Set the intial rotation angle
        YourImage.Rotation = _viewModel.ShowImageRotated ? 180 : 0;
    }
}

private void OnViewModelPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    switch (e.PropertyName)
    {
        case nameof(YourViewModel.ShowImageRotated):
            // If the property ShowImageRotated changes, start the animation
            RotateImageWithAnimation();
            break;
    }
}

private void RotateImageWithAnimation()
{
    if (_viewModel != null)
    {
        var startAngle = _viewModel.ShowImageRotated ? 0 : 180;
        var endAngle = _viewModel.ShowImageRotated ? 180 : 0;
        new Animation(v => YourImage.Rotation = v, startAngle, endAngle).Commit(this, "Image rotation");
    }
}

希望对您有所帮助！

使用带 Prism 的 MVVM 在 Xamarin Forms 中旋转图像的最简单方法是什么

What is the easiest way to rotate an image in Xamarin Forms using MVVM with Prism

xaml

prism

rotation

mvvm

xamarin.forms

方法二：用动画旋转图像