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
