Getting Silverlight Plugin to resize on resize of Brows... RSS

• 

  PaulSinnema

  Member

  25 Points

  25 Posts

  • Reply
  •  

  Getting Silverlight Plugin to resize on resize of Browser Window

  Sep 02, 2007 01:11 PM | LINK

  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.

• 

  petemounce

  Member

  174 Points

  90 Posts

  • Reply
  •  

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

  Sep 02, 2007 01:21 PM | LINK

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

• 

  Alan Cobb

  Member

  479 Points

  208 Posts

  • Reply
  •  

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

  Sep 04, 2007 02:55 AM | LINK

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

   

• 

  PaulSinnema

  Member

  25 Points

  25 Posts

  • Reply
  •  

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

  Sep 04, 2007 03:15 AM | LINK

  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.

  namespace SilverlightProject9
  {

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

  }

  }

  }

• 

  PaulSinnema

  Member

  25 Points

  25 Posts

  • Reply
  •  

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

  Sep 04, 2007 03:22 AM | LINK

  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>

  <Storyboard x:Name="TimeTest">

  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Test" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">

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

  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="360"/>

  </DoubleAnimationUsingKeyFrames>

  </Storyboard>

  </Canvas.Resources>

  <Canvas.Background>

  <RadialGradientBrush>

  <GradientStop Color="#FF0E7097" Offset="1"/>

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

  </RadialGradientBrush>

  </Canvas.Background>

  <Ellipse Width="477" Height="373" Stroke="#FF000000" Canvas.Left="71" Canvas.Top="60">

  <Ellipse.Fill>

  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

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

  <GradientStop Color="#FFB96969" Offset="1"/>

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

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

  <SkewTransform AngleX="0" AngleY="0"/>

  <RotateTransform Angle="0"/>

  <TranslateTransform X="0" Y="0"/>

  </TransformGroup>

  </TextBlock.RenderTransform>

  </TextBlock>

  </Canvas>

• 

  Alan Cobb

  Member

  479 Points

  208 Posts

  • Reply
  •  

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

  Sep 04, 2007 04:50 AM | LINK

  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>

• 

  PaulSinnema

  Member

  25 Points

  25 Posts

  • Reply
  •  

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

  Sep 04, 2007 09:01 AM | LINK

  Alan,

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

   Paul.

• 

  law~

  Member

  70 Points

  21 Posts

  • Reply
  •  

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

  Sep 04, 2007 01:14 PM | LINK

  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.

• 

  Alan Cobb

  Member

  479 Points

  208 Posts

  • Reply
  •  

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

  Sep 04, 2007 05:06 PM | LINK

  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 [:S].
  
  Alan Cobb
  www.alancobb.com

• 

  petemounce

  Member

  174 Points

  90 Posts

  • Reply
  •  

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

  Sep 04, 2007 05:34 PM | LINK

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