MediaElement audio/video out of sync when inside a ViewBox

Question

I'm using Viewbox controls to proportionally size content in my app at a certain display size. I don't know what the display size of the target computer will be, but I need the app's layout, fonts, graphics, etc to look the same on the target computer as on my machine. Viewbox has worked great for me in the past to accomplish this.

However, when I include a MediaElement (to play a WMV) inside the Viewbox , the media's audio and video get out of sync. The video lags behind, then speeds up, then lags behind, then speeds up, etc.

My actual layout looks something like this:

<Grid>
  <Viewbox>
    <Grid Width="888" Height="500"> <!-- 16:9 screen size -->
      <!-- row definitions -->
      <Viewbox Grid.Row="1">
        <Grid>
          <custom:TransitionFrame />
          <!-- TransitionFrame inherits from Frame -->
          <!-- TransitionFrame holds a Page that
               looks like this: 
               <Grid>
                 <MediaElement />
               </Grid>
          -->
        </Grid>
      </Viewbox>
    </Grid>
  </Viewbox>
</Grid>

Any ideas on why this would impact the video? Any ideas on how to resolve it?

Answer 1

Ugh. This has caused me sooooooo much issues. Its really depends on the machine. I have a pretty solid development machine and have never seen any issues. Then I ran the application on another normal machine and it was choppy as hell. I had to play with the following settings:

1. Switching monitors
2. Switching screen refresh rates
3. Switching resolution
4. Switching graphic cards.

Then when I got the out-of sync issues to < 500ms I created another layout and put in an option saying low graphics and it played fine. I made the other layout very basic with no more than one ViewBox.

I recommend staying away from Viewboxes with MediaElements