Question

I have an WPF-Application with 3 different UserControls in the MainWindow and only one of these is visible at the time. It’s like having 3 different pages and you able to switch from one page to another when you like it. First page is like a start-screen. Second is like the “general view”. And the third page shows details. Switching between them works fine with Storyboard. I just make the visible page invisible (opacity to zero) and move it out of the visible window- area and move the new page into the visible window-area and make it visible. So far so good… (Hope you understood what I wanted to tell^^)

Now I want to have background-music that plays, just when the detail-page is displayed. And only then. Not when the user looks at the startscreen ir the general view.

I think I have to make something with a mediaelement. And start or stop the mediaelement with my storyboards.

But how do I handle the mediaelements in my Storyboards?

Answer 1

You have the right idea:

• Use a MediaElement in whatever layout container (grid, border, whatever) your details page is put in

  <MediaElement x:Name="myMediaElement" />

• Make your storyboard resource that has a MediaTimeline in it

  <Window.Resources>
  <Storyboard x:Key="PlaySoundStoryboard">
      <MediaTimeline Storyboard.TargetName="myMediaElement" Source="whatever.mp3" />
  </Storyboard>
  

• I know with buttons and things you can use event triggers to start and stop the story board:

      <Grid x:Name="LayoutRoot">
      <Grid.Triggers>
          <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="playbutton">
              <BeginStoryboard Storyboard="{StaticResource PlaySoundStoryboard}" Name="theStoryboard" />
          </EventTrigger>
          <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="stopbutton">
              <StopStoryboard BeginStoryboardName="theStoryboard" />
          </EventTrigger>
      </Grid.Triggers>
      <MediaElement x:Name="myMediaElement" />
      <Button Name="playbutton">play</Button>
      <Button Name="stopbutton">stop</Button>
  </Grid>
  

But I don’t know how you would do this for the visibility of the container. IsVisibleChanged would require you to look at the argument which you can’t do in XAML (to my knowledge). You may need to the trigger the animation using a code behind.

Hope this helps…