Geek Answers Handbook

Silverlight grid with automatic width and height

Silverlight virgin is here. How to get usercontrol surrounding my grid to automatically resize to fit the width of the grid inside? Currently usercontrol displays approximately 300 or 400 pixels when the browser window is much wider. It displays both vertical and horizontal scrollbars around a data grid, which is ugly. I want to set the width of the control to "100%", but this does not seem to be supported. What am I missing?

Here is my xaml:

<UserControl x:Class="RichMedia.MainPage" 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" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"> <Grid x:Name="LayoutRoot" Background="White"> <data:DataGrid Name="dataGrid1" AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding}" /> </Grid> </UserControl>

EDIT: I have to add that I use the default containers in Visual Studio 2010 that were created when adding a silverlight application to an existing web application project.

Below is the inscription on the hosting page:

 <%@ 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"> ... <style type="text/css"> html, body { height: 100%; overflow: hidden; } body { padding: 0; margin: 0; } html, body { height: 100%; overflow: hidden; } #silverlightControlHost { height: 100%; text-align:center; } </style> <script type="text/javascript" src="Scripts/Silverlight.js"></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/RichMedia.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="3.0.40818.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none"><img src="http://go.microsoft.com/fwlink/?LinkId=161376" 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>
+4
source share
1 answer

You need a place Width: 100% and Height: 100% in the style of an object tag in the HTML containing it. You must also ensure that the containing element (possibly the body) has a view port height. This is achieved by providing the style "height: 100%, overflow: hidden"; is in the html tag and body tag. Put the margin: 0px on the body and put the scroll = "no" attribute on the body, as well for good measure. Your Silverlight control now has rights and dimensions in the browser client window area.

Also remove Width = "Auto" and Height = "Auto" from UserControl.

+5
source

More articles:


All Articles