Compatibility with Silverlight browsers

Today, a friend asked me how my Silverlight program filled the browser window. My first response was that the width and height of the Silverlight host were not set

View code

<Object Data = "data: Application/x-silverlight-2, "type =" application/x-silverlight-2 "width =" 100% "Height =" 100% "> <Param name =" Source "value =" clientbin/bingmaptest. xap "/> <Param name =" onerror "value =" onsilverlighterror "/> <Param name =" background "value =" white "/> <Param name =" minruntimeversion "Value = "5.0.61118.0"/> <Param name = "autoupgrade" value = "true"/> <a href = "http://go.microsoft.com/fwlink? Linkid = 149156 & V = 5.0.61118.0 "style =" text-Decoration: none ">  </a> </Object> <IFRAME id =" _ sl_historyframe "style =" visibility: hidden; Height: 0px; width: 0px; Border: 0px "> </iframe> </div>

However, after checking the code, we found that the Silverlight host width and height are both set to 100%. The problem lies in the XAML page.

View code

<navigation:Page x:Class="BingMapTest.Page1"            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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"           d:DesignWidth="640" d:DesignHeight="480"           Title="Page1 Page">    <Grid x:Name="LayoutRoot" Background="Yellow" HorizontalAlignment="Center">        <Grid.RowDefinitions>            <RowDefinition Height="0.167*"/>            <RowDefinition Height="0.5*"/>            <RowDefinition Height="0.333*"/>        </Grid.RowDefinitions>        <Button Content="Button" HorizontalAlignment="Left" Width="187"/>        <Button Content="Button" Margin="220,1,233,0" Height="70" Grid.Row="1" VerticalAlignment="Top"/>        <Button Content="Button" HorizontalAlignment="Right" Margin="0,83,52,87" Width="187" Grid.Row="1"/>        <Button Content="Button" HorizontalAlignment="Right" Margin="0,0,58,0" Width="187" Height="70" Grid.Row="2" VerticalAlignment="Top"/>    </Grid></navigation:Page>

I found that the XAML page uses grid layout and sets the horizontalalignment attribute. I tried to remove the horizontalalignment attribute and found it changed to the full browser size.

To sum up, if the grid size is not set, it will occupy the container containing it. if horizontalalignment is set at this time, the width of the grid will automatically change to the width occupied by its sub-elements. Similarly, setting the verticalignment attribute will change the grid height. if both the horizontalalignment and width attributes are set, the width of the grid prevails.