I'm currently using a WebView2 in my WinUI3 application to display some HTML which is sent from our server.
The HTML itself doesn't contains a body / html tags and is displayed through NavigateToString:
await web.EnsureCoreWebView2Async();
web.NavigationCompleted += async (sender, args) => await sender.ResizeToContent(); // more about this later
web.NavigateToString(someText);
When I display this HTML in my WebView, the WebView's height is always set at 0 by default, and I want my WebView to autosize to its content (I cannot set a fixed sized for its container and stretch the webview to it).
I tried executing scripts found there to evaluate the HTML's size:
How to get height of entire document with JavaScript? :
public static async Task ResizeToContent(this WebView2 webView)
{
var script = "";
var heightString = await webView.ExecuteScriptAsync(script);
int height = 0;
if (int.TryParse(heightString, out height))
{
webView.Height = height;
}
}
Here are 2 differents scripts I tried:
eval(document.documentElement.scrollHeight.toString());
and
;(function() {
var pageHeight = 0;
function findHighestNode(nodesList) {
for (var i = nodesList.length - 1; i >= 0; i--) {
if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
pageHeight = Math.max(elHeight, pageHeight);
}
if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
}
}
findHighestNode(document.documentElement.childNodes);
return pageHeight;
})();
But in both cases, no mater the HTML provided, it always returns 1040 even with a simple HTML such as <p>test</p>
When I set a fixed height for my WebView, let's say of 60, this p is displayed correctly without scrollbar (while my script would return a height of 1040) BUT when I do some complex HTML intended to be bigger than those 60px, the webview displays a vertical scrollbar.
So all in one, it seems the WebView somehow knows that 1040 is not the real height (otherwise I'd have a scrollbar all the time).
Note that I've also tried to surround my text with <html><body>{myText}</body></html> with the same result.
How can I get the real actual content's height?
Thanks.
After trying other solutions, here is what I came up with which seems to work:
In my ViewModel:
Text = $"<div id='container'>{_source.Text}</div>";
And in my extension method to get the height:
public static async Task ResizeToContent(this WebView2 webView)
{
var script = "eval(document.getElementById('container').getBoundingClientRect().height.toString());";
var heightString = await webView.ExecuteScriptAsync(script);
if (int.TryParse(heightString, out int height))
{
webView.Height = height + 30;
}
}
I had to add the +30 because otherwise the scrollbar was displayed and the webview's content slightly truncated.
Is there any cleaner and less hacky way to do this?
Related
We want to use the print function in WebView2, the Version of Webview2 is 1.0.1108.44. We try to print HTML to PDF. Our expectation is that the image starting from top left without any spaces. Therefore, we try to set the margins in the CoreWebView2PrintSettings, but it seems like no effect on the final result
private async void InitializeAsync()
{
WebViewTest.NavigationCompleted += WebView_NavigationCompleted;
await WebViewTest.EnsureCoreWebView2Async(null);
WebViewEnvironment = await Microsoft.Web.WebView2.Core.CoreWebView2Environment.CreateAsync().ConfigureAwait(true);
}
private async void WebView_NavigationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs e)
{
//WebViewTest.CoreWebView2.ExecuteScriptAsync("window.print();");
CoreWebView2PrintSettings lPrintSettings = WebViewEnvironment.CreatePrintSettings();
lPrintSettings.MarginBottom = 0;
lPrintSettings.MarginLeft = 0;
lPrintSettings.MarginRight = 0;
lPrintSettings.MarginTop = 0;
lPrintSettings.ShouldPrintBackgrounds = true;
lPrintSettings.ShouldPrintHeaderAndFooter = false;
lPrintSettings.ShouldPrintSelectionOnly = false;
await WebViewTest.CoreWebView2.PrintToPdfAsync(PathPDF, lPrintSettings);
}
and then we get the result, it still contains a lot of spaces on the top and right sides
The expected print result is print with
WebViewTest.CoreWebView2.ExecuteScriptAsync("window.print();");
It uses windows print, and margins could be set to None, and image starts from top left.
Could you please help us to solve this problem, maybe we have set something wrong? Thank you in advance!
Update:
My original way is using HTML file and navigate function of CoreWebView2. In this case Margins doesn't work
private string PathHTML = #"E:\Capture.html";
WebViewTest.CoreWebView2.Navigate(PathHTML);
Now I try the code from Haldo, and put the capture.jpeg in the folder C:\inetpub\wwwroot, load this jpeg with img src and using NavigateToString, then Margins works
WebViewTest.NavigateToString(GetHtml());
private string GetHtml()
{
return #"<html><body>
<div>
<p style=""color: red; font-weight: bold;"">Some text</p>
<img src=""http://localhost/capture.JPG"" alt=""test image""/><br/>
</div>
</html></body>";
}
The result pdf screenshot is here, set Margin to 0 and set Margin to 1
But I still don't know, why in my case the margins doesn't work
I have the following code to take a picture in Xamarin:
MediaFile photo = await Plugin.Media.CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions()
{
SaveToAlbum = true,
Name = fileName
});
However, after I've taken the picture, I want to retrieve the width of the image. I thought there might be a:
photo.Width
But there is not. There is a PhotoSize property on the StoreCameraMediaOptions, but that appears to be a way to dictate the size, rather than retrieve it.
Is there a way to do this in Xamarin, or an existing plug-in that will accomplish it?
Using FFImageLoading the ImageInformation class gives you the original height & width,
you could assign a mediafile to an image then get the width of that image that rendered the mediafile
var image = new CachedImage()
{
Source = ImageSource.FromStream(() => photo.GetStream())
};
image.Success += (sender, e) =>
{
var h = e.ImageInformation.OriginalHeight;
var w = e.ImageInformation.OriginalWidth;
};
Hope this one might helps.
Here you go this might help you...
public static Size GetImageSize(string fileName)
{
#if __IOS__
UIImage image = UIImage.FromFile(fileName);
return new Size((double)image.Size.Width, (double)image.Size.Height);
#endif
return Size.Zero;
}
I am using Xamarin and C# but I suspect the problem is equally valid in a Java environment.
I have an ActionBar Activity that hosts three tabs each of which hosts a fragment. It uses a ViewPager to allow the user to swipe between the tabs.
The requirement is to programmatically screenshot each tab and then email these as attachments.
The problem is that whilst the ActionBar/ViewPager works well it also optimises the tabs - effectively it isn't creating a fragment's view until it is next in line to be shown. So, if you're on tab 0 - the first tab - then the fragment view for tab 2 is null. So it can't be screenshot.
To overcome this I have tried to set any tab/fragment that has a null view to be selected. This generates the view but because setting it to be selected does not actually render it on screen the view does not have a width or a height value so again it cannot be screenshot (this is the reason for the defensive check at the start of the code taking the screenshot).
So, I guess my question is how can I force the tab to be rendered on screen so that it is correctly filled out and can be screenshot?
My main code extracts are as follows:
private void EmailReport()
{
List <Bitmap> bitmaps = new List<Bitmap>();
List <string> summaryFiles = new List<string>();
// remember the tab we're on
var selectedTab = this.ActionBar.SelectedNavigationIndex;
// take the screenshots
for (int fragmentNumber = 0; fragmentNumber < projectFragmentPagerAdapter.Count; fragmentNumber++)
{
Android.Support.V4.App.Fragment fragment = projectFragmentPagerAdapter.GetItem(fragmentNumber);
if (fragment.View == null)
{
this.ActionBar.GetTabAt(fragmentNumber).Select();
fragment = projectFragmentPagerAdapter.GetItem(fragmentNumber);
}
bitmaps.Add(ScreenShot(fragment.View));
}
// set the active tab back
this.ActionBar.GetTabAt(selectedTab).Select();
//write the screenshots into file
int i = 0;
foreach(Bitmap bitmap in bitmaps)
{
if (bitmap != null)
summaryFiles.Add(BitmapToFile(bitmap, this.ActionBar.GetTabAt(i).Text));
i++;
}
// now send the file
EmailSupport.SendAttachments(this, summaryFiles);
}
private Bitmap ScreenShot(View fragmentRootView)
{
if (fragmentRootView == null || fragmentRootView.Width == 0 || fragmentRootView.Height == 0)
return null;
fragmentRootView.DrawingCacheEnabled = true;
//create a bitmap for the layout and then draw the view into it
Bitmap bitmap = Bitmap.CreateBitmap(fragmentRootView.Width, fragmentRootView.Height,Bitmap.Config.Argb8888);
Canvas canvas = new Canvas(bitmap);
//Get the view's background
Drawable bgDrawable = fragmentRootView.Background;
if (bgDrawable!=null) // has background drawable, then draw it on the canvas
bgDrawable.Draw(canvas);
else // does not have background drawable, then draw white background on the canvas
canvas.DrawColor(Color.White);
// draw the view on the canvas
fragmentRootView.Draw(canvas);
fragmentRootView.DrawingCacheEnabled = false;
return bitmap;
}
Any help would be gratefully received.
The solution in the end was very simple. The ViewPager has a setting controlling the number of pages (fragments) that it will hold "activated". This defaults to 1. As I had 3 tabs this meant there was always one tab (fragment) out of reach.
So, whilst setting up the ViewPager do the following before the tabs are added:
reportViewPager.OffscreenPageLimit = pageCount - 1;
Or in Java
reportViewPager.setOffscreenPageLimit(pageCount - 1);
I hope this helps someone else avoid wasting hours.
I am trying to style a div which has an asp.net gridview within it.
I am using javascript code.
The div is a popup on asp.net buttonclick event.
I have the code below :
function ViewPopup() {
document.getElementById('PopupDiv').style.visibility = 'visible';
document.getElementById('PopupDiv').style.display = '';
var screenHeight = document.documentElement.clientHeight;
var elementHeight = document.getElementById('PopupDiv').clientHeight;
if (screenHeight > elementHeight) {
document.getElementById('PopupDiv').style.top = ((screenHeight - elementHeight) / 2) + 50 +'px';
}
else {
document.getElementById('PopupDiv').style.top = '10px';
document.getElementById('PopupDiv').style.bottom = '20px';
document.getElementById('PopupDiv').style.overflow = 'scroll';
}
var scrWidth = document.documentElement.clientWidth;
var elWidth = document.getElementById('PopupDiv').clientWidth;
document.getElementById('PopupDiv').style.left = ((scrWidth - elWidth) / 2) - 20 + 'px';
document.getElementById('MaskedDiv').style.display = '';
document.getElementById('MaskedDiv').style.visibility = 'visible';
}
The problem is that .. when the screenheight < elementheight , the control goes to the else statement and a popup
is displayed with scrollbar. Imagine the dimensions of the popup are x and y.
Next time when there is a button click , if screenheight > elementheight, the control goes to the if statement,
but the popup dimensions are again x and y. That is the dimensions are carried from the earlier button click event.
Is there any way I can make sure that the popup fits the gridview perfectly ?
Have you tried putting breakpoints on the var, var and if lines? Then slowly stepping through the code? I'd be curious if "slowing" down the JavaScript allows the correct elementheight and screenheight to be obtained. It's not much of an answer, but I had a similar situation where I had to slow down the code by putting a timer on it so it could get the right dimensions of my element, then continue on to my if statement after the fact. I'd show the code, but that is with a former employer...
I hope in some way this helps.
I am using ASP.Net and jQuery/jQuery UI and I am trying to use the datepicker control. It works fine on every page, except when I have to use the popup (to add new data into the database and then i refresh the current page to reflect the new data being entered). It seems that document.ready() is failing when I use the popup. I can invoke the datepicker control manually with adding a click event to fire off the showcalendar function, however I want to try and make it work. Does anyone have any ideas of why a popup would fail document.ready() ?
Thanks!
Code in UserInterfaces.js Script File:
$(document).ready(function(){
$(".calendarTrigger").datepicker({showOn:'focus', showAnim: 'fadeIn', changeMonth: true, showOn:'both', buttonImage: '/images/calendar.gif', buttonImageOnly: true, changeYear: true, yearRange: '1950:2010'});
});
Code Calling Popup Functionality:
<a href="#" onclick='javascript:openWindow("/modules/prh/AI.aspx","PH","480","650","","");'
Code For Modal Popup That we use:
function openWindow(url,name,height,width,left,top)
{
if(!width) {width = 625};
if(!height){height = 625};
if(!left) {left = 60};
if(!top){top = 60};
if (!name) {name='mk'};
name = name.replace(" ","");
if ((window.showModalDialog) && (navigator.appName!="Microsoft Internet Explorer"))
{
grayOut(true);
newWindow = window.showModalDialog(url,"name","dialogWidth: " + width + "px;dialogHeight: " + height + "px;resizable: 1;status: 0;scrollbars: 1;dialogLeft: " + left +"px;dialogTop: " + top + "px");
if (newWindow)
newWindow.focus();
grayOut(false);
}
else
{
newWindow = window.open(url,name,'width=' + width + ',height='+ height +
',resizable=1,status=0,scrollbars=1,left=' + left +',top=' + top);
if (newWindow)
newWindow.focus();
else
window.Name.focus();
}
}
function grayOut(vis, options) {
// Pass true to gray out screen, false to ungray
// options are optional. This is a JSON object with the following (optional) properties
// opacity:0-100 // Lower number = less grayout higher = more of a blackout
// zindex: # // HTML elements with a higher zindex appear on top of the gray out
// bgcolor: (#xxxxxx) // Standard RGB Hex color code
// grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
// Because options is JSON opacity/zindex/bgcolor are all optional and can appear
// in any order. Pass only the properties you need to set.
var options = options || {};
var zindex = options.zindex || 50;
var opacity = options.opacity || 70;
var opaque = (opacity / 100);
var bgcolor = options.bgcolor || '#000000';
var dark=document.getElementById('darkenScreenObject');
var tbody = document.getElementsByTagName("body")[0];
if (!dark)
{
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
// If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
var tnode = document.createElement('div'); // Create the layer.
tnode.style.position='absolute'; // Position absolutely
tnode.style.top='0px'; // In the top
tnode.style.left='0px'; // Left corner of the page
tnode.style.overflow='hidden'; // Try to avoid making scroll bars
tnode.style.display='none'; // Start out Hidden
tnode.id='darkenScreenObject'; // Name it so we can find it later
tbody.appendChild(tnode); // Add it to the web page
dark=document.getElementById('darkenScreenObject'); // Get the object.
}
if (vis)
{
var pageWidth="100%";
var pageHeight=getPageHeightWithScroll();
if (window.innerHeight>pageHeight)
pageHeight = window.innerHeight;
pageHeight = pageHeight + "px";
//set the shader to cover the entire page and make it visible.
dark.style.opacity=opaque;
dark.style.MozOpacity=opaque;
dark.style.filter='alpha(opacity='+opacity+')';
dark.style.zIndex=zindex;
dark.style.backgroundColor=bgcolor;
dark.style.width= pageWidth;
dark.style.height= pageHeight;
dark.style.display='block';
}
else
{
dark.style.display='none';
}
}
What is the markup for your popup and do you have any other javascript that could possibly cause an error before datepicker fires inside the popup?