.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: April 29, 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....

 
< /ScaleTransform >

and the example code i took to demonstrate it is

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" >



< /ScaleTransform >


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


You can find this article on My Bol Too

http://aspnetbymeetu.blogspot.com/2009/04/how-to-scale-your-entire-app-and-its.html 
--------------------------------------------------------------------------------
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