Search code examples
c#wpfxamlmediaelement

WPF - Positioning of controls

I have to play three videos at a time. For that I have used three media elements which is horizontally aligned inside the stack panels of grid. Now I want to display the videos in such a way that second video (MediaEL2) should be placed on top of second half of video 1 and first half of video 2. Which means, the starting location of MediaEL2 should be from starting point of second half of video 1 and the ending point should be the end of first half of video3. It can be very easily achieve in WinForm using 'Location'. But can I implement it in 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>
Solution

  • You have different ways to do what you are asking.

    It's not so clear how is structured the rest of your XAML, btw you can try at least 2 different approaches.

    Approach A: using Grid

    Any element you put in a Grid will overlap the others, based on the order you placed them in your XAML. The former is in the background, the latter is on top of others. That means you may organize you MediaElements in a Grid then using Margin of each MediaElement you can placed them where you want.

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

    Margins of 100 and 200 here is just a sample to let you shift your MediaElements a bit, you may Bind them to other MediaElement width and height.

    Approach B: using Canvas

    Canvas let you placed elements inside it whenever you want, simply by setting Canvas.Left and Canvas.Top which is quite similar to Location you mentioned in WinForms.

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

    As explained above for Grid on Canvas too any element you put inside its contentwill overlap the others based on the order you placed them in your XAML.