OOB Silverlight and content scale on window resize

Question

Good morning,

I faced problem when doing scaleTransform on the content when OOB Silverlight application's window gets resized. The code looks very simple

xaml

<UserControl x:Class="SilverlightApplication1.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="Aquamarine" RenderTransformOrigin="0,0">
        <Rectangle Fill="Aqua" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

        <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Height="150">
            <TextBlock FontSize="20" Text="Hello World" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Center"/>
            <Button Content="Button" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
        </Grid>
    </Grid>
</UserControl>

C#

public MainPage()
{
    InitializeComponent();
    SizeChanged += MainPage_SizeChanged;
}

void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ScaleTransform scaleTransform = new ScaleTransform();
    scaleTransform.ScaleX = (Application.Current.MainWindow.Width / 500f);
    scaleTransform.ScaleY = (Application.Current.MainWindow.Height / 500f);
    scaleTransform.CenterX = 0;
    scaleTransform.CenterY = 0;

    // this.RenderTransform doesn't work either.
    LayoutRoot.RenderTransform = scaleTransform;
}

The content gets scaled when the main window is resized, but, for some reason, I see white background of the window when scaling down. It seems that the content is scaled down faster than window and I don't know what I am doing wrong. The code seems logical and should work, shouldn't it?

Answer 1

The LayoutTransformer saved my day. I have changed the code and xaml as follows and everything works now. Code may need a little tweaking though.

xaml

<UserControl x:Class="SilverlightApplication1.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:layout="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="500">

    <layout:LayoutTransformer x:Name="LayoutTransformer">
        <layout:LayoutTransformer.Content>
            <Grid x:Name="LayoutRoot" Background="AntiqueWhite">
                <Rectangle Fill="Aqua" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Height="150">
                    <TextBlock FontSize="20" Text="Hello World" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Center"/>
                    <Button Content="Button" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                </Grid>
            </Grid>
        </layout:LayoutTransformer.Content>
        <layout:LayoutTransformer.LayoutTransform>
            <ScaleTransform x:Name="ContentScale" CenterX="0" CenterY="0" ScaleX="1" ScaleY="1" />
        </layout:LayoutTransformer.LayoutTransform>
    </layout:LayoutTransformer>
</UserControl>

C#

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        SizeChanged += MainPage_SizeChanged;
    }

    void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        double yScale = ActualHeight / 500f;
        double xScale = ActualWidth / 500f;
        double value = GetScale(xScale, yScale);

        ContentScale.ScaleX = value;
        ContentScale.ScaleY = value;

        LayoutTransformer.ApplyLayoutTransform();
    }

    private double GetScale(double xScale, double yScale)
    {
        return Math.Max(0.1, Math.Min(xScale, yScale));
    }
}