Make WPF control over the web browser - c#

I have a WPF application in which I have an embedded web browser control. I want to show an animation over the web browser at a certain time, but the problem is that the WPF controls, when kept over the web browser are not visible.
Is there any way to show my user control over the web browser?

Please answer me this first,
Is this Web Browser control the WPF Web Browser Control or Winform webbrowser control hosted in WinFormHost?
For any WPF control to show animation over it, did you explore ...
Placing your control in Grid or Canvas and then placing an stretched Border (which has running animation in it) as the last child of the grid/canvas?
Adorner with constantly changing drawing context to simulate animations?
Transparent Popup with animation, whose static placement is done (bound to control's absolute left, top positions and actual height & width properties) over the control?
Try the transparent popup approach for web browser control ...
<Grid>
<WebBrowser x:Name="WebBrowser1"/>
<Popup IsOpen="{Binding StartAninmation}"
AllowsTransparency="True"
Grid.RowSpan="99"
Grid.ColumnSpan="99"
Placement="Center"
Width="{Binding ActualWidth,
ElementName=WebBrowser1,
Mode=OneWay}"
Height="{Binding ActualHeight,
ElementName=WebBrowser1,
Mode=OneWay}"
PlacementTarget="{Binding ElementName=WebBrowser1}"
Opacity="0.5"
Margin="3">
<TextBlock Text="Loading ..."/>
</Popup>
</Grid>
One of these will surely work in your case.

Unfortunately thats not possible with the WPF Webbrowser Control (which is basically a wrapped WinForms WebBrowser control), due to the order the OS renders WinForms and WPF content.
See also:
Is there a way to render WPF controls on top of the wpf WebBrowser control?
There's a third party app Awsomium that should make it possible.
Edit: Another possibility would be to render a frameless window above the WebBrowser Control. But it's a bit tricky to keep it in the correct position/z-order.

CefSharp provides a pure WPF browser contorl based on Chromium/V8 that isn't subject to the airspace issues of the Microsoft WebBrowser control (disclaimer: I am the maintainer of CefSharp).

Related

How to display progress bar on top of the web browser in a popup?

I have a web browser and progress bar in a parent popup control. When the application is not running, in the design view the progress bar is being shown on top of the web browser, but as soon as the application runs the progress bar goes behind web browser. I have tried using the ZIndex also, but in vain.
Please help me with this because I have this requirement that when the content is being loaded in web browser, the progress bar should be shown at the top of blank web browser.
Code is something of this sort:
<Grid>
<Popup
IsOpen="True"
StaysOpen="True"
Placement="Center"
Height="100"
Width="200">
<Border>
<Grid>
<WebBrowser
Grid.ZIndex="1"
Visibility="Visible"
Margin="10"
Source="D:\Temp\gui1_Help.html">
</WebBrowser>
<ProgressBar
Grid.ZIndex="2"
Height="50"
Visibility="Visible"
IsIndeterminate="True"
>
</ProgressBar>
</Grid>
</Border>
</Popup>
</Grid>
This image shows progress bar on top of web browser (When the application is not running):
This image shows progress bar goes behind web browser (When the application is running):
Unfortunately, the WPF WebBrowser control is actually just a wrapped version of the WinForms control.
See: Make WPF control over the web browser
See: Is there a way to render WPF controls on top of the wpf WebBrowser control?
And due to the rendering order of WPF, WinForms will always be rendered on top of WPF controls.
You have two options:
Go with a 3rd party WPF control (to avoid WinForms altogether), such as CESSharp.
Place your progress bar inside of a new Window that has WindowStyle=None and sized to just the progress bar, and place it on top of your browser. The huge downside to this is maintaining the window position if your browser or main window is resized.

How to change the back ground color of winforms panel when it hosted in WPF?

I want host a winform Panel control in WPF by using WindowsFormsHost,after that,I found that I can't change the backcolor of hosted panel,or it's not working when you set BackColor="SomeColor".Any one has an idear?
<WindowsFormsHost Grid.Row="1">
<WinForms:Panel x:Name="VideoPanel" BackColor="Black" Dock="Fill"/>
</WindowsFormsHost>
I have found a solution,set window AllowsTransparency="False"

Let user resize control (textbox, specifically) in Canvas UWP

I have a canvas with a button that the user can press to add a new textbox to the canvas. How can I make it so the user can resize the text box by clicking and dragging on any of the corners of the textbox. Because the textbox is created in the C# code (not XAML), I would prefer code in C# not XAML.
Thanks
EDIT: My question is different than the one referenced because it is in UWP not WPF. These have very different controls. I would appreciate if you could translate the UWP information into UWP C#
You can use Thumb control instead of a textbox. The thumb control provides the functionality for you to write code to customize the drag and drop behavior. A simple code would be:
<Canvas x:Name="test">
<Thumb Width="100" Height="100">
<Thumb.Template>
<ControlTemplate>
<TextBlock HorizontalAlignment="Center" Text="12345"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
A more complex sample could be found from this SO thread from Jay's answer. But please notice you need to customize the logic yourself in order to make it resize like what you need. The reference is just a direction.

Disable scrolling phone:webbrowser windows phone 8 / 8.1

I am trying to disable the scroll functionality in the phone:webbrowser in my windows phone 8 application. The reason i wan't to do this is that I want to place a stackpanel with items underneath the webview, but still show the whole webpage.
To accomplish this I get the total height of the webpage and set the height of the webbrowser to the webpage height. This will be done through adding javascript to the webbrowser. The webview will now have the total webpage and the items underneath it and both of those items are in a ScrollViewer so you can scroll through the page.
The only problem i have right now is that you can scroll the webbrowser so you cant scroll the scrollviewer. anyone got an idea how to fix this?
<ScrollViewer
Grid.Row="1"
Margin="0,0,0,0">
<StackPanel
x:Name="ContentPanel"
Margin="0,0,0,0">
<phone:WebBrowser
x:Name="webView"
Navigating="WebBrowserNavigating"
LoadCompleted="WebBrowserLoadCompleted"
ScriptNotify="browser_ScriptNotify"
IsScriptEnabled="True"/>
<StackPanel
x:Name="CouponHolder"
Margin="0,5,0,0">
</StackPanel>
</StackPanel>
</ScrollViewer>
I also looked at other questions, but they didnt work out for me:
http://www.codeproject.com/Tips/718671/Disable-WebView-scrolling-in-Windows-Store-Apps
And I see allot of people give awnsers like VerticalScrollBarVisibility="Disabled" but this doesnt work, like the suggests it will only hide the visibility...
you can disable all manipulation with WebBrowser control by setting IsHitTestVisible="false". The disadvantage is that you can't press Links, Navigate and so on.
If you want just to disable scrolling than take a look at this blog post:http://www.scottlogic.com/blog/2011/11/17/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control.html
You can Find that the VisualTree of WebBrowser control looks like:
\-WebBrowser
\-Border
\-Border
\WebBrowserInteropCanvas (New in Windows Phone 8, missing in WP7)
\-PanZoomContainer
\-Grid
\-Border (you need access this one)
\-ContentPresenter
\-TileHost
You can get the last Border in VisualTree, and subscribe to ManipulationDelta, ManipulationStarted and ManipulationCompletedEvents. And set e.Handled = true; In event handlers. Be careful with that. For example where is no equialent for this code in Windows 8.1 and Windows Phone 8.1 (Runtime).
This hack will cancel scrolling of webbrowser while user can interract with entire web page, but you won't be able to suppress manipulation to put webbrowser in scrollviewer.
In general I don't think that you could achive ideal user experience if you put WebBrowser inside ScrollViewer
After hours of searching this project finally solved all our webview problems in Windows Phone 8.1 (bounce, touch, auto height etc.):
https://github.com/romshiri/sizeable-webview

WP7 App: Too large page

I have created a small WP7 app which contains one page which is dynamically filled with content. But it goes out of viewable area. Emulator doesn't scroll the page when I click-hold-move on the screen. How do I make it scroll when needed?
One simple option is to drop the content you require inside a ScrollViewer, so for example adding a large TextBlock as so:
<ScrollViewer Name="scrollViewer" ScrollViewer.HorizontalScrollBarVisibility="Visible" >
<TextBlock Height="30" Name="textBlock" FontSize="24"
Text="This is a long block of text which wont fit in the available area" />
</ScrollViewer>
Obviously, in most cases you will want to drop a container control such as Grid or StackPanel into the ScrollViewer and place all your other controls in there.
That said, I'm wondering if you are actually looking for some of the standard WP7 Metro look and feel controls such as the Panorama and Pivot Controls which are available in the latest dev tools - follow that link for full details.

Categories

Resources