Thursday, March 6, 2008

No Scroll content of wpf xbap in iframe

In my previous blog post i have discussed about how to hide the navigation ui of xbap while you hosting Xbap ( Xaml browser application) in iframe. Note that xbap can be accessed directly from browsers url address and can also be viewed in a iframe in existing web site. In both case user can have contents that requires scrolling.If user developed the xbap application in such a way that the application will be accessed directly form url address, user can archive the goal by adding a "scrollableview" element in your xmal page. bellow a code sample is provided.

   1:  <Page x:Class="CookieTest.Page1"

   2:        xmlns=""

   3:        xmlns:x=""

   4:        Title="Page1">

   5:      <ScrollViewer>

   6:          <Grid>

   7:              <!--your content will go here–>-->

   8:          </Grid>

   9:      </ScrollViewer>

  10:  </Page>

Next case is if user hosted the xbap application in a iframe. In this case there is a good chance that user will be viewing two vertical scrollbar in user's browser if users existing site's page is long enough to cause view a vertical scroll bar, that is the browser's vertical scrollbar. Xbap host have a defined size, which generally as long and wide as the browser window. So if your content is longer than the size of xbap host, you can loose your content from viewable content area. or you will end up having two scrollbar.Well there is several solutions to this problem. Lets discuss with a simpler version. Make the iframe's height property as long as the xbap that is hosting 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 do support get and set of cookie 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 do set the height of the content as a cookie each time the content of xbap has changed, of course in case of the content that cause the xbap to change its size. here is a code example to set cookie for 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 the change the height of the iframe. that's it you will have a smooth operation of auto grow or shrink of your xbap and wont cause any extra scrollbar. for reading the cookie do a little engineering for example always track the height cookie with 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 do call the javascript increase height function on body on load event of the page to kick start the process.

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


No comments:

Post a Comment