We Keep Coding

MVVM How bind MouseLeftButtonDown and MouseLeftButtonUp in Canvas

Im trying to add new child(circle) to my Canvas after user click on it. And i want to change position of circles while draging them.
I want to do it with MVVM but dont know how catch these events in ViewModel.
I need a MouseLeftButtonUp/Down
I've tried wih System.Windows.Interactivity but it didnt helped.
My only idea is to add invisible button and do easy binding Command="{Binding Method}", but it still wont solve my problem, and certainly its not a best option
This in my XAML code (part of it)
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
<Canvas x:Name="DrawableCanvas" HorizontalAlignment="Left" Height="{Binding ElementName=GridContainer, Path=ActualHeight}" VerticalAlignment="Top" Width="{Binding ElementName=GridContainer, Path=ActualWidth}" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction Command="{Binding CanvasActionCommand}" x:Name="interactifityFix2">
</i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Canvas>

Add this namespace in your XAML:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
then you can add an interaction trigger wich will merge the event with an icommand in your viemodel like so:
<Ellipse>
<i:Interaction.Triggers>
<i:EventTrigger EventName="PreviewMouseDown">
<i:InvokeCommandAction Command="{Binding MouseDownCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Ellipse>

Triggering a command with a command target

*I'm using Material Design though this shouldn't be relative to the question
<ScrollViewer>
<ListView>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListView>
</ScrollViewer>
Sofar I've gotten it to trigger the command on double click, although I want to also set a command target property like:
CommandTarget="{Binding ElementName=addhost}"

WPF Grid: MouseUp event is not fired after mouse move

have discovered that the Mouse up work properly most of the time, they just do not get fired when my mouse has begun moving after the initial click. I have a pretty heavy mouse move event. So the only conclusion i can draw is that the mouse move event is some how preventing the mouse button up event from firing. Any thoughts please.
Note: I am using MVVM model.
<Grid >
<Image x:Name="DynamicJoystickWindow" RenderTransformOrigin="0.5,0.5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="PreviewMouseUp" >
<cmd:EventToCommand Command="{Binding JoystickMouseUp_Dynamic}" PassEventArgsToCommand="True" />
</i:EventTrigger>
<!--<i:EventTrigger EventName="MouseUp" >
<cmd:EventToCommand Command="{Binding JoystickMouseUp_Dynamic}" PassEventArgsToCommand="True" />
</i:EventTrigger>-->
<i:EventTrigger EventName="PreviewMouseDown">
<cmd:EventToCommand Command="{Binding JoystickMouseDown_Dynamic}" PassEventArgsToCommand="True" />
</i:EventTrigger>
<i:EventTrigger EventName="PreviewMouseMove" >
<cmd:EventToCommand Command="{Binding JoystickMouseMove_Dynamic}" PassEventArgsToCommand="True" />
</i:EventTrigger>
<!--<i:EventTrigger EventName="MouseMove" >
<cmd:EventToCommand Command="{Binding JoystickMouseMove_Dynamic}" PassEventArgsToCommand="True" />
</i:EventTrigger>-->
</i:Interaction.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="{Binding RenderScaleTransform}" ScaleY="{Binding RenderScaleTransform}"/>
</Image.RenderTransform>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="Resources/transparent.png"/>
<Setter Property="Opacity" Value="0.3" />
</Style>
</Image.Style>
</Image>
</Grid>

I do not observe the behavior you describe, so I would suggest you to simplify your problem to understand what's going on.
For example, remove your image and work only with the grid to see if something change.
I used the following code and it works well for me:
<Grid x:Name="DynamicJoystickWindow" RenderTransformOrigin="0.5,0.5" Background="Blue">
<i:Interaction.Triggers>
<i:EventTrigger EventName="PreviewMouseUp" >
<command:EventToCommand Command="{Binding JoystickMouseUp_Dynamic}" PassEventArgsToCommand="True" />
</i:EventTrigger>
<i:EventTrigger EventName="PreviewMouseDown">
<command:EventToCommand Command="{Binding JoystickMouseDown_Dynamic}" PassEventArgsToCommand="True" />
</i:EventTrigger>
<i:EventTrigger EventName="PreviewMouseMove" >
<command:EventToCommand Command="{Binding JoystickMouseMove_Dynamic}" PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Grid>
The only case where event is not fired is when I finish my move outside of the grid.
Hope it helps.

Thanks guys. Problem is, I had the image size smaller than the grid. as #Ouarzy suggested, had grid only and tried. the mouse events works as expected.

How to get parent event inside ControlTemplate?

I want to invoke a Command from view model inside radio button ControlTemplate. And do it when event Checked is raised
I tried this:
<ControlTemplate x:Key="RequestTypeControlTemplate" TargetType="RadioButton">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,2">
<ContentPresenter Margin="10,0,10,0">
<i:Interaction.Triggers>
<!-- Checked event from parent -->
<i:EventTrigger EventName="Checked">
<!-- Command from view model and binding to tag of radio button as arg -->
<i:InvokeCommandAction Command="{Binding DataContext.OnTypeChangedCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" CommandParameter="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ContentPresenter>
</Border>
</ControlTemplate>
But I think event goes from ContentPresenter, not from RadioButton. How do I get the event from RadioButton?
EDIT:
<RadioButton Content="All requests"
ContentTemplate="{StaticResource RadioButtonDataTemplate}"
GroupName="Filter"
IsChecked="True"
Style="{StaticResource RadioButtonStyle}"
Template="{StaticResource RequestTypeControlTemplate}"
Tag="{x:Static local:ContentType.Any}"/>
In viewModel
public ICommand OnTypeChangedCommand
{
get
{
return m_TypeChangedCommand ?? (m_TypeChangedCommand = new DelegateCommand<ContentType>(OnTypeChanged));
}
}
public void OnTypeChanged(ContentType type)
{
Debug.WriteLine(type);
}

You can't do that because the Routed event is only handled from the element (bubble) or to the element (tunnel)
What you can use is a DataTrigger on IsChecked property .
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding IsChecked,RelativeSource={RelativeSource AncestorType=RadioButton}}" Value=True>
<i:InvokeCommandAction Command="{Binding DataContext.OnTypeChangedCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" CommandParameter="{Binding Tag, RelativeSource={RelativeSource AncestorType=RadioButton}}}" />
</ei:DataTrigger>
</i:Interaction.Triggers>

Event Binding doesn't work in ContentPresenter

I'm want to use Interaction.Triggers inside a ContentPresenter, but for some reasons, the event doesn't get fired.
If I change ContentPresenter against ContentControl, the event binding works as expected.
<DataTemplate x:Key="MapPictureTemplate">
<Grid Width="80" Height="80" x:Name="Grid">
<Border
Background="{Binding Thumbnail, Converter={StaticResource StreamToImageBrushConverter}}"
CornerRadius="40">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<i:InvokeCommandAction Command="{Binding Source={StaticResource Locator}, Path=Main.ImageTappedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Border>
</Grid>
</DataTemplate>
and the ContentControl creation in code behind:
var content = new ContentPresenter()
{
Content = this,
ContentTemplate = Application.Current.Resources["MapPictureTemplate"] as DataTemplate
};