locked
How to set silverlight pages width and height . RRS feed

  • Question

  • hello,

           My problem is that when my silverlight application run on my pc it will going well.But when it will run on another pc There height and width changed and application looks different.I cannot understand how to set height and width of application according different pc screen.

    Monday, August 30, 2010 10:36 AM

Answers

  • well, if your sl content comes different for each different resolution than i guess, one simple way to fix it is to set fixed width/height of your usercontrol.

    eg.

    MainPage.xaml (where this.RootVisual = new MainPage())

    <Grid x:Name="LayoutRoot" Width="1024" Height="768">

    your content

    </Grid>

    Even if your sl application goes fullscreen or is being shown in different resolution, the whole page would show as silverlight, but the content will always be restricted to your w/h assigned(your initial resolution). As a result different screen resolution willnot hamper your project

    one eg would be this http://silverlightips.net/2010/08/24/silverlight-content-control/ (try the demo in different screen)

    Sharker Khaleed Mahmud

     

    Monday, September 6, 2010 2:55 AM

All replies

  • Is your Silverlight app just a Control embeded in a HTML/APSx page? If yes, and you want the Silverlight has fixed size no matter what the size of the browser windows is, you can fix the size of the Div container that contains Silverlight control tag in your HTML/ASPx page.



    Monday, August 30, 2010 11:44 AM
  • hello,

      My html page as below I cannot understand where I want tobe change.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>
        <title>TOI</title>
        <style type="text/css">
        html, body {
            height: 100%;
            overflow: auto;
        }
        body {
            padding: 0;
            margin: 0;
        }
        #silverlightControlHost {
            height: 100%;
            text-align:center;
        }
        </style>
        <script type="text/javascript" src="Silverlight.js"></script>
        <script type="text/javascript">
            function onSilverlightError(sender, args) {
                var appSource = "";
                if (sender != null && sender != 0) {
                  appSource = sender.getHost().Source;
                }
                
                var errorType = args.ErrorType;
                var iErrorCode = args.ErrorCode;

                if (errorType == "ImageError" || errorType == "MediaError") {
                  return;
                }

                var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;

                errMsg += "Code: "+ iErrorCode + "    \n";
                errMsg += "Category: " + errorType + "       \n";
                errMsg += "Message: " + args.ErrorMessage + "     \n";

                if (errorType == "ParserError") {
                    errMsg += "File: " + args.xamlFile + "     \n";
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                else if (errorType == "RuntimeError") {           
                    if (args.lineNumber != 0) {
                        errMsg += "Line: " + args.lineNumber + "     \n";
                        errMsg += "Position: " +  args.charPosition + "     \n";
                    }
                    errMsg += "MethodName: " + args.methodName + "     \n";
                }

                throw new Error(errMsg);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server" style="height:100%">
        <div id="silverlightControlHost">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
              <param name="source" value="ClientBin/TOI.xap"/>
              <param name="onError" value="onSilverlightError" />
              <param name="background" value="white" />
              <param name="minRuntimeVersion" value="3.0.40624.0" />
              <param name="autoUpgrade" value="true" />
              <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
                   <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
              </a>
            </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
        </form>
    </body>
    </html>

    Tuesday, August 31, 2010 9:33 AM
  • This is the Test Page.  By default, the Silverlight control take the whole page. See the style for silverlightControlHost DIV (height=100%) ?  If you resize the browser window, the Silverlight control also resize to fit the window. 

    But I don't know what is your usage or purpose.  Do you want to set a fixed size of your Silverlight control so no matter what the window size is, you don't want to change your Silverlight control size?  If yes, you can change the Style of silverlightControlHost:

    #silverlightControlHost

    {
            height: 100%;

            height:YourHeight;

            widht:YourWidth;
              text-align:center;
     }

    silverlightControlHost Div is just a place holder or container for Silverlight control. If you fix it's size. The Silverlight control will take the  container size. That is how you can limit the Silverlight control size.





    Tuesday, August 31, 2010 11:02 AM
  • Hello,

        I want to set silverlight pages as full page.It looks different then aspx pages.I cannot understand how to set it as normal pages.


    Wednesday, September 1, 2010 2:26 AM
  • Hi,

    I'm not sure what the different you look.

    Could you post some screenshots to show us what's the different?  It would help us to figure out what's your exact problem.

     

    Regards.

     

    Wednesday, September 1, 2010 3:53 AM
  • Hi,

    Your page should be able to automatically resize to the browser size. No need to write from code behind. How about commenting all the items in your page and leave portion as shown below. Does background="black" resize with the browser?

    Afterwards start putting some control and find out when the problem occurs.

    <UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d" xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
        xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
        xmlns:local="clr-namespace:v1"
        xmlns:Blacklight_Controls="clr-namespace:Blacklight.Controls;assembly=Blacklight.Controls"
        x:Class="v1.MainPage" 
         >

    <Grid x:Name="LayoutRoot" Background="Black" >

    <Canvas Margin="50" Background="Orange"/>

    </Grid>

    </UserControl>

    Wednesday, September 1, 2010 4:02 AM
  • hello,

       I cannot understand what you want to say.what is the  mean of How about commenting all the items in your page.

    Thursday, September 2, 2010 7:09 AM
  • Hello,

    I am implementing  you solution. Still it not working.


    Thursday, September 2, 2010 7:11 AM
  • I've been trying also your tip but still not working for me.

    anyone could help? thanks in advance.



    Thursday, September 2, 2010 11:21 AM
  • If you can post your screen shot, it might help people to understand your real problem.



    Thursday, September 2, 2010 11:41 AM
  • Hi

    I have suggested this solution atleaset for15 forum threads and by that everybody have got the solution, i dont understand why it is not fixing your problem ! can you show your screenshot so that i can get an idea .

    Thursday, September 2, 2010 11:51 PM
  • Hi,

    Brower show different size according different resolution, so you could try to set height and width of application according the browser size.

                double browserHeight = Application.Current.Host.Content.ActualHeight;

                double browserWidth = Application.Current.Host.Content.ActualWidth;

     

                //  some condition of browser height or width (such as browserWidth > this.MaxWidth )

                if  (browserWidth > this.MaxWidth)

                {

                    // To do

                }

     

    Hope it will work for you.

     

    Regards

    • Proposed as answer by Poojaja Thursday, May 8, 2014 11:03 AM
    Monday, September 6, 2010 2:20 AM
  • well, if your sl content comes different for each different resolution than i guess, one simple way to fix it is to set fixed width/height of your usercontrol.

    eg.

    MainPage.xaml (where this.RootVisual = new MainPage())

    <Grid x:Name="LayoutRoot" Width="1024" Height="768">

    your content

    </Grid>

    Even if your sl application goes fullscreen or is being shown in different resolution, the whole page would show as silverlight, but the content will always be restricted to your w/h assigned(your initial resolution). As a result different screen resolution willnot hamper your project

    one eg would be this http://silverlightips.net/2010/08/24/silverlight-content-control/ (try the demo in different screen)

    Sharker Khaleed Mahmud

     

    Monday, September 6, 2010 2:55 AM