尝试在uwp中播放新背景图像上的视频

I'm trying to play a video on a new background frame on clicking or tapping of image after video completed the old frame should visible again.Any help would be appreciated.

我试图在视频完成后点击或点击图像时在新背景框架上播放视频,旧框架应再次可见。任何帮助将不胜感激。

XAML

<Grid>
       <Grid.Background>
          <ImageBrush ImageSource="Images\1280x800 final file.png"/>
       </Grid.Background>
       <MediaElement x:Name="pSong"  Margin="30,30,30,30"
                     RelativePanel.AlignHorizontalCenterWithPanel="True"
                     Canvas.ZIndex="1"
                     MediaEnded="Mend" />
       <ScrollViewer VerticalScrollBarVisibility="Auto">
       <StackPanel x:Name="LOfRhymes" BorderBrush="Black" BorderThickness="0">
            <RelativePanel x:Name="TTLS" Height="90px" BorderBrush="Black" 
                           BorderThickness="1" Tapped="TTLStap">                                   
                <TextBlock Foreground="Blue" FontSize="14" 
                            FontWeight="ExtraBold" 
                            RelativePanel.AlignLeftWithPanel="True"  
                            Margin="20,25"
                            Text="Rhymes"/>
                <TextBlock Foreground="Black" FontSize="14"                                
                            RelativePanel.AlignBottomWithPanel="True"
                            Margin="20,15"
                            Text="Twinkle Twinkle Little Star"/>
                <Image Source="images\01.jpg"
                        RelativePanel.AlignRightWithPanel="True"
                        Margin="0,10,80,0"
                        Width="100px"
                        Height="70px"
                        />
            </RelativePanel>
        </StackPanel>
    </ScrollViewer>                                              
</Grid>

C# code

private void TTLStap(object sender, TappedRoutedEventArgs e)
{
    pSong.Source = new Uri("ms-appx:///Videos/twinkle.mp4");
    pSong.AreTransportControlsEnabled = true;            
}

1 个解决方案

#1

If I understand your problem correctly, the solution should be easy if you change the order of the elements and use Visibility:

如果我正确理解您的问题,如果您更改元素的顺序并使用可见性,则解决方案应该很容易:

<Grid>
       <Grid.Background>
          <ImageBrush ImageSource="Images\1280x800 final file.png"/>
       </Grid.Background>
       <ScrollViewer VerticalScrollBarVisibility="Auto">
       <StackPanel x:Name="LOfRhymes" BorderBrush="Black" BorderThickness="0">
            <RelativePanel x:Name="TTLS" Height="90px" BorderBrush="Black" 
                           BorderThickness="1" Tapped="TTLStap"> 
                <TextBlock Foreground="Blue" FontSize="14" 
                            FontWeight="ExtraBold" 
                            RelativePanel.AlignLeftWithPanel="True"  
                            Margin="20,25"
                            Text="Rhymes"/>
                <TextBlock Foreground="Black" FontSize="14"  
                            RelativePanel.AlignBottomWithPanel="True"
                            Margin="20,15"
                            Text="Twinkle Twinkle Little Star"/>
                <Image Source="images\01.jpg"
                        RelativePanel.AlignRightWithPanel="True"
                        Margin="0,10,80,0"
                        Width="100px"
                        Height="70px"
                        />
            </RelativePanel>
        </StackPanel>
    </ScrollViewer>  
    <MediaElement x:Name="pSong" Visibility="Collapsed" Margin="30,30,30,30"
                  RelativePanel.AlignHorizontalCenterWithPanel="True"
                  MediaEnded="Mend" />                                            
</Grid>

Note that I moved the MediaElement after the ScrollViewer. The elements defined later in the tree are displayed on top of those before them. Also, I removed the Canvas.ZIndex which is usless unless the element is inside a Canvas.

请注意,我在ScrollViewer之后移动了MediaElement。稍后在树中定义的元素显示在它们之前的元素之上。另外,我删除了Canvas.ZIndex,除非元素在Canvas中,否则它是无用的。

Currently the MediaElement is not visible (its Visibility is set to Collapsed).

目前MediaElement不可见(其可见性设置为Collapsed)。

Now on tap on the panel you show the video:

现在点击面板即可显示视频:

private void TTLStap(object sender, TappedRoutedEventArgs e)
{
    pSong.Source = new Uri("ms-appx:///Videos/twinkle.mp4");
    pSong.AreTransportControlsEnabled = true; 
    //show the media element
    pSong.Visibility = Visibility.Visible;
}

And in the MediaEnded handler you hide it again.

在MediaEnded处理程序中,您再次隐藏它。

public void Mend( object sender, RoutedEventArgs e )
{
   pSong.Visibility = Visibility.Collapsed;
}

#1