Microsoft Silverlight – Resize controls in a canvas within the web browser

Using the ‘Canvas.RenderTransform’ in your base Silverlight XAML, along with some resizing logic in the base Silverlight .vb class, the controls within your browser will resize as you change the size of the browser.

In this scenario, the App.xaml Application_Startup event passes control to the first displayable Silverlight xaml called, ‘host’, which contains the resizing logic. As long as I don’t remove ‘host’, the resizing logic is not needed in any other xaml.

Example:

In the MyApplication Application, the following flow occurs:

App.xaml executes the following statement that loads the first Silverlight Control:

me.RootVisual = New host(IPAddress)

‘host’ then adds the logon.xaml on top of the ‘host’ with the following statement:

ucLogon = New Logon(mIPAddress)

When the logon is successful, ‘logon’ is removed from host and the main.xaml is then added.

LayoutRoot.Children.Remove(ucLogon)
LayoutRoot.Children.Add(ucMain)

Going forward, all Messages, which are xaml files, are simply added and removed from ‘main’. As long as ‘host’ is never unloaded, resizing the browser will continue to raise the ‘resize’ event logic in the host.xaml.vb class.

How To:

The following markup is needed in the host.xaml.

<UserControl x:Class="SilverlightApplication.host"
xmlns="http://schemas.microsoft.com/client/2007?
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">
<Canvas x:Name="LayoutRoot" Canvas.Top="0? Canvas.Left="0? Width="800? Height="600?>
<Canvas.Background>
<LinearGradientBrush EndPoint="0.5,1? StartPoint="0.5,0?>
<GradientStop Color="#FF000000?/>
<GradientStop Color="#FF7CA9E7? Offset="1?/>
</LinearGradientBrush>
</Canvas.Background>
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="RootCanvasScaleTransform" ScaleX="1? ScaleY="1? />
<TranslateTransform x:Name="RootCanvasTranslateTransform" X="0? Y="0? />
</TransformGroup>
</Canvas.RenderTransform>
</Canvas>
</UserControl>

The following code is needed in the host.xaml.vb.

#Region "Private Vars"
    '***RESIZE CONTROLS*** add our event handler
    Private _originalWidth As Double
    Private _originalHeight As Double
    '***RESIZE CONTROLS*** add our event handler
#End Region
 
#Region "Public Events"
    Public Sub New(ByVal pIPAddress As String)
        '***RESIZE CONTROLS*** add our event handler
        Root = Me
        AddHandler Me.Loaded, AddressOf host_Loaded
        '***RESIZE CONTROLS*** add our event handler
    End Sub
#End Region
 
#Region "Public Vars"
    '***RESIZE CONTROLS*** add our event handler
    Public Shared Root As host
    '***RESIZE CONTROLS*** add our event handler
#End Region
 
#Region "Private Event Handlers"
    Private Sub host_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
        Try
            '***RESIZE CONTROLS*** add our event handler
            'Capture the existing height and width.
            _originalWidth = LayoutRoot.Width
            _originalHeight = LayoutRoot.Height
			
            AddHandler Application.Current.Host.Content.Resized, AddressOf Content_Resized
            
			'Define our resize event handler to call Content_Resized method.
            'Call our Resize function for the first time.
            Resize()
            
			'***RESIZE CONTROLS*** add our event handler
            ucLogon = New Logon(mIPAddress)
            LayoutRoot.Children.Add(ucLogon)
        Catch ex As Exception
		
        End Try
    End Sub
 
    '***RESIZE CONTROLS*** add our event handler
    Private Sub Content_Resized(ByVal sender As Object, ByVal e As EventArgs)
        Resize()
    End Sub
 
    '***RESIZE CONTROLS*** add our event handler
    '***RESIZE CONTROLS*** add our event handler
    Private Sub Resize()
        Dim currentWidth As Double = Application.Current.Host.Content.ActualWidth
        Dim currentHeight As Double = Application.Current.Host.Content.ActualHeight
        'We now scale the RootCanvas to fit the control
        Dim uniformScaleAmount As Double = Math.Min((currentWidth / _originalWidth), (currentHeight / _originalHeight))
        RootCanvasScaleTransform.ScaleX = uniformScaleAmount
        RootCanvasScaleTransform.ScaleY = uniformScaleAmount
        Dim scaledWidth As Double = Math.Min(_originalWidth * uniformScaleAmount, currentWidth)
        Dim scaledHeight As Double = Math.Min(_originalHeight * uniformScaleAmount, currentHeight)
        RootCanvasTranslateTransform.X = (Math.Min(LayoutRoot.ActualWidth, currentWidth) – scaledWidth) / 2
        RootCanvasTranslateTransform.Y = (Math.Min(LayoutRoot.ActualHeight, currentHeight) – scaledHeight) / 2 End Sub
        '***RESIZE CONTROLS*** add our event handler
#End Region