C# WPF-控件的定位

我必须一次播放三个视频。为此，我使用了三个媒体元素，它们在网格的堆栈面板内水平对齐。现在我想以这样的方式显示视频：第二个视频（MediaEL2）应该放在视频1的下半部分和视频2的上半部分的顶部。也就是说，MediaEL2的起始位置应该是视频1的下半部分的起始点，结束点应该是视频3的上半部分的结束点。在WinForm中使用“Location”很容易实现。但是我可以在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>

---

或者，如果您想明确定位它们，只需使用

Canvas

并设置每个

MediaElement

的

Top

和

Left

属性。

您有不同的方法来完成您的要求

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

方法A：使用网格

根据您在XAML中放置的顺序，放置在网格中的任何元素都将与其他元素重叠。前者是背景，后者是最重要的。 这意味着您可以将

MediaElement

组织在

网格中

，然后使用每个

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>

如上所述，对于

画布上的
网格
，您在其内容中放置的任何元素都将根据您在XAML中放置的顺序与其他元素重叠

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

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