Projection is not being respected when rendering a UIElement into a WriteableBitmap

Question

I am using Silverlight 4 and am having trouble correctly generating bitmaps from UIElements that have a projection applied to them.

In my specific case I am using the WriteableBitmap class to capture a bitmap of an Image control which has a Matrix3DProjection applied to it. This projection represents a non-affine transform which is used to transform the Image into an arbitrary quadrilateral. The resulting bitmap is then saved for later use.

Unfortunately, projections seem to be ignored when WriteableBitmap captures a UIElement. This also seems to be the case for any RenderTransform that may be attached, although this can be addressed by using an overload on the WriteableBitmap constructor that accepts a Transform. No such consideration seems to have been made for projections.

The following contrived code example illustrates the point. It transforms a Button rather than an Image component, but the effect is the same.

The XAML:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="button" Grid.Column="0" Width="100" Height="50" Click="button_Click">Render me</Button>
    <Image x:Name="image" Grid.Column="1" Width="200" Height="200" Stretch="Uniform"/>
</Grid>

The code behind:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        button.Projection = new Matrix3DProjection()
        {
            ProjectionMatrix = new Matrix3D()
            {
                M11 = 0.825, M12 = -0.513, M13 = 0, M14 = 0.001,
                M21 = 0.023, M22 = 0.986, M23 = 0, M24 = -0.002,
                M31 = 0, M32 = 0, M33 = 1, M34 = 0,
                OffsetX = 0, OffsetY = 0, OffsetZ = 0, M44 = 1
            }
        }; 
    }

    private void button_Click(object sender, RoutedEventArgs e)
    {
        // Render the button as a bitmap and display
        WriteableBitmap bitmap = new WriteableBitmap(button, null);
        image.Source = bitmap;
    }
}

When run, you will find that an image of the button is rendered into the Image component, but without the distortion that is obvious on the original button itself.

I've tried playing around with both the constructor and Render method on WriteableBitmap, with all of their various overloads with no success. I have also tried nesting the source UIElement within other elements and applying the projection at varying levels of the tree to see if WriteableBitmap would render a projection correctly if it was as part of a larger composite structure. No luck there either.

Hopefully I am just missing something simple here, but I suspect that this just may not be possible in the current version of Silverlight.

If this is indeed a dead end, then a viable alternative to me would be to be able to directly apply the matrix transformation to a bitmap, bypassing the whole UIElement.Projection piece of silverlight altogether. However, I don't really know where to start when it comes to taking a source bitmap, feeding it's pixels through such a transformation, and collecting the resultant output. The fact that the transformation is non-affine suggests to me that there will be some level of interpolation involved, and that the math requirements for such a solution are probably significant.

Any help or advice is greatly appreciated.

Answer 1

Try using the LayoutTransformer from Silverlight Control Toolkit (System.Windows.Controls.Layout.Toolkit assembly)

<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"
             xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    d:DesignHeight="300" d:DesignWidth="400">

    <Canvas x:Name="LayoutRoot" Background="White">
        <toolkit:LayoutTransformer x:Name="lt" >
            <Button x:Name="button" Click="Button_Click">Click me</Button>
        </toolkit:LayoutTransformer>

        <Border BorderBrush="Red" BorderThickness="1" Canvas.Left="100" Canvas.Top="100">
            <Image x:Name="image"  Width="100" Height="100" />
        </Border>
    </Canvas>
</UserControl>

Code behind:

    public MainPage()
    {
        InitializeComponent();
        button.Projection = new Matrix3DProjection() { ProjectionMatrix = new Matrix3D() { M11 = 0.825, M12 = -0.513, M13 = 0, M14 = 0.001, M21 = 0.023, M22 = 0.986, M23 = 0, M24 = -0.002, M31 = 0, M32 = 0, M33 = 1, M34 = 0, OffsetX = 0, OffsetY = 0, OffsetZ = 0, M44 = 1 } };
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        WriteableBitmap bitmap = new WriteableBitmap(lt, null); 
        image.Source = bitmap; 
    }

Answer 2

The solution to my problem turned out to be simple. Just make the source UIElement the child of another, and then apply the projection to the child element, but use the parent element when rendering to a WriteableBitmap. Modified code example below:

The XAML:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Border x:Name="border" Width="200" Height="200" Grid.Column="0">
        <Button x:Name="button" Width="120" Height="50" Click="button_Click">Render me</Button>
    </Border>
    <Image x:Name="image" Grid.Column="1" Width="200" Height="200"/>
</Grid>

The code behind:

public MainPage()
{
    InitializeComponent();

    button.Projection = new Matrix3DProjection()
    {
        ProjectionMatrix = new Matrix3D()
        {
            M11 = 0.825, M12 = -0.513, M13 = 0, M14 = 0.001,
            M21 = 0.023, M22 = 0.986, M23 = 0, M24 = -0.002,
            M31 = 0, M32 = 0, M33 = 1, M34 = 0,
            OffsetX = 0, OffsetY = 0, OffsetZ = 0, M44 = 1
        }
    }; 
}

private void button_Click(object sender, RoutedEventArgs e)
{
    // Render the button as a bitmap and display
    WriteableBitmap bitmap = new WriteableBitmap(border, null);  
    image.Source = bitmap;
}

Thanks to @foson for getting me to take a harder look at this.