Skip to main content
Home Forums Silverlight Programming Visual Studio & Silverlight Development Tools How to create a silverlight application, that will have the size increase or decrese based on the browser?
8 replies. Latest Post by Shaji-mji on August 18, 2008.
(0)
Silverli...
Member
15 points
20 Posts
08-13-2008 4:56 AM |
How to create a silverlight application, that will have the size increase or decrese based on the browser?
I have a application with many controls like listbox, textbox, buttons, etc, etc...
I want to resize these controls based on the browser size.. I have seen this in some sites.. Is that possible in silverlight?
Skute
222 points
156 Posts
08-13-2008 5:30 AM |
Yes you can, you just need to put the Silverlight control into a resizing area of your HTML (or it will do it by default if the Silverlight control is the only thing in the browser).
From there you just need to use dynamic layout in your design. i.e. rather than set widths heights of 100px by 100px or whatever. If you are working with Grids, you can use the column / row definitions with widths / heights of "1*", "2*" etc. Or use the Auto property.
08-13-2008 5:44 AM |
how does the "1*", "2*" etc work... is it equalent to % that we use in html?
IanBlack...
Contributor
2333 points
371 Posts
08-13-2008 6:01 AM |
As long as you make the silverlight control a %age width and height so that it scales to fit browser window, as in the default test page:
<body style="height:100%;margin:0;"> <form id="form1" runat="server" style="height:100%;"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <div style="height:100%;"> <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/ResizeSilverlight.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" /> </div> </form> </body>
Then you can handle the resize event on the content and then apply a scale transform to the root element:
public partial class Page : UserControl { double initialContentWidth = 0; double initialContentHeight = 0; public Page() { InitializeComponent(); Loaded += new RoutedEventHandler(Page_Loaded); Application.Current.Host.Content.Resized += new EventHandler(Content_Resized); } void Content_Resized(object sender, EventArgs e) { ScaleTransform scale = new ScaleTransform(); scale.ScaleX = ContentWidth / initialContentWidth; scale.ScaleY = ContentHeight / initialContentHeight; this.RenderTransform = scale; } void Page_Loaded(object sender, RoutedEventArgs e) { initialContentHeight = ContentHeight; initialContentWidth = ContentWidth; } private double ContentHeight { get { return Application.Current.Host.Content.ActualHeight; } } private double ContentWidth { get { return Application.Current.Host.Content.ActualWidth; } } }
08-13-2008 6:07 AM |
SilverlightLearner: how does the "1*", "2*" etc work... is it equalent to % that we use in html?
They are relative measurements but will only work on grid rows and columns. So a column with a width of 3* will always be 3 times the width of one with 1*. This will scale the grids ok, but not the actual elements in the cells (such as a button) - if you want that then applying a scale transform is the easiest method I have found. If you apply a scale transform to the root element, then all children get it too (as in the code snippet I posted)
jeetAbhi
424 points
81 Posts
08-13-2008 6:55 AM |
Give height ,width = auto and horizontal alignment, vertical alignment = stretch
Kindly MARK AS ANSWER if this helps...
08-13-2008 7:45 AM |
Iam talking about a application like the following
http://mscui.net/patientjourneydemonstrator/PrimaryCareAdmin.aspx
can anyone help me on this...
08-13-2008 7:58 AM |
That's just a 100% width / height silverlight control. Which is the default when you create a new project in visual studio.
Just lay your controls out in grids and use percentage sizing with them:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
Insert controls here
</Grid>
Mark
Shaji-mji
Participant
1129 points
260 Posts
08-18-2008 6:12 AM |
You can use * in silverlight just like you use % in html for example
<Textbox Width="1*"/>
<Button Width="2*"/>
How to create a silverlight application, that will have the size increase or decrese based on the browser?