<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:WebBrowser x:Name="browser" IsScriptEnabled="True" Margin="-12,0,-11,0" />
</Grid>
I initialized web browser using this code. Since, my html content is too big, it takes much more to load those html files. Till the html files displayed, web browser is being white color.
It makes me irritate. I need to know can we have any loader pic in web browser. So, the pic displayed until web browser loads the html files ???
I can't verify this at the moment but the approach I would take is to display an image via Image or some alternative, such as a loading message in XAML, and set the initial visibility of this stand-in to visible and the WebBrowser to collapsed.
Implement an event handler for the LoadCompleted event on the WebBrowser and when it is triggered, swap the visibility states to hide the progress/wait message and show the web browser.
It'll look roughly like:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Loading... please wait" Visibility="Visibile" x:Name="loadingMessage"/>
<phone:WebBrowser x:Name="browser" IsScriptEnabled="True" Margin="-12,0,-11,0" LoadCompleted="htmlLoadCompleted" Visibility="Collapsed"/>
</Grid>
// In the code behind - HTML finished loading, swap visibility to show the page
private void htmlLoadCompleted(object sender, NavigationEventArgs e)
{
loadingMessage.Visibility = Visibility.Collapsed;
browser.Visibility = Visibility.Visibile;
}
I have concerns over when/how the WebBrowser starts loading, which is why I'd like to caution I don't have a local environment configured to verify this approach is 100% working. You might need to experiment with this some to get it working but I hope this helps set you on the right path.
Related
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.
I have to display multiple HTML contents on a single window. These data come as strings. Every string represents one HTML file data.
I am using webbrowser control and stackpanel layout to display them on a single window.
<Grid >
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Background="YellowGreen">
<WebBrowser Margin="5" Loaded="WebBrowser_Loaded"/>
<WebBrowser Margin="5" Loaded="WebBrowser_Loaded" />
<WebBrowser Margin="5" Loaded="WebBrowser_Loaded" />
</StackPanel>
</ScrollViewer>
private void WebBrowser_Loaded(object sender, RoutedEventArgs e)
{
WebBrowser web = sender as WebBrowser;
web.NavigateToString(VM.HtmlContent);
}
Problem: Webbrowser is not rendered to its content size.
Regardless of the actual content size, all webbrowsers take same amount of space in the stack panel.
Current Output Screenshot
Web browsers 2nd and 3rd have not taken the required amount of space to render the content.
It seems the Webbrowser control is not giving the right information about its content size to the stack panel.
Given that, web browsers get rendered to its content size, I would like to avoid the scroll bar at the web browser level.
Any help is highly appreciated. Thank you.
WebBrowser control does not support this functionality. However you can get the content size and resize controls manually as demonstrated in this thread: https://stackoverflow.com/a/40795036/12797700
I want to print a WebView contents inside a UWP app.
I've set up my WebView to accept an HTML string, and this works fine:
<WebView
ext:HtmlExtension.HtmlString="{Binding HtmlString}"
x:Name="MyWebView"
Grid.Row="1"
Grid.Column="0"
/>
I noticed this though on MSDN:
A WebView that hosts content off the UI thread is not compatible with parent controls that require gestures to propagate up from the WebView control to the parent, such as FlipView, ScrollViewer, and other related controls. These controls will not be able to receive gestures initiated in the off-thread WebView. In addition, printing off-thread web content is not directly supported – you should print an element with WebViewBrush fill instead.
Now I'm completely confused.
Can someone please explain how I can:
Create a WebViewBrush given I have a WebView
How to then print this WebViewBrush
Any help is greatly appreciated. Thanks.
You can use the following codes to create a WebViewBrush:
WebViewBrush wvBrush = new WebViewBrush();
wvBrush.SetSource(myWebView);
wvBrush.Redraw();
myRect.Fill = wvBrush;
XAML:
<WebView Name="myWebView" Source="http://www.google.com" Width="1024" Height="500" LoadCompleted="myWebView_LoadCompleted"/>
<Rectangle Name="myRect" Width="1024" Height="500"/>
Then the static content of the webview will be rendered into the Rechtangle just like a picture. And you can print the Rechtangle instead.
For printing, I suggest you reading through Print from your app. And there is also an official sample for you to refer to:UWP Print Sample.
I have tried phone:Webbrowser which does not automatically size to the required amount.
I have tried many textbox and richttextbox property extension libraries, I cannot get any to work.
I want to know how people get html into textboxes or richtextboxes in windows phone 8.
Argh, I have spent 2 evenings on this now! doh!
Context:
I am calling an API that is returning html (why oh god why)... I want to bind the returned html to a textbox or richtextbox or if I haveeee to, a phone:webbrowser.
Textbox and richtextbox do not support html.
phone:webbrowser does not adjust its height according to what's inside the document. You can supposedly do it by enabling javascript and calling window.external.Notify() but I couldn't get it to work quite right...
Moving on from the above problem, even if I did get the phone:webbrowser to work, if for test purposes I make the width 500 and height 500, I can see my html string as plain text rather than the webcontrol correctly parsing html... doh!
Just try this way.
your xaml:
<Grid x:Name="ContentGrid" Grid.Row="1">
<phone:WebBrowser HorizontalAlignment="Left" Margin="20,50,0,0" Name="webBrowser1" VerticalAlignment="Top" Height="500" Width="430" />
</Grid>
in your code:
public MainPage()
{
InitializeComponent();
webBrowser1.Loaded += WebBrowser_OnLoaded;
}
private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
webBrowser1.Navigate(new Uri("readme.htm", UriKind.Relative));
}
Hope it helps
So I have a Panorama control and the PanoramaItems are programmatically added to the control using the following template.
<UserControl>
<Grid x:Name="LayoutRoot">
<controls:PanoramaItem Name="sitePanoramaItem" Header="{Binding Name}">
<Controls:DockPanel VerticalAlignment="Stretch">
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" Controls:DockPanel.Dock="Top">
<Image Source="../Images/action.png" Width="64" />
<TextBlock Text="{Binding Stats, Mode=TwoWay}" FontSize="45" Margin="15,0,0,0" />
</StackPanel>
<Grid x:Name="graphCanvas" HorizontalAlignment="Stretch" Margin="10,10,10,10"> </Grid>
</Controls:DockPanel>
</controls:PanoramaItem>
</Grid>
</UserControl>
When I click on graphCanvas what I'd like to do is sorta pop the graphCanvas out and display that fullscreen then when I click again restore it to where it was. I've been all over this site and Google and can't find anything similar to what I'm looking for.
I would still like to maintain the Panorama control functionality so that the graphCanvas is still the only one visible but you can cycle through them. Currently I have it sorta working in that I remove the Grid from the DockPanel and put it directly in the LayoutRoot while making the sitePanoramaItem collapsed. However, it's not fullscreen as the Panorama name is still visible (I guess I could hide that as well...) When I put the graphCanvas back int he DockPanel the size of the canvas is all screwed up.
I was hoping there was a simpler way.
Is it even possible?
It is possible to create the UI you describe but it's not going to be simple. You're on the right track with removing it in code and adding it the LayoutRoot and making the Panorama hidden. However you would have to code the scrolling behavior yourself and that is going to be quite tricky - especially making it feel the way to panorama does.
One trick you could try is actually layer a PivotControl on top of your Panorama and have it be collapsed by default. Also edit it's template to remove all default content eg: remove the header control, set margins to 0, etc). Then when you want to go full screen you can remove all the graphCanvases from the Panorama items and and add them to new PivotItems in the PivotControl. Then hide the Panorama and show the Pivot. This will give you scrolling capability for free and the illusion of full screen.
Having said all that I'm not sure I would recommend this. The more common approach would be to simply be to navigate to another page when the user selects an item and handle the full screen aspects there (possibly using the Pivot control again for scrolling). And when you want to leave "fullscreen" mode simply navigate back to the first page. Handling Tombstoning of the fullscreen state will be much easier with this approach for one thing.
You can try making the graphCanvas a Page and putting it in a different XAML. Then add a frame (name it InnerFrame for example) in the same place where you have the graphCanvas right now and navigate to that page with InnerFrame. When the frame is clicked, you navigate with the RootFrame of the app to your graphCanvas page. When you decide to close it, just navigate back with the RootFrame.
Hope it's clear enough :)
Edit:
Navigation in WP7 works very similar as the standard navigation in Silverlight 4, but it's a bit more restrictive. Just throw a PhoneApplicationFrame in your XAML like this:
<phone:PhoneApplicationFrame x:Name="Frame" />
This is basically the same as a Silverlight frame. All the pages you create inherit from PhoneApplicationPage by default, so they can be showed in a frame without any changes.
Your whole application actually runs on a PhoneApplicationFrame. If you take a look at your App class you will see this:
public PhoneApplicationFrame RootFrame { get; private set; }
Here's the MSDN documentation for the navigation system on WP7