Another implementation of WPF Event to Command (with problems)

Question

I am looking at various implementations of hooking a ICommand up to a control's event. So for instance the GotFocus of a TextBox should call a GotFocusCommand in my View Model. I then got an idea to implement my own version (for my own learning) and it is working well, but I can only link one event to one command in the XAML.

( Basically I just use reflection to find the specified Event and then do a AddEventHandler that executes the command )

This works fine :

<Button 
  local:EventToCommand.Event="Click" 
  local:EventToCommand.Command="{Binding TestCommand}" 
  />  

But this does not :

<Button 
  local:EventToCommand.Event="Click" 
  local:EventToCommand.Command="{Binding ClickCommand}" 
  local:EventToCommand.Event="GotFocus" 
  local:EventToCommand.Command="{Binding GotFocusCommand}"
  />  

as you it leads to a duplicate attribute name error.

Would it be possible to do something like :

<Button>
  <Some Xaml Element>
    <local:EventToCommand Event="Click" Command="{Binding ClickCommand}" />
    <local:EventToCommand Event="GotFocus" Command="{Binding GotFocusCommand}" />
  </Some Xaml Element>
</Button>

to "map" multiple events to commands ?

Answer 1

There are a couple of ways you could approach this, either using an Attached Property or inheriting from Button and adding your own DependencyProperty that contains a list of EventToCommand objects, and when you add to that collection you wire up the event to command. If this seems confusing, I can try to whip up some examples.

C#

    public class EventedButton : Button
{
    public static DependencyProperty EventCommandsProperty
        = DependencyProperty.Register("EventCommands", typeof(EventToCommandCollection), typeof(EventedButton), new PropertyMetadata(null));


    public EventToCommandCollection EventCommands
    {
        get
        {
            return this.GetValue(EventCommandsProperty) as EventToCommandCollection;
        }
        set
        {
            this.SetValue(EventCommandsProperty, value);
        }
    }

    public EventedButton()
    {
        this.EventCommands = new EventToCommandCollection(this);
    }
}

Xaml:

    <local:EventedButton>
        <local:EventedButton.EventCommands>
            <local:EventToCommand />
        </local:EventedButton.EventCommands>
    </local:EventedButton>

Inside of EventToCommandCollection, you would attach/detach to the Event you wanted when items are added to the collection.

UPDATE: Attached Property

Here is some code to do the collection as an attached property:

C#

        public static DependencyProperty CommandsProperty =
        DependencyProperty.RegisterAttached(
        "Commands",
        typeof(ICollection<EventToCommand>),
        typeof(DependencyObject),
        new PropertyMetadata(null, OnCommandsChanged));


    private static void OnCommandsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        // Attach/Detach event handlers
    }

    public static void SetCommands(DependencyObject element, ICollection<EventToCommand> value)
    {
        element.SetValue(CommandsProperty, value);
    }

    public static ICollection<EventToCommand> GetCommands(DependencyObject element)
    {
        return (ICollection<EventToCommand>)element.GetValue(CommandsProperty);
    }

Xaml:

    <local:EventedButton>
        <local:EventToCommand.Commands>
            <local:EventToCommandCollection>
                <local:EventToCommand/>
            </local:EventToCommandCollection>
        </local:EventToCommand.Commands>
    </local:EventedButton>

Answer 2

Using the Blend Event Triggers and an action negates the need to handle your own collections. And it can be added to any control.

See MVVM Lights EventToCommand

Or my extension of it here.(source)

Answer 3

GalaSoft MVVM Light ToolKit - EventToCommand you can do this

<Button> 
  <i:Interaction.Triggers>
     <i:EventTrigger EventName="Click" >
      <cmd:EventToCommand 
          PassEventArgsToCommand="True"
           Command="{Binding ButtonClick}"
       />
    </i:EventTrigger>
 </i:Interaction.Triggers>
  <i:Interaction.Triggers>
     <i:EventTrigger EventName="GotFocus" >
      <cmd:EventToCommand 
          PassEventArgsToCommand="True"
           Command="{Binding ButtonGotFocus}"
       />
    </i:EventTrigger>
 </i:Interaction.Triggers>
</Button>

Where import this namespaces

 i- xmlns:i="clr-namespace:System.Windows.Interactivity;
    assembly=System.Windows.Interactivity"
 cmd-xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;
     assembly=GalaSoft.MvvmLight.Extras.WPF4"