Question

我正在尝试使用MediaElement API为WP8编写一个播放视频的页面。我很难将播放/暂停控制放在视频上。

我目前正在使用网格来控制视频。问题是我无法使网格透明。这是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>

我仍然可以看到网格所在的黑色部分。

有没有更好的方法来实现这一目标？

Answer 1

您已将控件放在StackPanel中。这意味着你最终会得到：

StackPanel
    MediaElement
    Grid
       Button/Image 
       Button/Image

StackPanel用于水平或垂直堆叠控件。它不是用于覆盖控件。因此，您看到的黑色背景是Grid下面的背景，这可能是应用程序的默认背景画笔/颜色（黑色）。

Showing the problem

如果您使用Grid来托管控件，则可以根据需要使用叠加层：

<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>

现在：

 Grid
    MediaElement
    Grid
       Button
       Button

它看起来像这样：

Improved

使用Grid，我将MediaElement和内部Grid放在同一个单元格中（使用Row和{的默认附加属性值{1}}为'0'）。

在上面的代码中，我使用Column来布局Grid和另一个MediaElement，它将布局我使用的两个Grid。在这种情况下，我将Button与Grid对中，以便按钮显示在Buttons的中心。

我还为包含按钮的MediaElement使用了一些透明的Background。

Answer 2

之前我已经处理过这个问题但是不记得我是怎么解决的。我记得正在研究this，它使用视觉媒体作为Brush，然后绘制包含按钮的Grid的背景。 IIRC，问题不一定是Grid，而是覆盖MediaElement的任何内容。由于MediaElement涉及一些特殊的绘图程序，它不能很好地处理叠加和透明度。有一个解决方案，但就像我说的，我不能完全记住。但请尝试将视频用Brush作为Grid的背景。

Windows Phone中的透明网格？

2 个答案: