Question

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

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＃代码

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

Answer 1

如果我正确理解您的问题，如果您更改元素的顺序并使用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>

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

目前MediaElement不可见（其Visibility设置为Collapsed）。

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

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

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

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

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

1 个答案: