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并设置每个MediaElement的{​​{1}}和Top属性。

,

您有不同的方式去做自己要问的事情。

尚不清楚其余XAML的结构如何，但您可以尝试至少两种不同的方法。

方法A：使用网格

根据放置在Grid中的顺序，放置在Grid中的任何元素都将与其他元素重叠。前者在后台，后者在其他之上。 这意味着您可以将MediaElements组织到Grid中，然后使用每个Margin中的MediaElement将它们放置在所需的位置。

<Grid>
    <MediaElement  x:Name="MediaEL1" ScrubbingEnabled="True" SnapsToDevicePixels="True" LoadedBehavior="Manual">
    </MediaElement>
    <MediaElement Margin="100,100,0" x:Name="MediaEL2" ScrubbingEnabled="True" SnapsToDevicePixels="True" LoadedBehavior="Manual">
    </MediaElement> 
      <MediaElement Margin="200,200,0" x:Name="MediaEL3" ScrubbingEnabled="True" SnapsToDevicePixels="True"  LoadedBehavior="Manual">
    </MediaElement>      
  </Grid>

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

方法B：使用画布

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,0" x:Name="MediaEL3" ScrubbingEnabled="True" SnapsToDevicePixels="True"  LoadedBehavior="Manual">
    </MediaElement>      
  </Canvas>

如上文针对Grid上的Canvas所述，根据内容在XAML中的放置顺序，放置在其内容中的任何元素也将与其他元素重叠。