WPF

Question

我必须同时播放三个视频。为此，我使用了三个媒体元素，它们在网格的堆栈面板内水平对齐。现在我想以这样的方式显示视频，即第二个视频（MediaEL2）应该放在视频 1 的后半部分和视频 2 的前半部分之上。这意味着，MediaEL2 的起始位置应该是第二个视频的起始点视频 1 的一半和结束点应该是视频 3 的前半部分的结尾。使用 'Location' 在 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>

Answer 1

<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 属性。

Answer 2

你有不同的方法来完成你的要求。

您的 XAML 其余部分的结构还不是很清楚，顺便说一句，您可以尝试至少 2 种不同的方法。

方法 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 中放置它们的顺序与其他元素重叠。

WPF - 控件的定位

WPF - Positioning of controls

c#

xaml

mediaelement