Getting Silverlight Plugin to resize on resize of Browser Window

09-02-2007 9:11 AM |

Hi,

 I'm kinda new to JScripting. Tried to implement the resize features as desribed in the SIlverlight documentation (http://msdn2.microsoft.com/en-us/library/bb412400.aspx) but that doesn't seem to work with 1.1 anymore. Any clues?

 Paul.

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-02-2007 9:21 AM |

I imagine it's not working for the same reason that you can't programmatically trigger full-screen; MS doesn't want that to be possible from non-user-interaction (according to the full-screen docs).  It's understandable, I guess; remember the days of annoying JavaScript popup advertising...  I guess if you want to implement resize, then it has to be the plugin being actively resized by the user (or as a result of clicking some control within the plugin).

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-03-2007 10:55 PM |

Guten Abend Paul,

The kind of "liquid" resizing behavior you want (if I understand correctly) does work and is demonstrated by the Silverlight Airlines 1.1 example:

Search this page for "Airlines":
http://silverlight.net/themes/silverlight/community/gallerydetail.aspx?cat=4

Good article by the guy who wrote the sample:
http://blogs.msdn.com/delay/archive/2007/05/01/the-web-just-got-even-better-silverlight-announced-at-mix07.aspx

The key to the resizing is the Javascript "resize" event handler in Default.html.js.

It looks like you could also handle the resizing in C# (my preference) rather than Javascript.  The code below shows what that looks like.  I added a handler for the BrowserHost.Resize event to Silverlight Airlines Default.xaml.cs.  (I haven't fully tested this, but it should get you started.)

For a bit more about resize handling see this (search for "resize"):

http://silverlight.net/quickstarts/BuildUi/CallJavascript.aspx

Alan Cobb
www.alancobb.com

------------------- Code --------------------
using System.Windows.Interop;
using System.Diagnostics;

public class DefaultCanvas : Canvas
{
 private void PageLoaded(object obj, EventArgs evt)
 {
  InitializeComponent();
  ...

// 2007-09-03: ASC: Added:
  BrowserHost.Resize+=
   new EventHandler( BrowserHost_Resize );

 }

// 2007-09-03: ASC: Added:
 void BrowserHost_Resize( object sender, EventArgs e )
 {
  Debug.WriteLine(
   "@.49 BrowserHost.ActualHeight:" +
    BrowserHost.ActualHeight +
   " BrowserHost.ActualWidth:" +
    BrowserHost.ActualWidth
   );
 }

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-03-2007 11:15 PM |

Hi Alan,

 Thanks for the quick reply. No, doesn't work. I had already found that out and tried it. Below is the code I wrote to get resizing to work. As the Plugin is displayed for the first time it does receive a resize event, but that is the only one received.

 Paul.

public partial class Page : Canvas
{

public void Page_Loaded ( object o, EventArgs e )
{

// Required to initialize variables
InitializeComponent ();
MouseMove += new MouseEventHandler ( Page_MouseMove );
Test.MouseLeftButtonDown += 
    new MouseEventHandler ( Test_MouseLeftButtonDown );
BrowserHost.Resize += new EventHandler ( BrowserHost_Resize );

}

void BrowserHost_Resize ( object sender, EventArgs e )
{

Test.Text = "Resize";

}

void Page_MouseMove ( object sender, MouseEventArgs e )
{

Test.Text = "Move";

}

void Test_MouseLeftButtonDown ( object sender, MouseEventArgs e )
{

Test.Text = "Click";
TimeTest.Begin ();

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-03-2007 11:22 PM |

Just to be complete. Here the xaml content:

<Canvas

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Name="parentCanvas"

Loaded="Page_Loaded"

x:Class="SilverlightProject9.Page;assembly=ClientBin/SilverlightProject9.dll"

Width="692"

Height="580"

<Storyboard x:Name="TimeTest">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="114.06"/>

</DoubleAnimationUsingKeyFrames>

</Canvas.Resources>

<RadialGradientBrush>

<GradientStop Color="#FF6EC7C8" Offset="0"/>

</Canvas.Background>

<Ellipse.Fill>

<GradientStop Color="#FF093C4E" Offset="0"/>

</LinearGradientBrush>

</Ellipse>

<TextBlock x:Name="Test" Text="Test" FontSize="56" FontFamily="Arial"

<TextBlock.RenderTransform>

<ScaleTransform ScaleX="1" ScaleY="5"/>

<RotateTransform Angle="0"/>

</TransformGroup>

</TextBlock>

</Canvas>

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-04-2007 12:50 AM |

Hi Paul,

Here is the problem (and again, I'm just borrowing this from the Silverlight Airlines sample) :

For the resizing to work you also need a couple alterations to the default app-wizard generated TestPage.html.  First you need to change the fixed pixel width and height to percentages.  Second you need to give the elements "html" and "body" (or at least just "body") a percentage-based height also.

Alan Cobb
www.alancobb.com

------------------- Code ----------------------

Altered fragment of TestPage.html:

<head>
    <title>Silverlight Project Test Page </title>
   
    <style type="text/css">

/* Stock version:

  .silverlightHost
  { width: 640px; height: 480px;
  }
*/

/* Replace the above with these two styles: */

        .silverlightHost
        { width: 100%; height: 100%;
        }

        html,body 
        {  height:100%; margin: 0; 
        }
       
    </style>
</head>

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-04-2007 5:01 AM |

Alan,

 Thanks again. I'll try that out tonight. Must take a look at the Airlines Example too.

 Paul.

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-04-2007 9:14 AM |

I've managed to get this functionality, compatable with RC1.0. I'm just ironing out a few issues (such as plugin not resizing to fill browser in firefox onload because of some crazy caching issue firefox has. need to implement a onpageload() method) Everything works fine in IE though.

Once i've got everythng working propperly i'll upload a full example including how to use max available space keeping height/width ratio of your actual content constant.

Hopefully this will be in a few days or so.

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-04-2007 1:06 PM |

Hi law~,

 >issues on Firefox vs IE:

It's funny how even with SL, we still can't get away 100% from cross-browser issues .

Alan Cobb
www.alancobb.com

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-04-2007 1:34 PM |

 "Funny" is _not_ my word of choice for it!

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-05-2007 12:56 AM |

Alan,

 Got it to work ok. The weird thing is that it wouldn't work in FireFox. After I added a Style in the 'SilverLightControlHost' - Div it also showed up in FireFox.

 Paul.

This code works in both IE and FireFox:

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Silverlight Project Test Page </title>

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript" src="TestPage.html.js"></script>

<style type="text/css">

body
{

font-family:Arial;color:#817C90;

}

</style>

<body>

<div id="SilverlightControlHost" style="width:100%; height:100%" >

<script type="text/javascript" >

createSilverlight();

</script>

</div>

</body>

</html>

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-05-2007 6:43 PM |

I've created a working example of:

1. Getting the plug-in 100% Browser Width and Height
2. Stretching my xaml content to fill the available plug-in space
3. Retaining height/width ratio and centering the xaml content in the plug-in
4. Setting a minimum and maximum size for the plug-in to change to.

I've rushed it but i'll return to it to explain the process properly when i get time at my shiny new blog at: http://blog.erroroperator.com a direct link to the example can be found there.

Hope this is of use!

law~

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-05-2007 7:16 PM |

Hi law~,

Thanks for posting that. Your demo runs OK for me under IE7 and FF.

One FF "nit": Under Firefox the resizing doesn't seem to happen dynamically as you move the side of the browser window.  OTOH, the Silverlight Airlines sample does do the smooth dynamic resizing on both IE and FF.  Here's the URL if you want to compare:
http://silverlight.net/themes/silverlight/community/gallerydetail.aspx?cat=4
(Search for "Airlines").

Alan Cobb
www.alancobb.com

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-05-2007 7:32 PM |

My main quibble about how it runs in FF is that my function to resize the plugin and perform the scale transform on my canvas doesn't always run on load. I believe that to be because of this: http://developer.mozilla.org/en/docs/Using_Firefox_1.5_caching It's something i'm going to look into when i have a chance. The obvious point to make about the Silverlight Airlines example is that that's implemented in 1.1 (!) and i'm trying to concentrate on 1.0 until 1.1 becomes a public release.

Thanks for checking that for me.

law~

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-18-2007 6:51 AM |

update: updated! here

law~

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-23-2007 1:19 PM |

I take it back. This HTML piece of code suddenly doesn't work in Firefox anymore.

Re: Getting Silverlight Plugin to resize on resize of Browser Window

09-24-2007 2:11 PM |

Hi Paul, I put together another sample that handles browser resizing, so far it seems to work in both IE and FF. Two samples, one that just repositions the content while resizing the browser the other rescales the content with resizing of the browser...

http://www.vectorform.com/silverlight/100percent/reposition_content/

http://www.vectorform.com/silverlight/100percent/resize_content/

and source...

http://www.vectorform.com/silverlight/reposition_content.zip

http://www.vectorform.com/silverlight/resize_content.zip

if these dont work out for ya I know in previous releases of Silverlight I had to wait a few milliseconds (like 150) after the the actual resize event fired to retrieve the correct width/height values of the plugin and then place the content appropriately. These samples didn't seem to need the timeout though. Let me know if these aren't working correctly for you.

Cheers.

dandobbs - developer - http://www.vectorform.com/silverlight/ - http://vectorform.wordpress.com/

Re: Getting Silverlight Plugin to resize on resize of Browser Window

10-05-2007 10:46 AM |

I use Silverlight 1.1, how can I make the same thing that you have in this samples (in C#)?

Thanks

Re: Getting Silverlight Plugin to resize on resize of Browser Window

12-03-2007 10:48 AM |

law~:

update: updated! here

law~

Hi The link is not working. Thanks.