2

Quiero usar el EventHandler MouseEnter & MouseLeave para cambiar el OpasityMask de las imágenes. Algunas imágenes se generarán en tiempo de ejecución y en diferentes páginas. El punto es que necesito tener acceso al sender para cambiar la propiedad OpacityMask en el comando MouseHover en la clase ViewModel.

View

this.WendActivated(d =>
{
    d(this.BindCommand(ViewModel, 
       vm => vm.MouseHover, 
       v => v.myImage, 
       myImage.Events().MouseEnter));
});

ViewModel

private void Image_MouseEnterExecute(object sender, MouseEventArgs e)
{
    PlaySound("mouse_hover.mp3");

    var image = sender as Image;
    image.OpacityMask = new SolidColorBrush { Opacity = 1, Color = Colors.Black };
}

No sé cómo implementar ObservedChange para cambiar el OpacityMask.

public ReactiveCommand MouseHover => image_MouseEnter;
public ObservedChange<object, object> ImageBrush => imageBrush;

public ViewModel()
{
    //Can not convert method group to action.
    image_MouseEnter = ReactiveCommand.Create(Image_MouseEnterExecute);
    //Can not convert method group to action.
    imageBrush = ReactiveCommand.Create(Image_MouseEnterExecute);
}

¿Por qué no pongo un Binding a la propiedad OpacityMask? El problema es que tengo muchas imágenes, algunas creadas en tiempo de ejecución. No quiero que todas las Imágenes cambien al mismo tiempo, o que crear una propiedad OpacityMask en la clase ViewModel para cada Imagen.


Espero que alguien con experiencia me pueda ayudar.

3
  • Prueba con esto: d(this.BindCommand(ViewModel, vm => vm.MouseHover, v => v.myImage, nameof(myImage.MouseEnter)); el 30 oct. 2018 a las 16:37
  • me he dado cuenta que no soporta parametros desde el view. el 30 oct. 2018 a las 17:04
  • Porqué mezclas cosas de la parte UI en el ViewModel? edit: estás aplicando mal el concepto.
    – Luis
    el 4 nov. 2018 a las 2:05

1 respuesta 1

2

Deja ver si esto te ayuda...

Primero, cambia tu ViewModel, trata de no utilizar ninguna referencia de la vista en el VM.

Lo que intentas hacer es resposabilidad de la vista pues son cosas que afectan a la UI.

En tu vista puedes hacer:

myImage.Events().MouseEnter
    .Do(_ => PlaySound("mouse_hover.mp3"))
    .Select(e => myImage)
    .Subscribe(image => image.OpacityMask = new SolidColorBrush { Opacity = 1, Color = Colors.Black });

Recuerda que MVVM (y ReactiveUI) se tratan de separar responsabilidades, el ViewModel define la logica de negocios y de presentación, no detalles de la vista como manejo de controles.

EDIT: A ver si te sirve este código:

<Window.Resources>
    <Style TargetType="{x:Type Image}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Opacity" Value="1" />
                <Setter Property="Color" Value="Black" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

No tengo VS a la mano, espero te funcione.

10
  • mi objetivo era agrupar el codigo del mouse en una clase, pero me he dado cuenta de que Reactive UI tiene algunas limitaciones. el 7 nov. 2018 a las 3:47
  • ¿A que limitaciones te refieres? yo hasta ahora no he visto ninguna.
    – Luis
    el 7 nov. 2018 a las 4:23
  • Lo que yo menciono de no mezclar UI con ViewModel no es limitación, es así como funciona MVVM, la idea de MVC, MVVM, MVP, y los patrones de diseño es ese, separar responsabilidades.
    – Luis
    el 8 nov. 2018 a las 2:23
  • La limitacion es que no puedo enviar el sender como parametro para un comando. el 8 nov. 2018 a las 15:05
  • 1
    De poder, se puede, pero entonces para qué usar MVVM? La idea de MVVM, como comenté, es separar respinsabilidades y que no termines con código espagueti. ¿porqué mejor no usas un trigger en XAML? lo puedes aplicar automáticamente a los controles de tipo Image. Si solo ocupas ese comportamiento en una ventana lo agregas al diccionario de la ventana.
    – Luis
    el 8 nov. 2018 a las 22:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.