Silverlight MediaElement issue - c#

I am using Silverlight 3.0 + .Net 3.5 + VSTS 2008 + C# to develop a simple video application using MediaElement of Silverlight.
I have two videos and I want to play them at the same time (similar to picture in picture effect) -- i.e. a part of the two videos are overlapped when they are playing (the same concept of Z-Order in UI design). I want to play one MediaElement on top of the other MediaElement, and I am wondering how to assign the overlap order (similar to set Z-Order UI element, but I did not find MediaElement has Z-Order property)?

You could place your MediaElement inside of a Canvas. The Elements inside a Canvas Element inherit it's Canvas.ZIndex Attribute.
<Canvas x:Name="MediaPlayerPanel" Width="200" Height="200">
<MediaElement x:Name="Media1" Height="200" Width="200" Source="file1.wmv" Canvas.ZIndex="1" />
<MediaElement x:Name="Media2" Canvas.Top="20" Canvas.Left="20" Height="100" Width="100" Source="file2.wmv" Canvas.ZIndex="2" />
</Canvas>
This should work for you!

Related

wpf loading a gif image animation

I wanted to do a simple button_click that would load an animated gif and have it loop 3 times.
The closest example which is not a Winform example, is Mediaelement, but how does one load it within the button click?
Can one point me to a tutorial?
<MediaElement Height="113"
HorizontalAlignment="Left"
Name="mediaElement1"
Width="177" Source="giffy.gif"
LoadedBehavior="Play"
Stretch="Fill" SpeedRatio="1" IsMuted="False" />
I have used this one and it is easily installed via the Nuget installer into the project.
Nuget WpfAnimatedGif
Their github page WPF Animated GIF specifies how to set it to loop x number of times.

Pinch zoom on image C#/XAML

I'm creating a simple slideshow on UWP using C#/XAML
I've got a problem with the zoom on image.
In fact when I zoom, if I try to move the picture, it moves, but when I remove my hand, the picture is coming back to a "default position" like it was linked to a border or something like this...
Here is sample of my XAML
<FlipView x:Name="flipView" Grid.RowSpan="2" VerticalAlignment="Top"
Margin="0,280,0,0" Height="1490" Background="Black">
<FlipViewItem Height="1620" Width="1080">
<ScrollViewer ZoomMode="Enabled">
<Image x:Name="image" Source="Images/test.jpg" VerticalAlignment="Top"
Height="1610" Margin="0,10,0,0"/>
</ScrollViewer>
</FlipViewItem>
Do you have any idea of what can cause this ??
I just solved the problem by adding horizontal and vertical scroll bar option on auto
It's because the MaxWidth and MaxHeight of your page is becoming smaller than the image itself.
Have a look at this blogpost which gives a good solution:
http://igrali.com/2015/07/16/why-is-my-zoomable-scrollviewer-snapping-the-image-to-the-left/

MediaElement over WebBrowser

I have WPF Application with this Grid:
<Grid Name="MiddleGrid" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<WebBrowser Name="Browser" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" />
<MediaElement Name="Media" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" LoadedBehavior="Manual" UnloadedBehavior="Stop"/>
</Grid>
And i want to make the MediaElement control to be over the Browser.
Any help how i should do it?
This is a problem with how the web browser control is implemented, and you'll see the same thing if you try to embed Windows Forms controls in a WPF control as well. Things which are not native WPF (WebBrowser is provided by the IE rendering engine, with a WPF wrapper) don't participate in WPF compositing - they're child windows, not WPF controls which participate in the WPF rendering stack. The way child windows are rendered is that WPF figures out what area they should occupy, tells them about it and off they go. What WPF doesn't attempt to do is draw any WPF controls on top of it, because they can't participate in compositing with the contents of the child window underneath.
There's some information around about WPF 4.5 solving this problem (it's called "airspace") but it looks like Microsoft took that out of the final release for some reason (guessing it wasn't ready, since it's a horrendously complicated thing to do if you consider all the stuff WPF can do with render transforms, layout transforms, visual brushes and the like).

Grid On Top Of A WINRT Media Element Causes Video To Be Blank

I have a MediaElement full screen on a page. On top of this I have a grid that contains controls (Play,Pause etc..) and general info about the video. These controls are hidden after a few seconds of no user interaction.
If any part of the controls overlap the video being played then the entire Video is blanked out and only reappears when the controls grid is collapsed. Is it not possible to have a control of any kind over the top of a media element?
I notice that the "Video" App that comes as part of Windows8 RTM has this kind of effect over the top of a video that is playing.
UPDATE:
I've found the problem but not a solution. I'm trying to have a "Global" mediaelement so I can view it on different pages (Fullscreen, preview etc). I found this answer
http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/241ba3b4-3e2a-4f9b-a704-87c7b1be7988
And followed Jim Man's suggestion to create a MediaElement on the root frame and then pull that item when needed. The issue happens as soon as I say CurrentPageMediaElement = RootFrameMediaElement
I presume it's changing the z order of the media element to that of the "Global" media element in the root frame? I'm not sure why it shows video when ControlsGrid is collapsed as the root grid is still there. If I change the root grid to have an opacity less than 1 I see the media element all the time as in the code below.
If someone has a better way to share a Global Media Element around then that would also work.
//Here I Can't See The MediaElement
<Grid Style="{StaticResource LayoutRootStyle}" Background="Black">
<MediaElement x:Name="MainMediaElement" />
<Grid x:Name="ControlsGrid" Opacity="0.7" />
</Grid>
//Here I Can See The Media Element
<Grid Style="{StaticResource LayoutRootStyle}" Background="Black" Opacity="0.7">
<MediaElement x:Name="MainMediaElement" />
<Grid x:Name="ControlsGrid" Opacity="0.7">
</Grid>

WebBrowser as Canvas Background

I like to add a WebBrowser control as a Canvas background in WPF using C#. How do I do this? I have the following code at the moment. But does not work.
<Canvas
Name="canvas"
Grid.ColumnSpan="4"
Grid.Row="1"
MouseDown="Canvas_MouseDown"
MouseMove="Canvas_MouseMove"
MouseUp="Canvas_MouseUp"
Margin="0,0,0,16"
Grid.RowSpan="3">
<Canvas.Background>
<VisualBrush>
<VisualBrush.Visual>
<WebBrowser
x:Name="wbMain"
Height="246"
Width="592" />
</VisualBrush.Visual>
</VisualBrush>
</Canvas.Background>
</Canvas>
You cannot do this. The web browser control is an Internet Explorer ActiveX wrapper with the resulting airspace issues.
However, you can draw on top of it using the <Popup> control or if you don't mind losing the interactivity, try generating an image of the web page and use it as the Canvas background.
If you are thinking about using the WPF Chrome wrapper by Chris Cavanagh, bear in mind:
It does not yet support COM-Visible (so no window.external javascript methods back to your C# code)
It has a dependency on Awesomium which is only free for non-commercial use.
It will add over 10MB to your code size as it needs to embed Chromium
The WebBrowser control isn't a standard WPF control as far as I'm aware. It's basically an embedded window with an IE control in it. I'm fairly certain you can't use it in this manner.
It's an embedded IE window, so you can't use it that way.
You CAN, however, use the chrome one that way: http://chriscavanagh.wordpress.com/2009/08/25/a-real-wpf-webbrowser/
You can also map it to a surface, animate it etc.

Categories