Make an entire user control clickable through a command binding in WPF

Question

I'd like to make an entire user control respond to a touch/click event. And, I want to make it happen through a view model binding to a command.

I am trying to make the ENTIRE contents of the user control clickable but I don't know where to bind the command. I know how to bind a button to a command, but essentially, I want the entire control to be a button.

Here is the contents of the user control

<Grid x:Name="gridContent1" Margin="5,0,20,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="6*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions >
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="{Binding ShortName}"  />
    <Label Grid.Row="0" Grid.Column="1" Content="{Binding Value}" ContentStringFormat="0.000"/>
    <Label Grid.Row="0" Grid.Column="2" Content="{Binding UnitOfMeasurement}"  />
    <Image Grid.Row="0" Grid.Column="3" Source="{Binding TrendDirection, Converter={StaticResource converterTrendDirection}}" Style="{StaticResource TrendImage}" Width="48" Height="32" HorizontalAlignment="Right" />
</Grid>

This is what a list of the controls looks like once it is bound to data.

I am trying to allow the user to click on the control and go to a details chart view of the measurement.

The view model has a command already defined so I would like to bind to that.

Answer 1

This is a good scenario for using Behaviors and/or triggers. Here is a simple sample made with Blend and BlendSDK for WPF:

A user control:

<UserControl x:Class="BehaviorSample.MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:BehaviorSample"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Background="Red"/>
</UserControl>

The viewmodel:

using System.Windows;

namespace BehaviorSample
{
    public class MyViewModel
    {
        public void SomeMethod() => MessageBox.Show("Hi there!");
    }
}

Main window xaml:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BehaviorSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MyViewModel/>
    </Window.DataContext>
    <Grid>
        <local:MyUserControl/>
    </Grid>
</Window>

Then we need to add the following namespaces to our main window xaml:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

And we change our markup like following:

  <Grid>
        <local:MyUserControl>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:CallMethodAction MethodName="SomeMethod" TargetObject="{Binding Mode=OneWay}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </local:MyUserControl>
    </Grid>

Here we are using the CallMethodAction action, but you can use a custom behavior if you want.

Notice that you can just write the markup by hand but you may want to try to use Blend for this as is easier.

EDIT There are out there several third party solutions that implement an event to command behavior like MvvmLight, Devexpress WPF, etc. But if you do not want to add extra dependencies the solution shown must be fine

EDIT. Using MvvmLight EventToCommand trigger action

Main window xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:BehaviorSample"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Platform"
    x:Class="BehaviorSample.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MyViewModel />
    </Window.DataContext>
    <Grid>
        <local:MyUserControl>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <!--<ei:CallMethodAction MethodName="SomeMethod" TargetObject="{Binding Mode=OneWay}" />-->
                    <cmd:EventToCommand Command="{Binding Mode=OneWay, Path=SomeCommand}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </local:MyUserControl>
    </Grid>
</Window>

Nottice we added the following namespace:

 xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Platform"

And in our viewmodel:

public class MyViewModel
{
    //public void SomeMethod() => MessageBox.Show("Hi there!");

    public RelayCommand SomeCommand => new RelayCommand(() => MessageBox.Show("Hi there!"));
}