Redeveloping WordTutor
Modifying Words, Part the Second

If you’ve tried out our application as it stood after last week’s post, you may have noticed that the user experience for modifying a word is a bit suboptimal. After selecting a word, you have to separately press the Modify button. Can we do better?

One of the standard user experiences (on Windows PCs at least) is the use of double-click to open an item. Adding this to our application would be a nice addition to the existing functionality. (We don’t want to replace the Modify button completely; Double-click is far less discoverable than a button as it has no visual affordance.)

But, how do we hook up our Open command to a ListBox? Unlike the Button we’ve already used, there’s no super convenient Command property that we can configure.

In the world of the .NET Framework, we could do this by using a “behaviour” to associate the existing MouseDoubleClick event with a command. Can we do this under .NET Core?

Fortunately, the answer is yes. While the functionality isn’t built into .NET Core, thanks to the XamlBehaviorsWpf project we have access to the same functionality as .NET Framework. This project is published as the Microsoft.Xaml.Behaviors.Wpf NuGet package. As far as I can tell, this an official open-source port of the older Blend API. Neat!

Thanks to this library, we don’t need to resort to writing a manual event for the MouseDoubleClick event, we can just configure the (ahem) behaviour we want. Here’s how we do that.

At the top of our Xaml file we need to add a namespace declaration for the new namespace:

xmlns:b="http://schemas.microsoft.com/xaml/behaviors"

Then we add the required behaviour to our existing ListBox:

<ListBox ...>
    <b:Interaction.Triggers>
        <b:EventTrigger EventName="MouseDoubleClick">
            <b:InvokeCommandAction 
                Command="desktop:ItemCommands.Open" 
                CommandParameter="{Binding Selection}" />
        </b:EventTrigger>
    </b:Interaction.Triggers>
</ListBox>

Many different triggers can be added - hence the wrapper Interaction.Triggers element.

The EventTrigger is configured by specifying which event should be used to trigger the behaviour; inside it, we list all the actions that need to happen when the trigger occurs.

Far easier than I expected. Sometimes it’s nice to be surprised.