CefSharp WebBrowser Example in WPF (transparency) - c#

I'm working with WPF and c# (using Visual Studio 2013) and I want to develop an application with a transparent background and a webbrowser. I understand that this is an issue of the default webbrowser... but I want to find another solution. I found other webbrowser components like CefSharp that is based on chromium. I'd like to know if is possible using a transparent background using the CefSharp browser and I'd like that someone explain me step by step how to implement a very simple webbrowser (I found some article but I was not able to implement a working application). If you think that there are other better components please suggest me and explain me how to make them working.
Thank you for your attention and for the replies.

This is just a quick proof of concept hack based on CefSharp.Wpf.Example to see if it was doable. Depending on what you want I think it is possible to make (some) web pages transparent.
On the picture below you see CefSharp.Wpf.Example on top of Visual Studio. There's also a partial DevTools window from CefSharp in front in the lower left corner.
Here is what I did (refer to the picture below):
Add WindowState="Normal" Opacity=".75" AllowsTransparency="True" WindowStyle="None" MinHeight="400" MinWidth="600" to the <Window> element of MainWindow.Xaml
Add a call somewhere when the browser is initialized to its ShowDevTools() method.
I then used DevTools to set the <body>s background alpha to zero on the page loaded.
Depending on what you need you will have to experiment with WPF Opacity values yourself. Also depending on the web page you need to display removing the actual background color on different elements may need some tweaking. As you can see from the example above it just needed setting one value to remove the white background on the Google search page. You can use the ExecuteJavascriptAsync() method mentioned in the CefSharp FAQ wiki page to inject JavaScript in pages you navigate to.

Related

Add Button to Non Client Area in WPF

A follow up to my Previous Question on adding a button to the Window Chrome (also known as the Non Client Area) in Windows Forms, I have decided to switch to WPF to have a better chance of solving my issue. I need to add some buttons to the Non Client Area or Window Chrome similar to that of Firefox 4
From what I have heard it is easier to do this in WPF. I have no idea where to start. If possible could someone give me some guidance on how to do this?
You should modify the Window Control Template. See examples here.

Windows Phone browser live html modification

I haven't looked into it very much but am struggling to find relevant information on the topic. I basically want to create a browser that applies a filter to a webpage by changing colors in a webpage. My guess is that I will have to change the html once loaded or something, would this work? Do I have other options?
PS. I don't just want to make every color darker, I would more like to invert the colors.
Edit:
If any you were wondering, I am talking about the XAML browser component that can be used in a Windows Phone application.
I think the simplest way to do that is to inject some Javascript into your page once it has loaded.
To do that, you need to set the IsScriptEnabled to true on your WebBrowser control and then subscribe to the Navigated event.
When that event occurs you can inject some JS codeby using the WebBrowser.InvokeScript method.
Here is an example of JS code that darken the page : JavaScript: Invert color on all elements of a page
If you are talking about in a PC internet browser, you can find an add-on to execute Javascript automatically, such as Greasemonkey for Firefox. If you are talking about Windows Phone's Internet Explorer, I don't really know what you could do there, as I don't think they allow add-ons.

Windows Store WebView Alternative

I am using the WebView extensively in a project but find its shortcomings to be a showstopper for the project. Are there any alternatives that can render HTML in windows store apps?
Edit: As requested, some of the problems we have with this control:
It has no dependency property support, you need to call the methods (workaround needed: wrap it in a custom control, or attached properties...)
It cannot render local html files (workaround with navigatetostring)
If local html files contain extra files, like css or js, you need more workarounds to make it work
It is a IE10 rendered above your application so it covers other controls (again you need that awful - sorry - webbrush workaround)
Animations do not work well when put in a Listview (scrolls faster than other controls, also stretches weird), there is no workaround
Animations do not work at all when put in an animated flyout, there is no workaround
It breaks semantic zooming in portrait mode (besides needing the webbrush workaround for it to work) for unknown reasons if you zoom in. It works in landscape and in portrait as long as you do not navigate anything, but do not never anytime navigate a website and it breaks the zooming.
There are probably more issues we had, these are the ones that made us consider it a showstopper
We had the same problem but solved it with the much more, not "shortcoming" alternative in this XAML Toolkit for WinRT.
There is a WebBrowser control you must have a look at.

How to develop an application like Google Chrome browser in WPF using C#

I am trying to develop an windows application like Google chrome Browser in WPF
using C#.I am facing problem in making my own Custom Window and Placing Tabs at the Place of the Title Position of that window.
Please suggest me how to go for it, is there any tool for this ?
Guide me please..........
Updated:
Hi Friends Thanks for your active responses and I also followed the links you gave and the way you told, but still I have doubts in developing the application please give me some more ideas where I can develop this application by using Google Chrome like controls. I want to give my application Google Chrome like look and feel.....
Google Chrome essentially custom-draws the non-client area of its window to remove things that it considers superfluous like the title bar. That's how it gets the tabs to replace the title bar of the window, just like how Microsoft Office places its "pearl" and quick access toolbar in the title area of document windows.
To do something similar in WPF, you may find this article useful: Link
Remember that any time you re-implement the standard windows chrome, you're going to have to handle a bunch of stuff that Windows normally makes transparent to you, like resizing, minimizing, maximizing, moving, and closing a window.
It is worth considering that both Google Chrome and Microsoft Office applications (among others) behave differently depending on whether Aero Glass and the Desktop Window Manager (DWM) are present/enabled. You're going to have to make sure that your application degrades gracefully when these things are missing. I would advise being sure that you can really make a convincing case for the necessity and benefit to the users before you invest all the time and energy it takes to do things like this in your application.
I just finished a Google Chrome-like Tab Control for WPF. You can find the project at https://github.com/realistschuckle/wpfchrometabs and blog posts describing it at
Google Chrome-Like WPF Tab Control
ChromeTabControl and Visual Children in WPF
WPF Chrome Tabs Functioning
Hope that helps!
It appears that Chrome draws its tabs within a limited region of the title bar area. When enough tabs are open, the width of existing tab controls is reduced to make room for a new tab.
I would suggest that you adopt a similar strategy by drawing your tabs in a suitably sized Rectangle which does not intersect with the caption buttons (Minimize, Maximize Close) and reducing the width of existing tab headers when the region becomes full
[Update 1]
While I haven't seen your code, I would suggest this happens because the tab header (the part displayed in the title bar area) and the tab page (the part covering most of the screen) are a part of the same control and are drawn as a unit, so when you try and draw the header in the region the tab content is redrawn too.
If this is the case, then you need to draw the tab header and the content page as separate controls and maintain some state in the tab that indicates which tab page should become visible when the tab is selected.

Windows Forms Browser Skeleton (C#/.NET)

I was wondering if anyone knows of an existing sample or an approach to achieve the desired functionality.
Basically, what I'm looking for is a web browser like skeleton. The idea is that the main screen of my application is shown in the left tab. This tab can never be closed. On this screen is an overview of various application components such as activities, events, contacts, etc.
When the user clicks on a specific contact/event/activity a new tab is created and auto-focused. The user can view and edit the information. When they are done they can close the tab.
The ability to have multiple tabs open is important.
Also, keyboard shortcuts to easily navigate between tabs would be great, but not absolutely essential at this point.
Note: I don't need to access any web content.
Really what I'm looking for, at least what I think I'm looking for, is a shell of a modern web browser. Does something like this exist? Is there a good approach to building such an application?
Note: I'm new to Windows GUI development, so I apologize if this is a rudimentary question. I was unable to find anything meaningful while searching MSDN and other resources.
Thanks!
What it sounds like is not really a Web Browser shell at all, simply the relative appearance of one functionality-wise.
What you can do is use a TabControl control. This can be altered to suit your needs quite perfectly in my view.
An example of a modified TabControl is as follows: [ From here ]
There are a number of things that can be done with a TabControl (as with any other component) to make it suit what you need.
Here are some links that you may find helpful:
Flat Tab Control - As per the picture
MSDN
Video on using a Tab Control
C# Corner

Categories

Resources