How To Scale your silverlight app

I’ve got a scenario that the Silverlight app need to resize according to browser width and height. So that means on browser resize your silverlight app resize too

First make your usercontrol under a Canvas and Name it ex:Layout

add skewtransform on your root canvas

<Canvas.RenderTransform>
        <ScaleTransform  ScaleX="1" ScaleY="1" x:Name="LayoutScale" />

    </Canvas.RenderTransform>

On your Code Constructor

   1:  public MainPage()
   2:  {
   3:  //for first time 
   4:              this.SizeChanged += new SizeChangedEventHandler(MainPage_SizeChanged);
   5:  //on browser resize execute this event
   6:              App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
   7:       
   8:  }
   9:   void Content_Resized(object sender, EventArgs e)
  10:          {
  11:              double height = App.Current.Host.Content.ActualHeight;
  12:   
  13:              double width = App.Current.Host.Content.ActualWidth;
  14:              LayoutScale.ScaleX = width / (Layout.Width);
  15:   
  16:              LayoutScale.ScaleY = height / (Layout.Height);
  17:          }
  18:   
  19:          void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
  20:          {
  21:              double height = App.Current.Host.Content.ActualHeight;
  22:   
  23:              double width = App.Current.Host.Content.ActualWidth;
  24:              LayoutScale.ScaleX = width / (Layout.Width);
  25:   
  26:              LayoutScale.ScaleY = height / (Layout.Height);
  27:          }

Share this post: | | | |
Published Thursday, November 19, 2009 11:31 AM by cipto
Filed under:

Comments

No Comments