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.

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).

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
   );
 }

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 ();

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>

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>

Alan,

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

 Paul.

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.

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

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

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>

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~

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

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~

update: updated! here

law~

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

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/

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

Thanks

law~:

update: updated! here

law~

Hi The link is not working. Thanks.