Click here to Skip to main content
Click here to Skip to main content
Technical Blog

No scroll content of WPF XBAP in IFrame

, 19 May 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Avoiding scrolling for XBAP in IFrame.

In my previous blog post, I discussed about how to hide the navigation UI of XBAP while hosting XBAP (XAML browser application) in IFrame. Note that XBAP can be accessed directly from a browser using a URL address and can also be viewed in an IFrame in an existing web site. In both cases, the user can have contents that require scrolling. If the user develops the XBAP application in such a way that the application will be accessed directly form a URL address, the user can archive the goal by adding a "scrollableview" element in your XAML page. Shown below is a code sample.

   1:  <Page x:Class="CookieTest.Page1"
   2:        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:        Title="Page1">
   5:      <ScrollViewer>
   6:          <Grid>
   7:              <!--<span class="code-comment">your content will go here–>--></span>
   8:          </Grid>
   9:      </ScrollViewer>
  10:  </Page>

The next case is if the user hosted the XBAP application in an IFrame. In this case, there is a good chance that the user will be viewing two vertical scrollbars in the user's browser if the user's existing page is long enough to cause a vertical scroll bar to appear, that is the browser's vertical scrollbar. XBAP host has a defined size, which generally is as long and wide as the browser window. So if your content is longer than the size of the XBAP host, you can lose your content from the viewable content area. Or you will end up having two scrollbars. Well, there are several solutions to this problem. Let's discuss a simpler version. Make the IFrame's height property as long as the XBAP. And make sure that your XBAP will not grow larger than that. But if your XBAP has variable content and has variable height and you got to keep the constant look, you need to do some engineering to keep things smooth. XBAP supports getting and setting of cookies in the site of origin. So do calculate your height for your content in XBAP and then set the height as a cookie. Make sure you set the height of the content as a cookie each time the content of XBAP has changed. Of course, in the case of the content that causes XBAP to change its size. Here is a code example to set the cookie for a site from XBAP:

Application.SetCookie(BrowserInteropHelper.Source, "HEIGHT=" + DemoHeight );

Now in the page where you hosted your XBAP in IFrame, read the cookie with JavaScript and then change the height of the IFrame. That's it. You will have a smooth operation of auto grow or shrink of your XBAP and it won't have any extra scrollbars. For reading the cookie, do a little engineering, for example, always track the height cookie with a JavaScript timer based function.

   1:  <script language="javascript" type="text/javascript">
   2:  function getCookie(c_name)
   3:  {
   4:      if (document.cookie.length>0)
   5:      {
   6:        c_start=document.cookie.indexOf(c_name + "=");
   7:        if (c_start!=-1)
   8:          {
   9:          c_start=c_start + c_name.length+1;
  10:          c_end=document.cookie.indexOf(";",c_start);
  11:          if (c_end==-1) c_end=document.cookie.length;
  12:          return unescape(document.cookie.substring(c_start,c_end));
  13:          }
  14:      }
  15:      return "";
  16:  }

  17:  function InCreaseHeight()
  18:  {
  19:      var hight = getCookie('HEIGHT');
  20:      if(hight != "")
  21:      {
  22:          if(document.getElementById('framename')!=null)
  23:          {
  24:              if(hight<600)
  25:              {
  26:                  hight = 600;
  27:              }
  28:              document.getElementById('framename').height = hight;
  29:          }
  30:      }
  31:      setTimeout("InCreaseHeight()",250);
  32:  }
  33:  </script>

One more thing to do: call the JavaScript increase height function on the body on the load event of the page to kick start the process.

   1:  <body onload="InCreaseHeight();">

Reference

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rahman Masudur
Software Developer Riteq
Australia Australia
About Md. Masudur Rahman
 
Masudur currently works at Riteq as a software developer. Masudur Lives in Sydney, Australia.
 
Awards
 
26 May 2009: Monthly competition: Best ASP.NET article of April 2009
 
24 Mar 2009: Monthly competition: Best ASP.NET article of February 2009
 
Masudur Blog
 
Masudur put down his interesting learning experiences in his blog at http://munnaondotnet.blogspot.com/.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141220.1 | Last Updated 19 May 2011
Article Copyright 2011 by Rahman Masudur
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid