Windows Store WebView Alternative - c#

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.

Related

Managing Autorotation in Windows 8 metro apps

How can i manage Autorotation Windows 8 Apps.
I have gone through the "Rotation" Sample from MSDN but it is hell lot confusing, what I need to do is , I need to have completely different view when in Portrait and a diiferent one in Landscape.
I have designed my view for Landscape when I need to make changes for Portrait View. I need a way to dynamically switch between to views of re-shuffle the views.
By far the easiest way to deal with this is to inherit your page from LayoutAwarePage instead of Page and leverage the Visual State Manager inside of Expression Blend to do all of the work for you.
I have a full article with lots of pictures and a downloadable sample application here:
http://jaredbienz.wordpress.com/2012/04/22/wp-to-w8-view-states-using-visual-state-manager/
You're definitely going to want to use a FlipView control here. I don't know if you're using JavaScript/HTML5 or C#/XAML, but it is available in either case.
There's a great sample on MSDN to show you how to do it, but without more context on your issue, I don't know how much more I can assist.
http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4
You can handle orientation changes in two basic ways...
1) The brute force approach. Wire into the orientationchanged event...
Windows.Graphics.Display.DisplayProperties.OrientationChanged += DisplayProperties_OrientationChanged;
In the event handle, check the orientation and navigate to a page that has been specifically layout out for that orientation...
if (Windows.Graphics.Display.DisplayProperties.CurrentOrientation == DisplayOrientations.Portrait)
this.Frame.Navigate(typeof(PortraitPage));
Pros... easy to design pages optimized for given orientations
Cons... need to handle navigation and state data between pages
2) Create a single page that changes its layout using visual states. You would still wire into the orientationchanged event, but make calls to VisualStateManager.GoToState(this,"Portrait",true).or something similar depending on how you name your visual states.
Pros... change layout without navigation and you can add cool animations easily
Cons... more complex layout could be harder if you are not comfortable with advanced xaml layouts and viewStates
If you look at the sample templates (besides blank) they include a LayoutAwarePage that handles the viewstate transitions for you, simplifying things a bit.

Moving Picture Box depending on monitor size? C#

I am using a picture box in my C# application, I want it to cover a certain portion of the web browser (the username part on youtube).
I have a 21.5" monitor and this is what it looks like to me:
But then this is what it looks like to one of my users with a 24" monitor:
As you can see the position of the picture box has moved up due to that persons screen size (I believe)
Is there a way to make sure that it will always be over that section of the web browser or moving it to that section of the web browser?
Thanks.
I am convinced your approach is wrong and would break anytime either for screen resolution or size changes, or for using the mouse-wheel to zoom in/out the page or whatever. it is just unreliable and patching this by overlapping another UI control like a picture box or a panel on top of what you want to hide is simply insecure and unreliable.
I think the tow real options you have are these:
You try to interpret the page content and remove from the page's DOM the information you do not want to show to the user (eventually HTML Agility Pack could help for this DOM parsing and manipulation but I am not sure if you can read what the WebBrowser control is showing and inject changes into it);
use the YouTube APIs and Tools - .NET APIs to load the videos and details you want to load and show but rendering this information with your specific UI elements in your windows forms application, without using a browser to show the normal YouTube site.
Probably the second option takes more work but is more secure, I am not sure 100%, as I said, if the first option is viable at all. You could search for HTML Agility Pack and web browser control to see if anybody has done this before already :)

How to create an image of a WPF UserControl at runtime

I've created a WPF application which has a Canvas on which I place UserControls which are moveable and resizeable by the user (just like a Windows-Window). Now I have detected that this can be very slow on older PC's which is a problem.
As a solution I thought about generating a graphic showing the UserControl and show this while resizing/dragging the Control, to prevent WPF from recalculating all Elements permanently. The only problem is that I have no idea how to generate this image.
Is there perhaps something like a function which does this in .Net? Or how could I do this on my own?
You can render a WPF control to a bitmap using RenderTargetBitmap, then this image can be copied to the clipboard, saved to a file, or used as part of your GUI
Check out Get a bitmap image from a Control view
Beware with this that you can hit problems when parts of the control you are trying to render are not visible (within a scroll viewer perhaps)
WPF applications really do require some fairly serious grunt; particularly in the graphics department and benefit greatly from having a decent video card present in the system. Even then the performance of WPF apps (if not carefully constructed) can leave much to be desired...
That said, you could feasibly use FixedDocument to rasterise a UserControl, and then convert this into a GIF/JPG/PNG and put this in place of the control being resized... however I would expect that process itself to be as slow or slower than your current observed performance issues.

Difference between Panorama and Pivot Control

What is the difference between the winphone 7 Panorama and Pivot Controls? To me they seem very similar, apart from the slightly different visual appearance.
In which situations should one or the other be used?
There is a video on Channel 9 with Amy Alberts and Chad Roberts that talks about the differences between the Panorama and Pivot controls and when you should use each.
In my opinion, the Panorama control is for when you need to create a "hub"-type application (like the Games hub) that acts primarily as a jumping point and offers summary information for the rest of the application. The Pivot is used in much the same way that you would use a tab control on other platforms.
As said above, the Panorama control is really meant for rich Hub type look .. smooth multi-screen scrolling with Parallax effect, ideally including images in the views. The Pivot control is more for presenting slices of the related data to the user or categorizing the content .. the in-built emails & calendar are examples. Both controls are very suited for dynamic data-binding.
Jeff Blankenburg, one of the MSFT evangelists wrote two nice posts explaining their use:
http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7.aspx
Hope this helps!
I would use the Panorama control if the content of your application lends itself to being presented in a format where you think of the screen as being a window into a larger page...one that can loop back around to the beginning. Also, consider whether that content needs to support gestures, especially swipes, because those will cause conflicts between some action intended to take place in a control, for example a map with panning, and the "outer" Panorama control's behavior of scrolling.
I'm also reconsidering using the Pivot control. It has a more distinct division between sections of content than Panorama does and I like both the gesture swiping to switch between pivots and the animation. However, it has caused some tombstoning problems and with the advent of copy-and-paste there could be a conflict between the user trying to select content to copy and the triggering of the swipe gesture to switch pivots. Disabling the Pivot Control swipe gesture talks about a possible work-around, although I haven't tried it and see from the comments below that article that there may be some other issues.

Preview of code-only WPF controls in VS2010 - how?

I hope I am able to illustrate the problem using a lot of images. First of all, I was no real fan of XAML (Silverlight issues, crashes in Preview, and so on...)
Now, with VS2010 the situation has become better. There are still a lot of things I like better in code, but I also want a preview in my VS.
So, take a look at the following control: It is really simple, a todo details list. The first screenshot shows the code of the control, pretty straighforward:
CodebasedControl http://img28.imageshack.us/img28/2263/invoicea49.png
There is no XAML, so obviously no preview. Of course, I could encapsulate it in another control, like shown in the next screenshot:
CodebasedControl http://img11.imageshack.us/img11/9515/invoicea48.png
But, in that case I have an additional file I do not want or need.
So I had the idea to move the init stuff inside the contructor of a XAML control. For simplicity, I used simple elements. But they do not show up in the preview...
CodebasedControl http://img99.imageshack.us/img99/5547/invoicea47.png
CodebasedControl http://img512.imageshack.us/img512/9625/invoicea46.png
Finally, I know I could use the controls in other parts of my app when creating UIs. But I am using layout manager, PRISM and a lot of other stuff, so I just want an easy preview of some specific control I created (without having to have a XAML wrapper file for each control)
Thanks for help, and sorry for the post structure, but I though with images it is better to understand...
Chris
Ok,
I found a way. Basically I am tricking VS by changing the XAML, but keeping the code-behind linked to the file. It the same like the wrapper solution, but without having a dedicated extra class or file. I am using the "xaml-infront" file for preview.
This solution only works with pure code controls, I have to do more research for mixed controls (at least I think so.. but it is enough for me for now).
Please be aware, the code behind is NOT partial anymore. It could be placed anywhere else, what I am doing here is basically only related to file-names and visual studio "readability"..
See screenshots for explanation:
alt text http://img15.imageshack.us/img15/5456/invoicea50.png
Some space for easier reading
alt text http://img186.imageshack.us/img186/1545/invoicea51.png

Categories

Resources