Part 15: Playing a Sound when a ListItem is Selected

Sign in to queue

The Discussion

  • User profile image
    RandomAlec

    I really wish Visual Studio would remember the layout of the windows in the program, including the zoom level of the designer device image on the left.

  • User profile image
    BobTabor

    @RandomAlec: I agree re: zoom.  That is annoying.  There's a keyboard shortcut that can take the sting out of it, but I forget what it is.

  • User profile image
    Shinto

    Had to add 'using SoundBoard.ViewModels;' in MainPage.xaml.cs. I might have missed it some earlier steps.

  • User profile image
    steve gw

    Hi Bob

    I was not able to get the sounds to run until I changed

    LongListSelector_SelectionChanged to check for ...

    if (selector.SelectedItem == null) return;

  • User profile image
    Gabe P

    Bob,
    For some reason, I can't get the sounds to play. Any suggestions?

  • User profile image
    BobTabor

    @Shinto: Hmm... I would have to go back through it all, but I'm pretty sure it's in there.  I didn't do anything "off camera".

    @steve gw: Odd ... when would a SelectedItem be null?  By definition, it holds THE SELECTED ITEM.  However, I would probably need to see your code ... maybe there's some small issue I'm unaware of.

    @Gabe P: Hi, you will have to give me more information.  I know you continued on in the series ... did you get it figured out?  Have you tried setting breakpoints in the LongListSelector_SelectionChanged event handler to see whether the selected item has the data needed to play the sound? I'm betting it's something related to populating the data / collection from a previous lesson.

  • User profile image
    SGW

    @BobTabor:My thoughts exactly in relation to 

    if (selector.SelectedItem == null) return;

     I was surprised to see it null ...

    What I think is somehow the pressing of the button was generating more than one action 

  • User profile image
    Gabe P

    I did move on, mostly to go forward. I'm going to try to give it another go and get back to you.

  • User profile image
    Girijesh

    Hi Bob,
    like Gabe,i am also having same issue.

  • User profile image
    Girijesh

    Hi Bob,
    My issue is solved.
    My path was not correct for Sound folder.(:-()
    thanks for your gr8 tutorial.

  • User profile image
    Clint

    @Girijesh: It is the little things in programming like that which will cause the most headaches.  When in doubt, check out the source code samples we provide for each lesson and compare your copy against our copy

  • User profile image
    Richard Freytag

    Bob or Clint,

    I goofed and left off the check: if( data == null) return;
    What happens if one makes that mistake is that EVERY time one selects the sound then data is defined the first time through and then there is a second pass through the event handler, data == null, and there is an exception because we have sent data = null to get the selection change event to work.

    Why does selecting a tile cause two passes at least through the event handler?

    Thanks for this very helpful tutorial!

  • User profile image
    BobTabor

    @Richard Freytag: Just a guess ... I would need to test this ... either ( a ) you're double clicking?  And before the change actually happens the second click of the double click is kicking off the handler a second time, or ( b ) the SelectionChanged event is registering the DE-SELECTION of the original selection, then the SELECTION of the new item.  Or, ( c ) there's something funky going on with the registration of the event or the order of events.  I don't recall experiencing this as I was developing the app ... You may want to set a break point inside the SelectionChanged event and monitor the input arguments AND look at the stack trace to see what's is calling it a second time.

  • User profile image
    Gaby

    Hi Bob,
    thanks a lot for your tutorials. I enjoy them a lot.
    I am a total developer greenhorn but found my way through to tut# 14. I have .txt files instead of .wav files and already implemented them into the code. No problems so far.
    My question is:
    what code do I have to write from here on (media player, event handler etc.)? Is there another tutorial that handles this topic?

  • User profile image
    Clint

    @Gaby: Love the fact you're trying something different but we're attempting to keep the questions / comments here related to each video.

    I also don't have enough information to really help you out as well.  I know you know what your grand plan in but it lacks enough detail for me to actually respond helpfully.  My advice here when asking questions is "I have a text files that I'm dynamically reading and I can get the data from each of them.  I use that data then to load in WAV files but I'm confused on how to properly get the file location that is stored in that file to the media element.  My next question is how do I know if it loaded or failed along with finished playing?"

    My response then would be SetSource on a media element with the UriKind as RelativeOrAbsolute along with look at the events on Media Element MediaOpened, MediaFailed, MediaEnded events

    https://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.controls.mediaelement(v=vs.105).aspx/html

    Smiley

  • User profile image
    Gaby

    Hi Clint,
    thanks for your quick answer.
    I try to work through it :-)

  • User profile image
    tucker

    Hi guys,

    First off, thanks for creating these awesome tutorials. I've worked through C# for Beginners and some of Windows 8 Apps for Beginners as well. My biggest struggles are coming from understanding data storage, but those are questions for another time.

    My question today is, why use a SelectionChanged event instead of a Tap event? Is there any benefit in this? Are there certain events that should be used when targeting a primarily touch based interface? This also applies to choosing Tap vs. Click.

    Thanks in advance. Really looking forward to the rest of this series! 

  • User profile image
    Clint

    @tucker: Click is an older style way to a Tap.  You can view them basically the same but I'd start leveraging Tap over Click when possible for Win Store and Win Phone applications.

    For storage, there is a topic in the series on that and a lot of information on the internet.  All depends what you want to store.

    For SelectionChanged VS Tap, SelectionChanged in this case lets me know more about the context of what is getting passed in.  All I have to do is cast my sender and then I have access to my data object!  Tapping would require me to do a bit more work in the data bind and wouldn't be as straight forward for the series.

  • User profile image
    Clint

    @tucker: Another reason why I picked SelectionChanged was because I need the data I bound to, if I didn't, I could totally use Tap.

  • User profile image
    Gaastra

    While working on a seperate product I encountered a similar problem as @Richard Freytag.

    The problem was that "selector.SelectedItem = null;" is a also a change in selection, which will fire the event for the 2nd time. My solution was to add 2 extra lines, one to deregister the event, and the last to restore the binding to the event:

    selector.SelectionChanged -= LongListSelector_SelectionChanged;
    selector.SelectedItem = null;
    selector.SelectionChanged += LongListSelector_SelectionChanged;

  • User profile image
    Clint

    @Gaastra: shouldn't matter if it fires off a second time as we verify if it is null in the event handler.

  • User profile image
    L Cat

    Awsome! I love everything what you do Clint and Bob. You are true help not only for me but others in the whole world...

  • User profile image
    Alex K

    I changed this line:

    if (selector == null)
    return;

    to

    if (selector == null || selector.SelectedItem == null)
    return;

    As others have mentioned, setting the SelectedItem calls the event again since this is a change to the SelectedItem. Because the selector.SelectedItem is null, but the object itself is not null, selector == null alone doesn't catch this - you have to check for the SelectedItem being null and return if it is.

    After making this change I realized that you could probably also just use
    if (selector.SelectedItem == null) since a null selector will also mean that selector.SelectedItem is null (not fully tested).

  • User profile image
    Clint

    @Alex K: That double call is intentional.  The cast below it actually catches if SelectedItem is null OR isn't of the proper type when I do the data == null check

  • User profile image
    Valered

    Thank for great guide....but i've 2 questions:

    1) how can i pause the sound when "de-select" Item before it's finished?

    2) how is it possible to change color background when you tap the item?

    Thank you so much

  • User profile image
    Clint

    @Valered: yup, listen to the same event for both.  following a very similar pattern as above.

    I suggest trying out stuff like this in one-off applications so you can play with stuff and try new ways of doing stuff without messing up your code base (this is also why we have source control)

  • User profile image
    Wesley

    Hey Bob, I have a doubt:

    We have a "play button" but if we click on the "square" it also works. In my opinion it is wrong.

    I tried to give the imagesource a name to handle it.
    <Image Source="/Assets/AppBar/play.png" name="test"/>

    but the name test does not appears on the code behind (mainpage.xaml.cs)


    Thanks from Brazil!

  • User profile image
    ARosch

    I have compared your code to my code and even tried copying/pasting your code, but I cannot get the sounds to play for anything but the first pivot item (animals). This would make me think there is a problem with the pathing, but I can't seem to find it. I placed the whole audio file that I downloaded into the assets folder. I have tested the audio files and they work fine. When I run it and click them, nothing happens. I tested all the buttons on the animals item and they work fine.

     

    Suggestions?

  • User profile image
    Vanderghast

    @Wesley: It is not really a button, but an ellipse. Even if you can reach the ellipse, programatically (its parent is some cell in a grid), you may have to check for ROUTED EVENTS to handle the click since it MAYBE that it is the cell in the grid which get the click, rather than the ellipse itself. Indeed, if the filling brush is null, I am almost sure that the interior is not clickable for the ellipse, so its parent would be first to get the event. You can also try to use a transparent brush to fill the ellipse, in this case, the ellipse will be the first to get the event (and attach the event to the ellipse, not to the grid, neither to the cell). That is more related to a discussion of WPF, in general, though.

    Hoping it makes sense.

  • User profile image
    roxen

    hi bob
    getting this error.

    Error 1 'SoundBoard.SoundData' does not contain a definition for 'FilePath' and no extension method 'FilePath' accepting a first argument of type 'SoundBoard.SoundData' could be found (are you missing a using directive or an assembly reference?) C:\Users\DaniyalL\Documents\Visual Studio 2012\Projects\SoundBoard\SoundBoard\MainPage.xaml.cs 51 47 SoundBoard

  • User profile image
    Markus

    Hi,

    I have the same problem as ARosch has. I also downloaded the complete source code for this lesson, opened it with my Visual Studio and started the emulater.
    Only the buttons in the first pivot tab play sounds.
    What is the problem there?

  • User profile image
    Markus

    Sorry for double posting - I got the mistake:

    I forgot to "copy" the SelectionChanged="LongListSelector_SelectionChanged"
    to the othe pivot items. I didn't find the mistake, because inthe sourcecode I downloaded, there is this event handler missing as well!

    @ARosch: This coud solve your problem as well!

  • User profile image
    MKenan

    Hi Bob,

    Thanks for great videos, I'm really enjoying them.

    The question is, how do we play media here without using mediaElement.Play() method ?

    Does it play automatically when we set the mediaElement.Source property?

    Thanks!

  • User profile image
    Odilton Junior

    Hello Bob, congratulations on your videos are great, I have a doubt, how can I make these audios. Wav stay in the loop? thank you

  • User profile image
    Heber

    Hi Bob,

    I love you tutorials, really informative. I have a question, though, on, "Part 15: Playing a Sound when a ListItem is Selected", with the following code:
    <MediaElement Name="AudioPlayer"
    Volume="1 />"
    I had no issues on the previous part, everything ran smooth. But, once I type the code above, I started getting squiggly lines, with the following message, "The type 'MediaElement' does not support direct content". What may be the issue? May you please help. Thank you so much.

  • User profile image
    Heber

    Hi Bob,

    I found a solution to my issue: it seems it was one to many spaces. So, the app runs well, I get no sound when I "click" on any buttons. What may be the cause? Thank you for your help.

  • User profile image
    nur

    hi.
    with the concept of the soundboard application,
    i would like to ask you about how to make my longlistselector able to navigate to different page.

    for example for the cat tile, instead it play it's audio file, it will navigate to cat.xaml.

    thanks.

  • User profile image
    prmdpandit

    Hi Bob,

    I have one question regarding Mediaelement of win8.1.

    AodioPlayer.Source=new uri("C:\MyFile\abc.mp3");

    its not working , cloud you help me how can give the path in win8 mediaelemet source.

    thanks

    pramod

     

     

  • User profile image
    AsfarIrshad

    @prmdpandit: You Should use it like this

    AudioPlayer.Source=new uri("ms-appx:///C:\MyFile\abc.mp3");

  • User profile image
    guimbert

    Hi,

    since upgrading my Windows Phone to 8.1, soundboard don't play sounds but just a "click". Recorded sounds work as expected.

  • User profile image
    ChuckJ

    What if we do not want to store the audio files in the app? Say we have a URL that directly links the mp3 file, to save space in the app. How would that be done? I can figure it out if we had to create buttons for each sound, but I can't figure it out using Viewmodels. Nothing I am trying is working. If you put a URL as the FilePath in the SoundModel, it doesnt work and error is received.

  • User profile image
    Tho

    hi Bob, how to open local file (image, movie, doc,...) on phone ? i wanna create a media player to play music from my phone, but i don't know how to work :(

  • User profile image
    NAJI AYASH

    Excuse me, gentlemen, I would like to help me open the radio using the code vb.net Thank you very much

  • User profile image
    Alex

    Hello and thank you for the great series! I have one question for today's lesson: When we change the source path of the media element by selecting an item why does the media element plays? There is no such code that "orders" the media element to play after changing its path... Thank you!

  • User profile image
    GiorgioITA

    In the end all the PivotItem are very similar:

    <phone:PivotItem Header="{Binding XXX.Title}">
    <phone:LongListSelector ... ItemsSource="{Binding XXX.Items}"
    ... atc.: always the same
    </phone:PivotItem>

    Only XXX changes for different PivotItems - hence the obvious question: would it be possible to include all this structure in a larger template that accepts XXX as "argument"? Then the XAML code would be dramatically simplified to something like:
    <phone:PivotItem [?? template] Animals/>
    <phone:PivotItem [?? template] Cartoons/>
    .. etc.

Add Your 2 Cents