Silverlight Games
Forum    Resources    Communities    Windows 7 tools    Members   

Action Games | Sports Games | Puzzles | Kids Menu | Showcase | Show All
Bookmark and Share

My Profile
Active Members
Today
    Last 7 Days more...




    Resources » Articles » General »

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


    Posted Date: 25 Apr 2009    Resource Type: Articles    Category: General
    Author: Miss Meetu ChoudharyMember Level: Silver    
    Rating: 2 out of 52 out of 5Points: 30



    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






    Responses to the resource: "How to Scale your entire App and its Elements to your Browsers Size"
    Author: Gaurav Arora    25 Apr 2009Member Level: Gold   Points : 1
    Hi Meetu,

    The article is very good and informative for freshers, please keep it up.

    If you can, please provide full source code in future.

    Regards,
    Gaurav Arora
    Webmaster - http://silverlightclub.com


    Author: Miss Meetu Choudhary    26 Apr 2009Member Level: Silver   Points : 1
    Hi Gaurav,
    Thanks for the appreciation I will try to post the code files too from next time..
    As this time i already posted the code here



    Author: Yvan    06 Jun 2009Member Level: Gold   Points : 0
    Great

    Thanks

    Yvan

    Invite your friends : www.furukoo.fr


    Author: BVNREDDY    22 Jul 2009Member Level: Silver   Points : 0
    Nice one. Thanks

    Keep posting.


    Author: Miss Meetu Choudhary    22 Jul 2009Member Level: Silver   Points : 1
    Thanks a lot bvnreddy.

    I am Glad that you liked the post.

    ++
    Thanks and Regards
    Meetu Choudhary


    Feedbacks      
    Popular Tags   What are tags ?   Search Tags  
    Sign In to add tags.
    How to Scale your entire App and its Elements to your Browsers Size  .  

    Post Feedback


    This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
    You must Sign In to post a response.
    Next Resource: How to configure VPN connections in Windows 7?
    Previous Resource: Silverlight2 Controls – A practical View
    Return to Resources
    Post New Resource
    Category: General


    Post resources and earn money!
     
    More Resources





    About Us    Contact Us    Privacy Policy    Terms Of Use