WPF-控制装置的定位



我必须一次播放三个视频。为此,我使用了三个媒体元素,它们在网格的堆栈面板内水平对齐。现在我想以这样一种方式显示视频,即第二个视频(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并设置每个MediaElementTopLeft属性。

您有不同的方法来满足您的要求。

尚不清楚XAML的其余部分是如何构建的,顺便说一句,你可以尝试至少两种不同的方法。

方法A:使用网格

根据你在XAML中放置的顺序,你放在网格中的任何元素都会与其他元素重叠。前者在幕后,后者在其他人之上。这意味着你可以将MediaElements组织在Grid中,然后使用每个MediaElementMargin,你可以将它们放置在你想要的地方。

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

这里的100200的边距只是一个示例,可以让您稍微移动MediaElements,您可以将它们绑定到其他MediaElement的宽度和高度。

方法B:使用Canvas

Canvas允许您随时在其中放置元素,只需设置Canvas.LeftCanvas.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中放置的顺序与其他元素重叠。

最新更新