We want to show a webpage in a chromium based browser within a wpf application.
The website that is displayed within the browser should also be shown on another screen but without interaction.
I want to combine the cefsharp wpf browser control and the cefsharp offscreen rendering.
Can I use one chromium instance for displaying the page with interactions in wpf and export the current visible website as an image?
Thank you and best regards,
Simon
Thank you amatiland, it indeed works with the OnPaint Method or Event.
public MainWindow()
{
InitializeComponent();
Browser.Paint += Browser_Paint;
}
void Browser_Paint(object sender, CefSharp.Wpf.PaintEventArgs e)
{
Bitmap newBitmap = new Bitmap(e.Width, e.Height, 4 * e.Width, System.Drawing.Imaging.PixelFormat.Format32bppRgb, e.Buffer);
var aPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures), "TestImageCefSharpQuant.png");
newBitmap.Save(aPath);
}
XAML
<wpf:ChromiumWebBrowser x:Name="Browser" Address="www.google.com"></wpf:ChromiumWebBrowser>
Related
I am using WebView for loading websites in my project. It is loading websites but very slow. It takes around 10 to 15 seconds to load this site.
I try a solution from this thread. I have added android:hardwareAccelerated="true" on the manifest under application level, but no luck.
For iOS and Windows the solution is below: But I don't know how to create the custom render.
In iOS, try to use WKWebView instead of UIWebView.
For the UWP, use Windows.UI.Xaml.Controls.WebViewcontrol instead of using the built-in Xamarin WebView control.
Can I get the sample custom renderer for iOS and Windows-like above?
It is loading websites but very slow
The speed of loading website will up to lots of causes . For example, it will consume a lot of time if the web contains many remote css/js file . And it will also up to network performance .
The link that you provided loads slow even if on browser on my side . It contains lots of remote css if we check the source code.
For Android , We can create an custom renderer webview to accelerate it.
Set Render Priority to hight.
Enable the dom storeage.
When Loading the html, we can disable the image showing, when
loading finished, load the image by
Control.Settings.BlockNetworkImage.
Enable the Cache, if you load it at the nexttime, you can load it
quickly.
[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebviewRender))]
namespace MyWebviewDemo.Droid
{
public class MyWebviewRender : WebViewRenderer
{
public MyWebviewRender(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
{
base.OnElementChanged(e);
Control.Settings.JavaScriptEnabled = true;
Control.Settings.SetAppCacheEnabled(true);
Control.Settings.CacheMode = Android.Webkit.CacheModes.Normal;
Control.Settings.SetRenderPriority(RenderPriority.High);
Control.Settings.DomStorageEnabled = true;
Control.Settings.BlockNetworkImage = true;
Control.SetWebChromeClient(new MyWebChromeClient());
}
}
internal class MyWebChromeClient : WebChromeClient
{
public override void OnProgressChanged(Android.Webkit.WebView view, int newProgress)
{
base.OnProgressChanged(view, newProgress);
if (newProgress == 100)
{
// webview load success
// // loadDialog.dismiss();
view.Settings.BlockNetworkImage=false;
}
else
{
// webview loading
// loadDialog.show();
}
}
}
}
In iOS, try to use WKWebView instead of UIWebView. For the UWP, use Windows.UI.Xaml.Controls.WebViewcontrol instead of using the built-in Xamarin WebView control.
In your case it will only have less improve even if using above solution . You could add an ActivityIndicator during the loading . If you can access the website , it would be better to download the css file to local and loading them in ContentPage .
I have implemented a clickable Frame in Xamarin.Forms 2.3.4 with a custom FrameRenderer that set Clickable (and LongPressable FWIW) to true, subscribed the respective events and set the FrameRenderers foreground
TypedValue typedValue = new TypedValue();
this.Context.Theme.ResolveAttribute(Android.Resource.Attribute.SelectableItemBackground, typedValue, true);
this.Foreground = this.Resources.GetDrawable(typedValue.ResourceId, this.Context.Theme);
to achieve Material motion (ripple touch).
After updating to XF 2.5 (most likely as of 2.3.5, since fast renderers have been introduced with that release) my touch events have ceased to work. My custom renderer is assigned correctly, so are the Clickable and LongPressable properties, but nothing happens. Partially I have been able to work around the issue - at least for the moment - by subscribing to FrameRenderer.Touch and call OnClick from that event handler. This renders the app usable, but unfortunately lacks the visual feedback in form of the ripple touch effect.
Is there any way I can restore the original behavior? Is there any way to implement a clickable frame with ripple touch in XF 2.5?
With the help of this answer I have figured out a solution. Here's a draft of it:
First of all I store a local reference to my RippleDrawable (see documentation)
private void SetMaterialMotion()
{
TypedValue typedValue = new TypedValue();
this.Context.Theme.ResolveAttribute(Android.Resource.Attribute.SelectableItemBackground, typedValue, true);
this.Foreground = this.Resources.GetDrawable(typedValue.ResourceId, this.Context.Theme);
this._layerDrawable = this.Foreground as RippleDrawable;
}
then I have to subscribe to the Touch event
private void SubscribeClickEvent()
{
if (this.ClickableFrame.IsClickable)
{
this.Touch += ClickableFrameRenderer_Touch;
}
}
In my ClickableFrameRenderer_Touch I set the Pressed property and the hotspot of the RippleDrawable
private void ClickableFrameRenderer_Touch(object sender, TouchEventArgs e)
{
if(e.Event.Action == Android.Views.MotionEventActions.Down)
{
this.Pressed = true;
}
if(e.Event.Action == Android.Views.MotionEventActions.Up)
{
this._layerDrawable.SetHotspot(e.Event.GetX(), e.Event.GetY());
this.Pressed = false;
}
}
This will show the ripple touch motion (more or less) as expected. Of course this does not handle long presses, yet, but I'm on a way.
Anyway, this is not a solution I like very much. I still think that there has to be a supported way on making FastRenderers.FrameRenderer clickable. If anyone knows it: Please share your knowledge.
I have an asp.net Listview that show (for instance) 10 columns. From a desktop browser point of view, there isn't any problem.
But i would like to allow my users to see same Listview with less columns when they browse my website from a mobile desktop (tablet/iphone etc.).
Is it possible to programmaticaly check this ?
I think, for example, to create 2 listview, and via server side code, check browser/screen resolution, then hide and show the correct listview...
You can check for User Agent in http request.
var userAgent = Request.Headers.UserAgent.ToString();
You can use the function below
protected override void Page_Load(EventArgs e)
{
string userAgent = Request.UserAgent;
if (userAgent.Contains("BlackBerry")
|| (userAgent.Contains("iPhone") || (userAgent.Contains("Android"))))
{
//hide the column here
}
}
I created a SWT based Wizard which has an own help Button by custom. Now i want to put some content behind that, so maybe a SWT browser will be openend and a predifined HTML Doc will be shown. But I don't have any clue where to access the Actions of the Help Button within my Wizard. Any idea?
I am assuming that you are using the standard JFace interfaces and classes for the wizard implementation. So, in your wizard page (extending org.eclipse.jface.wizard.WizardPage) you just have to override the performHelp method. See the below snippet.
#Override
public void performHelp()
{
Shell shell = new Shell(getShell());
shell.setText("My Custom Help !!");
shell.setLayout(new GridLayout());
shell.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
Browser browser = new Browser(shell, SWT.NONE);
browser.setUrl("http://stackoverflow.com/questions/7322489/cant-put-content-behind-swt-wizard-help-button");
browser.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
shell.open();
}
>>Wizard image
>>After pressing the help button
I am playing a flv video using the videoplayer class of flex. (all the properties of it are being set at runtime)
I want to make the video fullscreen without clicking on the fullscreen button i.e. through programming.
Is it possible. If yes then how can I do this.?
Dispatch click event from the fullScreenButton of VideoPlayer.
yourplayer.fullScreenButton.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
Use the displayState property of the stage. You can access the stage as a variable on the Application class. So, conceptually, do this:
FlexGlobals.topLevelApplication.stage.displayState = StageDisplayState.FULL_SCREEN
run this code in an applicationComplete event handler on the main application tag to put your app into full screen mode after it is finished loading.
You can remove the VideoDisplay from it's parent and then add it to the stage at full width & height. Reverse the process when exiting full screen.
protected function fullScreenBtn_clickHandler(event:MouseEvent):void
{
videoContainer.removeChild(videoDisplay)
this.stage.addChild(videoDisplay);
this.stage.displayState = StageDisplayState.FULL_SCREEN;
videoDisplay.width = stage.width;
videoDisplay.height = stage.height;
this.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
}
protected function fullScreenHandler(event:FullScreenEvent):void
{
if(!event.fullScreen)
{
this.stage.removeChild(videoDisplay);
this.videoContainer.addChild(videoDisplay);
videoDisplay.percentHeight = videoDisplay.percentWidth = 100;
this.stage.removeEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
}
}