Sunday, January 12, 2014

Better way to play sound file on WPF button click

Recently I was working on a XAML based application, in which my requirement was to play a sound (.wav file) whenever a given button is clicked. So, to achieve this, I wrote a below snippet:

My above snippet worked but at the same time, I feel a noticeable delay in beep sound and that make me analyze further and write a blog post :)

Now question is, why there is delay between button click and sound ???
Well, there is a simple concept behind it, which I missed while implementing above requirement :(

Reason is, the event hierarchy. 

Most of us might be aware that Click is a bubbling event, which means event will be fired from the control who initiated it. So, in our case, whenever button is clicked, it bubbles from button to window. And that's the reason, click event handler is executing before the window event is triggered, which is ultimately leading to delay.

Now, how to handle this???

Method 1:
Then I thought to write a preview event, which will be fired before my button click and came out with this below code:

In the above snippet, I am using VisualTreeHelper to verify is click event is occurred on button or not. Don't you think, it is bit dreadful? If it seems good, then you can go ahead with this approach else I got one more idea to implement this using ResourceDictionary.

Method 2:
Let's use Styles and EventSetter to achieve the same goal. Here I am going to define my style in a ResourceDictionary, now of course I don't have instance that I could wire my event to. For this, I created a code-behind file for ResourceDictionary, which will appear as a child of my XAML file and will contain the below code:

Now only thing pending is merging the ResourceDictionary with our MainWindow, which can be done as:

For me, this approach looks better. Hope you enjoyed reading!!!