Sunday, April 26, 2009

How to Scale your entire App and its Elements to your Browsers Size

How to Scale your entire App and its Elements to your Browsers Size



Wow, Today I found the answer of the question "How to Scale your entire App and its Elements to your Browsers Size?" And the answer provided to me is by the silverlight 2.0. I always wonder that how can i scale my application to different browser sizes... and to different screen resolutions I found some PHP sites which were scalable according to the browser size but was unable to handle the same in my ASP.net applications... I have Hear-ed a lot about the silverlight and its applications but never give a thought to it and now finally when my client needs the scalable sites then i have no other option left with me i have to search it and thought to go ahead with silverlight and today only i get all the essentials for the silverlight and started to find the solution and to my wonders i found the solution so simple and easy... Here I would like to share it with you all...

we can achieve it in simple two steps

Step 1:

Add the following line of code to the canvas... in page.xaml....
[code]
< Canvas.RenderTransform >
< ScaleTransform x:Name="CanvasScale" ScaleX="1" ScaleY="1" > < /ScaleTransform >
< /Canvas.RenderTransform >
[/code]

and the example code i took to demonstrate it is
[code]
<
UserControl xmlns:inputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" >
< Grid x:Name="LayoutRoot" Background="White" >
< Canvas Height="150" Width="400" Background="Bisque" VerticalAlignment="Center" >
< Canvas.RenderTransform >
< ScaleTransform x:Name="CanvasScale" ScaleX="1" ScaleY="1" > < /ScaleTransform >
< /Canvas.RenderTransform >
< Button x:Name="myButton" Canvas.Top="50"
Canvas.Left="75" Content="Click Me"
Height="37" Width="118" Click="myButton_Click"
ToolTipService.ToolTip ="Click to change above text"/ >
< Button x:Name="myButton1" Canvas.Top="50"
Canvas.Left="195" Content="Click Me"
Height="37" Width="118"/ >
< /Canvas >
< /Grid >
< /
UserControl >
[/code]


Step 2:

Add the following piece of code in the page.xaml.cs
in page()
[code]
App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
[/code]

and the function
[code]
void
Content_Resized(object sender, EventArgs e)
{
double height = App.Current.Host.Content.ActualHeight;
double width = App.Current.Host.Content.ActualWidth;
CanvasScale.ScaleX = width / _startingWidth;
CanvasScale.ScaleY = height / _startingHeight;
}
[/code]

in my example
[code]
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
namespace
SilverlightApplication1
{
public partial class Page : UserControl
{
private int _startingWidth = 800;
private int _startingHeight = 600;
public Page()
{
InitializeComponent();
App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
}
private void myButton_Click(object sender, RoutedEventArgs e)
{
}
void Content_Resized(object sender, EventArgs e)
{
double height = App.Current.Host.Content.ActualHeight;
double width = App.Current.Host.Content.ActualWidth;
CanvasScale.ScaleX = width / _startingWidth;
CanvasScale.ScaleY = height / _startingHeight;
}
}
}
[/code]


Test Yourself....
I am sure you will also enjoy as I did.....



Thanks and Regards
Meetu Choudhary

3 comments:

  1. ok its nice but can u tell me
    is it possible without silverlight?
    because I have no silverlight.
    so please tell me how to get silverlight and is it free?

    Best Regards
    Hiren Patel

    ReplyDelete
  2. Ya Silverlight runtime enviournment is Free and you can download the silverlight form the microfit.com/downloads or from silverlight.net

    ReplyDelete
  3. I am using framework 2.0 ,please let mw know if u can give the code sample in vb.net.

    Thank you,
    Suvasish

    ReplyDelete

Subscribe via email

Enter your email address:

Delivered by FeedBurner

MSDotnetMentor

MSDotnetMentor My Website http://msdotnetmentor.com