FlipView Stop MediaElement

Question

Hi i'm trying to play some sounds when a image is clicked in flip view mode. but when i flip to next image the sounds from the first image are still playing is there a way to automatically stop all Media Elements from playing as soon as the next image is displayed.

Also can i do the same with animations. I apologize if this is a trivial question. Thanks

<Page
    x:Class="App2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF78D869"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <FlipView HorizontalAlignment="Left" VerticalAlignment="Top">
            
            <Grid >
              <Grid.Background>
                    <ImageBrush ImageSource="Assets/CaveBoy.jpg" Stretch="Uniform"  />
                </Grid.Background>
                
            </Grid>

            <Grid>
                <Grid.Background>
                    <ImageBrush ImageSource="Assets/CaveGirl.jpg" Stretch="Uniform"/>
                </Grid.Background>


            </Grid>
            
            <MediaElement x:Name="DinoSound" Source="Assets/Dino.mp3" />
            <MediaElement x:Name="RaptorSound" Source="Assets/Raptor.mp3" />
            
        </FlipView>

    </Grid>
</Page>

Answer 1

Try this:

<Grid>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF78D869"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <FlipView HorizontalAlignment="Left" VerticalAlignment="Top" SelectionChanged="FlipView_SelectionChanged">
                <Grid >
                    <Grid.Background>
                        <ImageBrush ImageSource="Assets/CaveBoy.jpg" Stretch="Uniform"  />
                    </Grid.Background>

                </Grid>
    
                <Grid>
                    <Grid.Background>
                        <ImageBrush ImageSource="Assets/CaveGirl.jpg" Stretch="Uniform"/>
                    </Grid.Background>
                </Grid>
    

            <MediaElement x:Name="DinoSound" Source="Assets/Dino.mp3" AutoPlay="False" />
            <MediaElement x:Name="RaptorSound" Source="Assets/Raptor.mp3"  AutoPlay="False"/>

        </FlipView>

    </Grid>

 private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            FlipView MyFlipView = sender as FlipView;
            switch (MyFlipView.SelectedIndex)
            {
                case 0:
                    {
                        if (DinoSound != null) DinoSound.Stop();
                        if (RaptorSound != null) RaptorSound.Stop();
                        break;
                    }
                case 1:
                    {
                        if (DinoSound != null) DinoSound.Stop();
                        if (RaptorSound != null) RaptorSound.Stop();
                        break;
                    }
                case 2:
                    {
                        if (DinoSound != null) DinoSound.Play();
                        if (RaptorSound != null) RaptorSound.Stop();
                        break;
                    }
                case 3:
                    {
                        if (DinoSound != null) DinoSound.Stop();
                        if (RaptorSound != null) RaptorSound.Play();
                        break;
                    }

            }
        }

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

Nice. Works Great Thank you. 

Answer 3

Just to add some context here... the mediaelements did not have the autostart properties set, so they would start automatically.  I set them to not start automatically.  Also, I listen for the SelectionChanged event.  When that occurs, I ensure that only the correct media element is started, and the other one is stopped.  If there's no media element on the page, none of them are playing.  I hope this makes sense.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.