WPF: cómo adjuntar eventos de mouse a un modelo de vista?

Question

Estoy tratando de usar el patrón MVVM por primera vez. Así que tengo un ItemsControl lleno con mis objetos viewmodel, que se muestran usando DataTemplate; los objetos son "nodos" y "bordes" representados en DataTemplate con objetos Thumb y Polyline y quiero poder detectar clics y arrastres en el ItemsControl para mover los nodos y los bordes.

dos preguntas:

• ¿Cómo adjunto controladores de eventos de ratón a los Polyline 's y Thumb' s para ser manejado por los pequeños ViewModels? (Podría adjuntar un controlador de Thumb.DragDelta a los ItemsControl y e.OriginalSource puntos a la Thumb, pero ¿cómo puedo obtener el objeto de modelo de vista correspondiente?)
• ¿Cómo adjunto controladores de eventos del ratón al ItemsControl para detectar clics del ratón y arrastra el espacio en blanco ? (la respuesta es más abajo)

Nota: Sé que podría no considerarse un ViewModel adecuado si se trata directamente de eventos de la Vista. Pero el punto importante es que necesito manejar los eventos del mouse y no estoy seguro de cómo adjuntarlos.

Answer 1

Descubrí la respuesta a la segunda pregunta. Necesitaba un ItemsControl que admitiera el desplazamiento, y necesitaba tener los elementos en un Grid en lugar del StackPanel predeterminado. Para cumplir ambos requisitos, utilicé un ControlTemplate:

<!--In the resources...--> 
<ControlTemplate x:Key="GraphTemplate" TargetType="ItemsControl"> 
    <ScrollViewer Name="ScrollViewer" 
        Padding="{TemplateBinding Padding}" 
        HorizontalScrollBarVisibility="Auto"> 
     ... 
      <Grid Name="Panel" IsItemsHost="True" 
        Background="{TemplateBinding ItemsControl.Background}"/> 
     ... 
    </ScrollViewer> 
</ControlTemplate> 
<!--Later...--> 
<ItemsControl x:Name="_itemsControl" 
       ItemsSource="{Binding Items}" 
       Template="{StaticResource GraphTemplate}" 
       Background="LightYellow"/> 

el fin de obtener los eventos del ratón con coordenadas significativas de ratón (es decir, las coordenadas en el espacio de desplazamiento), era necesario para obtener una referencia a la red usando un extraño encantamiento:

Grid grid = (Grid)_itemsControl.Template.FindName("Panel", _itemsControl); 

a continuación, asociar controladores de eventos a la red, y dentro de los controladores de eventos de ratón, obtener las coordenadas del ratón wRT la red usando

Point p = e.GetPosition((IInputElement)sender); 

el fin de obtener los eventos del ratón sobre toda la superficie, el control (en realidad la red) debe tener un fondo, por lo que establecer Antecedentes = "amarillo claro" anterior, que se propaga a la red a través de una vinculante en ControlTemplate.

Answer 2

Encontré una forma de manejar eventos generados por objetos en el DataTemplate.

(1) asociar controladores de eventos a ItemsControl

<ItemsControl x:Name="_itemsControl" 
       Thumb.DragStarted="Node_DragStarted" 
       Thumb.DragDelta="Node_DragDelta" 
       Thumb.DragCompleted="Node_DragCompleted" 
       MouseDoubleClick="OnMouseDoubleClick" 
       .../> 

(2) para averiguar qué elemento del evento se aplica a, el tratamiento de la OriginalSource como FrameworkElement, y obtener su DataContext:

void Node_DragStarted(object sender, DragStartedEventArgs e) 
{ 
    var os = (FrameworkElement)e.OriginalSource; 
    var vm = os.DataContext as ItemViewModel; 
    if (vm != null) 
     // do something with the item ViewModel 
} 

Answer 3

Hay formas de hacerlo sin código subyacente ...

podría utilizar el patrón de comportamiento adjunto para mapear los eventos a los comandos, consulte la aplicación de Marlon Grech here

También es posible usar un markup extension que escribí para unirse InputBindings a los comandos de modelo de vista, así:

<UserControl.InputBindings> 
    <MouseBinding Gesture="LeftClick" Command="{input:CommandBinding SomeCommand}"/> 
</UserControl.InputBindings> 

Sin embargo, no estoy seguro de que se ajuste a sus necesidades específicas ...

Answer 4

El ViewModel debe estar desconectado de la GUI, por lo que no sabe nada sobre controles o mouseclicks.

Dos opciones:

• llamar a un comando en el ViewModel, según lo sugerido por Thomas
• Enlazar la posición del pulgar a una propiedad en el modelo de vista, entonces, cuando los movimientos de control alrededor de WPF cuando actualizará los valores de posición en ViewModel.

Answer 5

Bea Stollnitz tiene un ejemplo de arrastrar y soltar titulado "¿Cómo puedo arrastrar y soltar elementos entre ItemsControls enlazados a datos?". Publicaba el enlace, pero StackOverflow no me deja.

Es posible que desee dividir la retroalimentación de la UI mientras se está arrastrando y la acción se lleva a cabo cuando finalmente se descarta.

Estoy de acuerdo con Thomas y Cameron anteriormente, sin embargo. Querrá limitar la mezcla/coincidencia de manejo de eventos y enlace de datos. Si va a la ruta de manejo de eventos, puede que no desee evitar el uso del término "Ver modelo" para sus objetos, ya que generalmente denota la alternativa de enlace de datos.

Answer 6

Estoy usando un método mucho más elegante. Yo uso Prism 2 y datatemplates. Entonces lo que he hecho es esto:

<ItemsControl x:Name="SearchImagesList" ItemTemplate="{StaticResource SearchResultsAlbum}" 

y en el ItemTemplate Acabo de crear un botón en el interior!

<DataTemplate x:Key="SearchResultsAlbum">       
    <Button CommandParameter="{Binding}"     
      Command="{Binding Source={x:Static PhotoBookPRMainModule:ServiceProvider.DesignEditorViewManager}, Path=NavigationCommands.NavigateSearchResultAction}">