Plane projection and scale causing bluring in silverlight

Question

Ok,

So I've tried to make an application which relies on images being scaled by an individual factor. These images are then able to be turned over, but the use of an animation working on the ProjectionPlane rotation.

The problem comes around when an image is both scaled and rotated. For some reason it starts bluring, where a non scaled image doesn't blur.

Also, if you look at the example image below (top is scaled and rotated, bottom is rotated) the projection of the top one doesn't even seem right. Its too horizontal.

This this the code for the test app:

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">

            <Border Canvas.Top="25" Canvas.Left="50">

                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="3" ScaleY="3" />
                    </TransformGroup>
                </Border.RenderTransform>

                <Border.Projection>
                    <PlaneProjection RotationY="45"/>
                </Border.Projection>

                <Image Source="bw-test-pattern.jpg" Width="50" Height="40"/>
            </Border>

            <Border Canvas.Top="150" Canvas.Left="50">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1" />
                    </TransformGroup>
                </Border.RenderTransform>

                <Border.Projection>
                    <PlaneProjection RotationY="45"/>
                </Border.Projection>

                <Image Source="bw-test-pattern.jpg" Width="150" Height="120"/>
            </Border>

    </Canvas>
</UserControl>

So if anyone could possible shed any light on why this may be happening, I'd very much appreciate it. Suggestions also welcome! :)

** Update **

Just to clarify, if the projection plane rotation is 0, the image becomes un-blurred, so its only during the rotation that the image is blurred.

Answer 1

It looks like the top image is being filtered as it is being drawn. From your code you have:

<Image Source="bw-test-pattern.jpg" Width="50" Height="40"/>

for the top image and

<Image Source="bw-test-pattern.jpg" Width="150" Height="120"/>

for the bottom one. You have different image sizes so the top one might be being upscaled and therefore blurred as it interpolates the missing pixels.

I'm not familiar with silverlight so I don't know how you'd control the filtering options, but setting the top line above to the same as the bottom one might fix it.

Answer 2

The top image's width is set to 50 and the height to 40. So it is downscaled. Afterwards you scale it up to the right size 150, 120. I guess Silverlight scales the image down and doesn't store the original size due to performance optmization. Leave the Scale out and set the right width and height for the first image.