Silverlight 3 Browser Zoom Support, UI Stops rendering during zoom changes

Question

Silverlight 3 now contains built in browser zoom support. The current problem I am facing is that it seems as if the Silverlight UI doesn't update (re-render) during multiple zoom level changes involving the (Ctrl+Mouse Wheel) or (Ctrl+) and (Ctrl-). This was found when testing with the IE8 browser, on a Windows XP SP2.

At first I thought this might be a performance problem when rendering my applcation but I also managed to reproduce the same problem with only some text and a button on my page (the test xaml can be found at the end of the post). In some cases the UI stops responding (mouse over visual changes). In others the Page is responding but is not rendered for the correct zoom level.

I could implement my own zoom functionality but I think it would be better in the long run to let the browser or plugin handle the zoom features (Why code the same feature twice?). I am also considering disabling the autozoom support for the silverlight application.

After looking at a few other silverlight implementations I found that the majority of them that do not disable the autozoom have the same problem. After looking into the problem a little deeper the UI would be corrected when the browser window size has changed (as this forces the UI to update its render size which corrects the problem) or if the Page is scrolled (which also seems to send a render update to the UI). Does anyone know of a way to solve this issue or a workaround that does not involve writing custom Zooming code?

Here are the steps I used to produce the problem. (If you would like the test project I used let me know and I can email it to you.)

Step 1: Create a new Silverlight application using Visual Studio 2008. Step 2: Add the Xaml to the main page (xaml at the end of my post). Step 3: Run the application in IE8 using the html page and the default start page. Step 4: Change the zoom level by using (Ctrl+mouse wheel). You may have to move the mouse wheel very rapidly till this occurs the first time. Usually zooming in then quickly zooming out. Note: After step 4 the UI will have some of the problems I stated above. This has been produced on 6 different machines running IE8.

Xaml code for the MainPage file:

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal" Background="LightGray" Grid.Row="0">
        <TextBlock Text="Testing Web Page" FontSize="16" FontWeight="Bold" 
                                                           Foreground="Green"/>
    </StackPanel>
    <Button Grid.Row="1" Content="Large Damn Button" Height="34"/>
</Grid>

Answer 1

I went to the silverlight forum about this issue but no one there was having the problem or didn't know how to fix it. What i did was set a Min Height and Width on my control in the Html page and in the xaml. Since doing this the problem has not come back. Although I'm still unclear why this seemed to be an issue. If someone is having a similiar problem see the sample code below:

#silverlightControlHost {
    height: 100%;
    text-align:center;
    margin:0;
    padding:0;
    min-height:550px;
    min-width:800px;
}

 <form id="form1" runat="server" style="height:100%;width:100%;position:absolute;top:0px;left:0px;z-index:0;min-height:550px;min-width:800px">
<div id="silverlightControlHost" style="height:100%;width:100%;min-height:550px;min-width:800px">
   <object id="slControl" data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="position:absolute;top:0px;left:0px" width="100%" height="100%">
      <param name="source" value="ClientBin/Dupree.xap"/>
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="3.0.40624.0" />
      <param name="autoUpgrade" value="true" />
      <param name="EnableGPUAcceleration" value="true" />
      <param name="maxframerate" value="30" />
      <param name="windowless" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;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>