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).
Related
This question already has an answer here:
WinAPI / WPF: Set system cursor only for application
(1 answer)
Closed 5 years ago.
I am trying to override the default windows cursor when a user resizes my application window. I'm successful in changing the cursor inside the app, but I don't know where to start on the sizing cursors.
My first reaction was to try to change it when the window is actually being resized, but this would be after windows has shown the default cursor right?
So in short is there a way to detect the mouse over the sizing border before windows changes cursors?
Or can I override the windows default for this? There isn't a sizing border cursor property that I am overlooking right?
Thank You,
George
Edit:
I have tried various ways of using <ResizeGrip Cursor=""/> but to no avail. I don't understand how to use it properly apparently. If I put it inside of the <Grid> area it just has that cursor all the time, and still the default one when resizing.
I'm sure this is something small that I'm not grasping and I would appreciate any feedback.
Edit:
To the person who down voted and said this is answered elsewhere: That link is for C++ related function not C#. Maybe that is the answer but I do not quite understand how to translate it to C# or for that matter WPF since it seems to stem from winforms.
The resize grip should probably be aligned to the border of the grip. Something like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Green"/>
<ResizeGrip Grid.Column="1" Background="Blue" Cursor="SizeWE"/>
<Border Background="Red" Grid.Column="2"/>
</Grid>
I have a borderless transparent (rounded corners) WPF Window. It is a fairly complex app with a lot of dialogs that can be shown or hidden. We do this via MVVM binding to the Visibility property using the BooleanToVisibilityConverter which, as far as I am aware, set the visibility to Visible or Collapsed accordingly.
When I resize the window I get a significant lag in the drawing of the window that tends to leave content (borders, framework elements) behind (in that they dont follow the resize very fast). So to clarify I have the main window and the content inside of it (the content is inside a border). The main window will follow the mouse on resize accurately but the content will follow very slowly and will jerk.
I can't figure out what it is, can anyone offer any assistance? Obviously I am assuming that Collapsed dialogs are not resized (or relocated) when the window resizes.
Here is a little example of how we setup a dialog within the Main Window
<Grid x:Name="GlobalModalBackground" Visibility="{Binding ShowGlobalModalBackground, Converter={StaticResource BoolToVisibilityConverter}, FallbackValue=hidden}" Grid.ColumnSpan="2">
<Border CornerRadius="3" Background="#66000000" Opacity="{Binding ModalOpacity}" />
<Grid>
<local:About x:Name="AboutDialog" DataContext="{Binding AboutViewModel}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="300" Width="500"/>
<!-- Other dialogs here -->
In this case, the AboutDialog itself will take care of showing itself or closing itself based on what its ViewModel is set to.
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.
I need to draw over the html page. Page displayed in a Frame element.
The problem is that InkCanvas does not work with Frame.
I tried to insert TextBlock instead of Frame - painting works.
Does not work:
<Frame Grid.Row="1" Source="http://google.com/"></Frame>
<InkCanvas Grid.Row="1" x:Name="inkCanvas" Background="Transparent"></InkCanvas>
Work:
<TextBlock Grid.Row="1" Margin="10" Text="Some text"></TextBlock>
<InkCanvas Grid.Row="1" x:Name="inkCanvas" Background="Transparent"></InkCanvas>
When the Frame control navigates to HTML content, the Frame control internally instantiates the native WebBrowser ActiveX control. This involves HWND interop. As a result of that the "airspace proplem" comes into play. It basically means that no WPF content can overlap that AcitveX HWND. You can partly work around this propblem by wrapping the overlay into another HWND (e.g. using Winfows Forms and ElementHost). But this solution will not allow you to have transparency in the overlay.
Another trick you could try is to use the WindowsFormsHost to host the Windows Forms Browser Control instead of using a Frame.
Last but not least you could use the Chromium WPF Webbrowser Control instead of the Frame control if you can afford it. It is based on the Awesomium library. Which unfortunately is only free for non commercial use. This is the only solution that allows you to use all the advanced WPF goodies like transformation (rotation, skew etc.), bitmapeffects or transparency etc. Width the other two solutions you are bound to a fixed opaque rectangle.
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!