我必须一次播放三个视频。为此,我使用了三个媒体元素,它们在网格的堆栈面板内水平对齐。现在我想以这样一种方式显示视频,即第二个视频(MediaEL2(应该放在视频1的后半部分和视频2的前半部分之上。也就是说,MediaEL2的起始位置应该是视频1后半部分的起始点,而结束点应该是视频3前半部分的结束点。它可以很容易地在WinForm中使用"位置"实现。但是我可以在WPF中实现它吗?
<StackPanel Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" >
<MediaElement x:Name="MediaEL1" ScrubbingEnabled="True" SnapsToDevicePixels="True" MediaOpened="MediaEL_MediaOpened" LoadedBehavior="Manual">
</MediaElement>
<StackPanel>
<StackPanel Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" >
<MediaElement x:Name="MediaEL2" ScrubbingEnabled="True" SnapsToDevicePixels="True" MediaOpened="MediaEL_MediaOpened" LoadedBehavior="Manual">
</MediaElement>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" >
<MediaElement x:Name="MediaEL3" ScrubbingEnabled="True" SnapsToDevicePixels="True" MediaOpened="MediaEL_MediaOpened" LoadedBehavior="Manual">
</MediaElement>
</StackPanel>
<Grid HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<MediaElement x:Name="MediaEL1" ScrubbingEnabled="True" SnapsToDevicePixels="True" MediaOpened="MediaEL_MediaOpened" LoadedBehavior="Manual" />
<MediaElement x:Name="MediaEL3" ScrubbingEnabled="True" SnapsToDevicePixels="True" MediaOpened="MediaEL_MediaOpened" LoadedBehavior="Manual" />
</StackPanel>
<MediaElement x:Name="MediaEL2" HorizontalAlignment="Center" ScrubbingEnabled="True" SnapsToDevicePixels="True" MediaOpened="MediaEL_MediaOpened" LoadedBehavior="Manual" />
</Grid>
或者,如果要明确定位它们,只需使用Canvas
并设置每个MediaElement
的Top
和Left
属性。
您有不同的方法来满足您的要求。
尚不清楚XAML的其余部分是如何构建的,顺便说一句,你可以尝试至少两种不同的方法。
方法A:使用网格
根据你在XAML中放置的顺序,你放在网格中的任何元素都会与其他元素重叠。前者在幕后,后者在其他人之上。这意味着你可以将MediaElements
组织在Grid
中,然后使用每个MediaElement
的Margin
,你可以将它们放置在你想要的地方。
<Grid>
<MediaElement x:Name="MediaEL1" ScrubbingEnabled="True" SnapsToDevicePixels="True" LoadedBehavior="Manual">
</MediaElement>
<MediaElement Margin="100,100,0,0" x:Name="MediaEL2" ScrubbingEnabled="True" SnapsToDevicePixels="True" LoadedBehavior="Manual">
</MediaElement>
<MediaElement Margin="200,200,0,0" x:Name="MediaEL3" ScrubbingEnabled="True" SnapsToDevicePixels="True" LoadedBehavior="Manual">
</MediaElement>
</Grid>
这里的100
和200
的边距只是一个示例,可以让您稍微移动MediaElements
,您可以将它们绑定到其他MediaElement
的宽度和高度。
方法B:使用Canvas
Canvas
允许您随时在其中放置元素,只需设置Canvas.Left
和Canvas.Top
,这与您在WinForms中提到的Location
非常相似。
<Canvas>
<MediaElement x:Name="MediaEL1" ScrubbingEnabled="True" SnapsToDevicePixels="True" LoadedBehavior="Manual">
</MediaElement>
<MediaElement Canvas.Left="100 " Canvas.Top="100" x:Name="MediaEL2" ScrubbingEnabled="True" SnapsToDevicePixels="True" LoadedBehavior="Manual">
</MediaElement>
<MediaElement Canvas.Left="200 " Canvas.Top="200" Margin="200,200,0,0" x:Name="MediaEL3" ScrubbingEnabled="True" SnapsToDevicePixels="True" LoadedBehavior="Manual">
</MediaElement>
</Canvas>
正如上面对Canvas
上的Grid
所解释的那样,您放入其内容中的任何元素都会根据您在XAML中放置的顺序与其他元素重叠。