Skip to main content
Microsoft Silverlight
Home Forums Silverlight Programming Programming with .NET - General On browser window size change/Full screen change
24 replies. Latest Post by Wilfred Pinto on October 21, 2009.
(0)
silverli...
Member
17 points
100 Posts
10-20-2009 4:34 PM |
Hi,
I have an issue with the height and width of my application.
When I change the size of the browser window, say enlarge it, the application remains the size of when it was first rendered. Say my browser window was 800x600px, when I enlarge it to 1024x768, the application remains 800x600 if i do not refresh the website. Also, when going to fullscreen mode it does not resize to fill all the available space.
Is there any function which i can use so that on browse window size change, it sort of refreshes/repaints the content? How is it possible to overcome this issue?
Thanks
Sergey.L...
Star
8374 points
1,526 Posts
10-20-2009 4:40 PM |
By default the behavior of Silverlight for change of size of browser window is set to fill all tab.
<style type="text/css"> html, body { height: 100%; overflow: auto;} body { padding: 0; margin: 0;} #silverlightControlHost { height: 100%; text-align:center;} </style>
<div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> .... </div>
jackbond
Contributor
2852 points
736 Posts
10-20-2009 4:45 PM |
If you use a ScrollViewer as the root element without its width and height being set, it will expand to the size of the browser window (assuming you have set the Silverlight div to 100% as well.)
10-20-2009 4:46 PM |
That is exactly how my application is set however for some funky reason its not working properly..
10-20-2009 4:50 PM |
Do you set a size inside application?
Wilfred ...
Participant
1318 points
258 Posts
10-20-2009 4:52 PM |
A workaround using Javascript (although it will probably not work in full screen mode)!
var silverlightApp = document.getElementById("silverlightControlHost"); var parent = silverlightApp.parentNode; parent.removeChild(silverlightApp); parent.appendChild(silverlightApp);
See this post for more information - http://forums.silverlight.net/forums/t/88861.aspx
10-20-2009 5:00 PM |
can you tell me where I need to put this Wilfred?
10-20-2009 5:01 PM |
I only have a design width and height set, as when I set the to Auto i got an error saying that its an incorrect height/width, even though i had the mcignorable="d" (or how it is exactly..)
10-20-2009 5:26 PM |
silverlightmonster:can you tell me where I need to put this Wilfred?
I'm not Wilfred . But I think that code you should to put inside a javascript handler of onresize event of window.
10-20-2009 5:40 PM |
Like Sergey mentioned, in the onresize javascript handler like this -
<script type="text/javascript"> function resize() { var silverlightApp = document.getElementById("silverlightControlHost"); var parent = silverlightApp.parentNode; parent.removeChild(silverlightApp); parent.appendChild(silverlightApp); } window.onresize = resize; </script>
Sergey, I don't mind you masquerading as me. It makes me look good! :)
10-20-2009 11:38 PM |
Wilfred Pinto:A workaround using Javascript (although it will probably not work in full screen mode)!
You don't need javascript to do this. For example, click the Khet link below, and view the source. No resize handlers required. All you need is a root control that stretches vertically and horizontally.
10-21-2009 1:17 AM |
jackbond:You don't need javascript to do this. For example, click the Khet link below, and view the source. No resize handlers required. All you need is a root control that stretches vertically and horizontally.
I agree! Also the javascript solution will not work in full screen mode.
10-21-2009 3:25 AM |
I do have a root element which stretches vertically and horizontally but its not working :(
Im using IE8 and Vista.
10-21-2009 3:33 AM |
silverlightmonster:I do have a root element which stretches vertically and horizontally but its not working
Is it a Canvas?
Try making a grid the root, set its background color to something noticeable. It should fill the entire browser window if the html is correct (the default silverlight test page should work,)
10-21-2009 3:41 AM |
hi,
i have a scrollviewer as a root element. It is set to stretch both vertically and horizontally and so it does when the website is loaded, however, as soon as I resize the window the application does not adjust to fill all the available space, but remains in the previous size. The extra space is just filled with white (even the background of the application is not white!)
10-21-2009 4:23 PM |
Do you set a background over object tag?
10-21-2009 4:34 PM |
I just have a linear gradient, nothing fussy..
10-21-2009 4:44 PM |
If you set background over param of object tag then you will not have a white backgrdound at tab resizing.
10-21-2009 4:49 PM |
Hi Sergey,
I am uploading an image to help you visualise my problem.
As you may see, the application is not filling in the browser. First, I had the browser window that size (the application filled the whole browser size on loading), and when i enlarged it, the application did not resize to fill the enlarged window but remained the same size.
10-21-2009 4:57 PM |
It is so because you use a ScrollViewer control as a root element for layout.
10-21-2009 5:00 PM |
You need to subscribe to javascript onresize event and set size of ScrollViewer programmatically.
It you set height and width properties of ScrollViewer then try to set them to empty or Auto value.
10-21-2009 5:04 PM |
How is that possible? How can i do that?
If i put a canvas as the root element and set it to stretch it should work?
10-21-2009 5:20 PM |
silverlightmonster:How is that possible? How can i do that?
public MainPage() { InitializeComponent(); Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded(object sender, RoutedEventArgs e) { HtmlPage.Window.AttachEvent("onresize", OnWindowResize); } void OnWindowResize(object sender, HtmlEventArgs e) { var height = HtmlPage.Document.Body.GetProperty("clientHeight"); var width = HtmlPage.Document.Body.GetProperty("clientWidth"); }
silverlightmonster:If i put a canvas as the root element and set it to stretch it should work?
Better use a Grid.
10-21-2009 5:30 PM |
Sergey.Lutay:You need to subscribe to javascript onresize event and set size of ScrollViewer programmatically.
OK, here goes, and hopefully for the last time:
YOU DO NOT NEED TO **** WITH ANY JAVASCRIPT EVENTS TO FILL THE ****** SCREEN
Take the following code and put in your XAP file name
<%@ Page Language="C#" AutoEventWireup="true" %> <!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 runat="server"> <title>Blazing7s</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="YOUR_FILENAME_HERE.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="3.0.40818.0" /> <param name="autoUpgrade" value="true" /> <param name="MaxFrameRate" value="30" /> <param name="enableGPUAcceleration" 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>
10-21-2009 6:59 PM |
You are probably just doing something wrong. If you post your project here I am sure someone will be able to spot it right away.
I implemented a photo viewer some time ago which handles browser resizing properly. I even did content resizing to avoid clipping as far as I could. You can find a sample here - http://thepintospatronus.com/simpleviewer-sl/gallery1/gallery2.html. The source code can be found here - http://simpleviewersl.codeplex.com/
There is a lot of (not relevant to you) code in there so it probably is overkill for your case. It would be better if you just post a scaled down version of your project here.
On browser window size change/Full screen change