.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

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

Posted By:Meetu Choudhary       Posted Date: June 08, 2009    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  
 

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


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



and the example code i took to demonstrate it is


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




Step 2:

Add the following piece of code in the page.xaml.cs
in page()


App.Current.Host.Content.Resized += new EventHandler(Content_Resized);



and the function


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



in my example


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




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



Thanks and Regards
Meetu Choudhary


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend