Manipulating the browser control position on WP7 is relatively straight forward, all you need to is a couple of calls out to javascript using the InvokeScript method on the browser control. In fact this is the same pattern provided in the desktop version of WPF & Silverlight.
The only requirement is the ability to include a couple of javascript functions in a web page. Now this is only possible if you either have control over the remote content or you're using local content on the device. Recently I've been working on a phone app that uses local content. This content is designed for a particular profession who need to access to detailed and intricate data in a fast and easy manner. Each page conforms to a standard model with a simple breadcrumb style at the top to help with navigation and very detail data with embedded links. When a page is bookmarked or the back button is used to navigate the app we are need to get the scroll positions.
So shown below is a simple test app for manipulating the scroll position, as you can see it has a set of buttons for changing the scroll positions programmatically, so when I start the app and get the vertical & horizontal scroll positions they return '0' as expected. After zooming in and moving around the page and then getting the positions again you can see they have changed. Similarly if I enter a position and click a 'Set' button you would observe the browser scroll position changing:
So the C# code to call out to javascript is very simple and as I said before this is exactly same code I would use for WPF or desktop Silverlight application:
And finally the javascript, as I said you'll need some ability to get these functions included in the page directly or into a javascript file. We had the ability when the local content was installed on the device to inject these functions into the javascript file:
There is one small but important fact to remember when calling out to javascript from managed code is any value returned from javascript has to be a string value. This means if the 'getVerticalScrollPosition' method above returned a number value it would not be marshalled to managed code.
The application I used for this post can be found here.
The only requirement is the ability to include a couple of javascript functions in a web page. Now this is only possible if you either have control over the remote content or you're using local content on the device. Recently I've been working on a phone app that uses local content. This content is designed for a particular profession who need to access to detailed and intricate data in a fast and easy manner. Each page conforms to a standard model with a simple breadcrumb style at the top to help with navigation and very detail data with embedded links. When a page is bookmarked or the back button is used to navigate the app we are need to get the scroll positions.
So shown below is a simple test app for manipulating the scroll position, as you can see it has a set of buttons for changing the scroll positions programmatically, so when I start the app and get the vertical & horizontal scroll positions they return '0' as expected. After zooming in and moving around the page and then getting the positions again you can see they have changed. Similarly if I enter a position and click a 'Set' button you would observe the browser scroll position changing:
So the C# code to call out to javascript is very simple and as I said before this is exactly same code I would use for WPF or desktop Silverlight application:
private void setVScrollClick(object sender, RoutedEventArgs e)
{
try
{
this.webBrowser.InvokeScript("setVerticalScrollPosition", this.vScrollPos.Text);
}
catch (Exception exn)
{
}
}
private void getVScrollClick(object sender, RoutedEventArgs e)
{
try
{
object pos = this.webBrowser.InvokeScript("getVerticalScrollPosition");
this.vScrollPos.Text = pos.ToString();
}
catch(Exception exn)
{
}
}
private void getHScrollClick(object sender, RoutedEventArgs e)
{
try
{
object pos = this.webBrowser.InvokeScript("getHorizontalScrollPosition");
this.hScrollPos.Text = pos.ToString();
}
catch (Exception exn)
{
}
}
private void setHScrollClick(object sender, RoutedEventArgs e)
{
try
{
this.webBrowser.InvokeScript("setHorizontalScrollPosition", this.hScrollPos.Text);
}
catch (Exception exn)
{
}
}
And finally the javascript, as I said you'll need some ability to get these functions included in the page directly or into a javascript file. We had the ability when the local content was installed on the device to inject these functions into the javascript file:
function getVerticalScrollPosition() {
return document.body.scrollTop.toString();
}
function setVerticalScrollPosition(position) {
document.body.scrollTop = position;
}
function getHorizontalScrollPosition() {
return document.body.scrollLeft.toString();
}
function setHorizontalScrollPosition(position) {
document.body.scrollLeft = position;
}
There is one small but important fact to remember when calling out to javascript from managed code is any value returned from javascript has to be a string value. This means if the 'getVerticalScrollPosition' method above returned a number value it would not be marshalled to managed code.
The application I used for this post can be found here.
Good day! I know this is kinda off topic but I'd figured I'd ask. Would you be interested in exchanging links or maybe guest authoring a blog post or vice-versa? My site covers a lot of the same subjects as yours and I feel we could greatly benefit from each other. If you're interested feel free to shoot me an e-mail. I look forward to hearing from you!
ReplyDeleteFantastic blog by the way! my weblog:
CMS developer London