WPF: Wie befestigen Sie die Maus-Ereignisse an ein viewmodel?

Ich bin versucht, das MVVM-pattern für die erste Zeit. Also ich habe einen ItemsControl gefüllt mit meinem viewmodel-Objekte angezeigt, die DataTemplate's; die Objekte sind "Knoten" und "Kanten" dargestellt DataTemplate's mit Thumb und Polyline Objekte und ich möchte in der Lage sein, zu erkennen, klicken und ziehen auf der ItemsControl damit sich der Knoten und Kanten.

Zwei Fragen:

Wie befestige ich die Maus-event-Handler, um die Polyline's und Thumb's behandelt werden, die durch das kleine viewmodels? (Ich könnte anfügen einer Thumb.DragDelta handler zu ItemsControl und e.OriginalSource Punkte der Thumb, aber wie bekomme ich das entsprechende viewmodel-Objekt?)
Wie befestige ich die Maus-event-Handler, um die ItemsControl zu erkennen, die Maus klickt und zieht auf Leerzeichen? (Antwort unten)

Hinweis: ich weiß, es mag nicht als richtige ViewModel, wenn es direkt der Verarbeitung von Ereignissen in der Ansicht. Aber der wichtige Punkt ist, ich muss um Maus-events, und ich bin nicht sicher, wie Sie Sie, um Sie zu befestigen.

InformationsquelleAutor Qwertie | 2009-05-15

Fand ich eine Möglichkeit zum behandeln von Ereignissen ausgelöst, die durch Objekte in der DataTemplate.

(1) anfügen von Ereignishandlern an ItemsControl

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

(2), um herauszufinden, welches Objekt das Ereignis gilt, behandeln die OriginalSource als FrameworkElement und seine 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
}

+1 für getting things done.

InformationsquelleAutor Qwertie

3

ViewModel sollte getrennt werden von der GUI, so dass es weiß nichts über die Steuerung oder Mausklicks.

Zwei Optionen:
- Rufen Sie einen Befehl in das ViewModel, vorgeschlagen von Thomas
- Binden die position des Daumens an eine property im ViewModel, dann, wenn die Steuerung bewegt sich der WPF-aktualisieren der Positionswerte im ViewModel.
Ich sehe, wie würden Sie den Daumen, bewegen sich von selbst?
Check out codeproject.com/KB/WPF/WPFDiagramDesigner_Part1.aspx für ein Beispiel, wie man einen beweglichen Daumen Steuern.
Das Projekt bewegt sich einfach den Daumen in die code-behind-durch den Umgang mit dem DragDelta Veranstaltung.
Ja. Sie wollen nicht, dies zu tun?

InformationsquelleAutor Cameron MacFarland

Dachte ich, die Antwort auf die zweite Frage. Ich brauchte ein ItemsControl, die unterstützt scrollen, und ich brauchte, um die Elemente auf einem Raster eher als die Standard-StackPanel-Steuerelement. Erfüllen beide Anforderungen, die ich verwendet, ein 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"/>

Um Maus-events mit sinnvollen Maus-Koordinaten (also die Koordinaten, in durchlaufbaren Platz), war es notwendig, um eine Referenz auf das Gitter mit einer seltsamen Beschwörung:

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

Dann befestigen Sie event-Handler, um das raster und das innere der Maus-event-Handler, die Maus-Koordinaten w.r.t. das Gitter mit

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

Um mouse-events auf der gesamten Oberfläche, die die Steuerung (eigentlich die grid) müssen einen hintergrund, so dass ich set Background="lightyellow festlegen" oben, die sich ausbreitet, um das raster über eine Bindung im ControlTemplate.

InformationsquelleAutor Qwertie

1

Bea Stollnitz verfügt über eine drag-and-drop Beispiel mit dem Titel "Wie kann ich drag & drop-Elemente zwischen Daten gebunden ItemsControls?". Ich würde den link posten, aber StackOverflow ist nicht lassen Sie mich.

Möchten Sie vielleicht aufgeteilt, die UI-feedback während ist ein ziehen in der Prozess-und die Aktion die ausgeführt wird, wenn es schließlich sank.

Dem würde ich Zustimmen w/Thomas und Cameron vor, jedoch. Sie wollen zu begrenzen mischen/passende event-handling und data binding. Wenn du gehst, die event-handling-Strecke, Sie können nicht wollen, um zu vermeiden, mit dem Begriff "View-Model" für die Objekte, wie es allgemein bezeichnet die Datenbindung alternative.

Link: bea.stollnitz.com/blog/?p=53
Dies ist nicht wirklich nützlich für mich, aber danke für den interessanten Artikel!

InformationsquelleAutor micahtan
1

Gibt es Möglichkeiten, das zu tun, ohne code-behind...

Können Sie mit der beigefügten Verhalten pattern map-Ereignisse, Befehle, siehe Marlon Grech Umsetzung hier

Können Sie auch ein markup-Erweiterung, die ich schrieb, zu binden InputBindings zu ViewModel Befehle wie folgt :
```
<UserControl.InputBindings>
    <MouseBinding Gesture="LeftClick" Command="{input:CommandBinding SomeCommand}"/>
</UserControl.InputBindings>
```
Aber ich bin nicht sicher, es passt Ihre spezifischen Bedürfnisse...

Ich denke nicht, da dies eine grafische Benutzeroberfläche zum erstellen und verschieben von grafischen Objekten, also brauche ich die Koordinaten der Maus, und ich brauche, um zu zeigen, feedback beim ziehen ist im Gange.

InformationsquelleAutor Thomas Levesque

Ich bin mit einem viel elegantere Methode. Ich benutze Prism 2 und datatemplates. Also, was ich gemacht habe, ist dies:

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

und in der ItemTemplate-ich habe gerade eine Knopf im inneren!

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

InformationsquelleAutor VJ Koganti

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.