• Article

Silverlight Plug-in Sizing

Microsoft Silverlight will reach end of support after October 2021. Learn more.

When you embed the Silverlight plug-in in a Web page, you can specify a fixed size or a size relative to the parent element. You specify the plug-in size by setting the width and height values to fixed pixel values or percentage values.

If you specify fixed values, the plug-in size remains the same regardless of the size of the parent container. If the parent container is not large enough to display the plug-in, the plug-in is clipped.

If you specify percentage values, the plug-in changes size when the parent element changes size. However, if you use fixed sizes in your application user interface (UI), the UI can be clipped when the plug-in changes size. For more information, see Window Resizing in Silverlight Layout System.

For more information about how to embed the Silverlight plug-in in a Web page, see How to: Add Silverlight to a Web Page by Using HTML or How to: Add Silverlight to a Web Page by Using JavaScript.

The following illustration shows the effect of browser resizing when you specify percentage width and height values.

Silverlight plug-in with width and height properties set to 75%

Shows resizing the browser window

Resizing a browser window has minimal effect on the performance of Silverlight plug-in instances hosted by the browser. For example, in most cases, the playback of audio or video content is seamless while a user resizes the browser.

Getting the Actual Size of a Silverlight Plug-in

If you specify a plug-in size relative to the size of its HTML parent element, then the actual size is unknown until the parent size is known. You can retrieve the actual size through the Content.ActualWidth and Content.ActualHeight values, but only after the Content.Resized event first occurs. For example, when the Application.Startup event occurs, these properties do not have meaningful values.

The Silverlight plug-in also changes size when it enters full-screen mode. However, in this case, the Content.Resized event does not occur. Instead, the Content.FullScreenChanged event occurs. You can display the plug-in in full-screen mode in response to user input by setting the Content.IsFullScreen property. In full-screen mode, the plug-in size matches the monitor display resolution. For more information, see Full-Screen Support.

Some browsers provide a way for users to zoom the displayed content to make it larger or smaller. When the user changes the browser zoom setting, the plug-in size changes and the Resized event occurs. By default, the content inside the plug-in also resizes. However, you can disable this behavior by setting Settings.EnableAutoZoom to false, or replace it by handling the Content.Zoomed event. If you want to supplement the zooming feature instead of replacing it, handle the Zoomed event and set EnableAutoZoom to true. You can access the zoom setting for the current browser window through the Content.ZoomFactor property.

The following code example demonstrates how to retrieve the actual plug-in size in response to the Resized and FullScreenChanged events.

Private WithEvents rootPage As Page = New Page()
Private WithEvents htmlContent As Content
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
    Me.RootVisual = rootPage
    htmlContent = Me.Host.Content
End Sub

Private Sub ToggleFullScreen(ByVal sender As Object, _
    ByVal e As MouseButtonEventArgs) Handles rootPage.MouseLeftButtonDown
    Me.Host.Content.IsFullScreen = Not Me.Host.Content.IsFullScreen
End Sub

Private Sub DisplaySizeInformation( _
    ByVal sender As Object, ByVal e As EventArgs) _
    Handles htmlContent.FullScreenChanged, htmlContent.Resized

    Dim message As String = String.Format( _
        "ActualWidth={0}, ActualHeight={1}", _
        Me.Host.Content.ActualWidth, _
        Me.Host.Content.ActualHeight)

    rootPage.LayoutRoot.Children.Clear()
    Dim t As New TextBlock()
    t.Text = message
    rootPage.LayoutRoot.Children.Add(t)

End Sub

Page rootPage = new Page();
private void Application_Startup(object sender, StartupEventArgs e)
{
    this.RootVisual = rootPage;

    rootPage.LayoutRoot.MouseLeftButtonDown +=
        delegate(Object s, MouseButtonEventArgs args) {
            this.Host.Content.IsFullScreen =
                !this.Host.Content.IsFullScreen;
        };

    this.Host.Content.FullScreenChanged += 
        new EventHandler(DisplaySizeInformation);

    this.Host.Content.Resized += 
        new EventHandler(DisplaySizeInformation);
}

private void DisplaySizeInformation(Object sender, EventArgs e)
{
    String message = String.Format(
        "ActualWidth={0}, ActualHeight={1}",
        this.Host.Content.ActualWidth,
        this.Host.Content.ActualHeight);

    rootPage.LayoutRoot.Children.Clear();
    rootPage.LayoutRoot.Children.Add(
        new TextBlock { Text = message });
}