Transparent Grid in Windows Phone? - xaml

Question

I'm trying to write a page for WP8 which plays video, using the MediaElement API.
I am having difficulties in placing the play/pause controls over the video.
I am currently using a grid to house the controls over the video. The problem is that I cannot make the grid transparent. This is the XAML -
<StackPanel Background="Transparent">
<MediaElement Name="media" Source="http://video-js.zencoder.com/oceans-clip.mp4" AutoPlay="True"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<!-- Play button. -->
<!-- Pause button. -->
<Grid Background="Transparent" VerticalAlignment="Bottom" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="85" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Source="Assets\transport.pause.png" Height="79" Width="79"/>
<Image Grid.Column="1" Source="Assets\transport.play.png" Height="79" Width="79"/>
</Grid>
</StackPanel>
I can still see a black portion where the Grid is.
Is there a better way to accomplish this?

Answer 1

You've put the controls in a StackPanel. That means that you'll end up with:
StackPanel
MediaElement
Grid
Button/Image
Button/Image
A StackPanel is designed to stack controls either horizontally or vertically. It is not for overlaying controls. So, the black background you're seeing is the background beneath the Grid, which is likely the default background brush/color of the application (black).
If you instead were to use a Grid to host the controls, you can use an overlay as you need to:
<Grid x:Name="ContentPanel" >
<Grid>
<MediaElement Name="media" Source="Assets/sample_mpeg4.mp4"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid Background="#80000000" VerticalAlignment="Center" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" >Pause</Button>
<Button Grid.Column="1" Click="Button_Click_1" >Play</Button>
</Grid>
</Grid>
</Grid>
It's now:
Grid
MediaElement
Grid
Button
Button
It would look something like this:
Using the Grid, I've put both the MediaElement and the inner Grid in the same cell (by using the default attached property values for Row and Column which are `0').
In the above code, I've used a Grid to layout the MediaElement and another Grid which will layout the two Buttons I've used. In this case, I've centered the Grid with the Buttons so that the buttons appear in the center of the MediaElement.
I've also used a somewhat transparent Background for the Grid which contains the buttons.

Answer 2

I've dealt with this issue before but can't remember exactly how I solved it. I remember researching this, which is using visual media as a Brush to then paint the background of the Grid that houses the buttons. IIRC, the issue is not necessarily with the Grid, it's with anything overlaying the MediaElement. Because of some special drawing procedure involved with the MediaElement it doesn't handle overlays and transparencies well. There is a solution, but like I said I can't completely remember. But try out using the video as a Brush for the background of the Grid.