Programming with JavaScript

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

Sitandi — Mon, 03 Dec 2007 15:48:00 GMT

law~:

update: updated! here

law~

Hi The link is not working. Thanks.

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

Yosh22 — Fri, 05 Oct 2007 14:46:41 GMT

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

ddobbs-vectorform — Mon, 24 Sep 2007 18:11:19 GMT

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

PaulSinnema — Sun, 23 Sep 2007 17:19:47 GMT

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

law~ — Tue, 18 Sep 2007 10:51:37 GMT

update: updated! here

law~

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

law~ — Wed, 05 Sep 2007 23:32:38 GMT

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

Alan Cobb — Wed, 05 Sep 2007 23:16:29 GMT

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

law~ — Wed, 05 Sep 2007 22:43:36 GMT

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

PaulSinnema — Wed, 05 Sep 2007 04:56:13 GMT

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

</head>

<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

petemounce — Tue, 04 Sep 2007 17:34:41 GMT

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

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

Alan Cobb — Tue, 04 Sep 2007 17:06:36 GMT

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

law~ — Tue, 04 Sep 2007 13:14:10 GMT

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

PaulSinnema — Tue, 04 Sep 2007 09:01:52 GMT

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

Alan Cobb — Tue, 04 Sep 2007 04:50:32 GMT

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

PaulSinnema — Tue, 04 Sep 2007 03:22:49 GMT

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"

<Canvas.Resources>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<Canvas.Background>

</RadialGradientBrush>

</Canvas.Background>

<Ellipse.Fill>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

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

FontStyle="Normal" RenderTransformOrigin="0.487,0.558" Width="308.103" Height="77.05" Canvas.Left="236" Canvas.Top="241" >

<TextBlock.RenderTransform>

</TransformGroup>

</TextBlock.RenderTransform>

</TextBlock>

</Canvas>