Какой самый простой способ повернуть изображение в Xamarin Forms, используя MVVM с Prism

Question

Какой самый простой способ, например, повернуть изображение на 180 градусов при нажатии на изображение с помощью команды из ViewModel? Я использую Prism.

Так как за щелчком также есть некоторая логика, я попытался смешать ее с Gesture Regognizer и обработчиком событий, но это не очень хорошо работает вместе.

Answer 1

Вы можете определить новое свойство в вашей модели представления, чтобы указать, нужно ли повернуть изображение:

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

Затем в своем коде XAML вы можете привязать это свойство к свойству Rotation вашего *Элемент 1005 *, использующий преобразователь из логического значения в двойное - свойство Rotation ожидает степень поворота в виде двойного .

. Для этого определите новый преобразователь:

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 вашего изображения с новым логическим свойством, которое вы определили в вашемviewmodel:

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

После этого ваше изображение будет отображаться либо повернутым, либо нормальным в зависимости от значения свойства ShowImageRotated.

Подход 2. Поворот изображения с анимацией

Вместо того, чтобы создавать и использовать конвертер, вы можете вращать изображение с помощью анимации, добавив его к коду позади вашего вида:

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");
    }
}

Надеюсь, это поможет!

Answer 2

Для этого вам может пригодиться Библиотека поведения Дейва Брича.Это описано в его блоге здесь:

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

Фрагмент из его блога:

В следующем примере кода демонстрируется использование классов EventHandlerBehavior и RotateAction для реализациисоставная анимация, которая одновременно вращает элемент управления изображением по осям X, Y и Z:

<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>