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

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.


<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.

-------------Problems Reply------------

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

<UserControl x:Class="SilverlightApplication1.MainPage"
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>

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

Code behind:

public MainPage()
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;

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:


<Grid x:Name="LayoutRoot" Background="White">
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<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>
<Image x:Name="image" Grid.Column="1" Width="200" Height="200"/>

The code behind:

public MainPage()

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.

Category:silverlight Views:2 Time:2011-11-16

Related post

  • After opening project in Visual Studio, Blend stopped rendering the preview 2011-02-22

    I have a problem with Visual Studio 2010. When I open any projects created in Blend 4, and simply save it (no modification made), Blend stop rendering preview at the design time. I am using Expression Blend 4. Preview in Visual Studio 2010 is rendere

  • Nested dart project prevents ServiceStack.Razor views from rendering 2014-03-12

    The situation I'm developing a pure ServiceStack/Razor application (no MVC4 or Web API) using licensed ServiceStack 4.0.12. I have a view (cshtml) that references a Javascript file which is transpiled from a dart project (using AngularDart). For conv

  • No DataBinding when rendering a UserControl+ItemsControl in WriteableBitmap? 2011-12-24

    I want to use a WriteableBitmap to render a programmatically instantiated UserControl to a jpg/png image to use it as a live tile background image in a Windows Phone 7.1 project, but DataBinding is not working as expected when rendering the control.

  • Find Project by Permalink, 404 if not found 2009-03-25

    I changed my show controller to find records by their permalink rather than their id (for SEO juiciness). def show @project = Project.find_by_permalink(params[:id]) end But, if I type in localhost:3000/projects/foo (and there is not a project with a

  • Why does sign matter in opengl projection matrix 2010-02-18

    I'm working on a computer vision problem which requires rendering a 3d model using a calibrated camera. I'm writing a function that breaks the calibrated camera matrix into a modelview matrix and a projection matrix, but I've run into an interesting

  • Startup script registered with ScriptManager.RegisterStartupScript is not rendered to page 2011-01-27

    I have a call to ScriptManager.RegisterStartupScript in ASP.NET 3.5 that isn't being rendered to the page and I can't figure out why: System.Web.UI.ScriptManager.RegisterStartupScript( Page , typeof(ListControlBase) , "ShowPopup_" + ClientID , "alert

  • Efficient KML Rendering as a MapKit overlay on the iPhone 2011-03-31

    Howdy all. I'm working on a project that will (ideally) require the rendering of large, complex KML files as an overlay/overlays on a MapKit MKMapView. I've tried the KML parser that Apple's sample documentation provides, and it's rather incapable of

  • Why my view is not rendering DateTime 2011-10-21

    I have following Model Class public class CandidateViewModel { public string cName { get; set; } public DateTime dob { get; set; } public DateTime dod { get; set; } } my view which is based on this model class does not render TextBoxes for DateTime t

  • green flashes when rendering in Premiere CC 2014 2012-12-10

    Hi there, I'm an in-house cameraman and editor for a financial business in London. I'm using the latest Macbook Pro Retina with 16gb ram, NVidia 750 graphics card. I've been using the same method for editing for past two years but have only just star

  • Backbone.js Sub-View Template Not Rendering Although Render Function Does Run 2013-01-01

    Unfortunately, I have written a sub-view for my project. While it had previously rendered perfectly well and exactly how I wanted it to, I learned that my app was not structured properly. I am in the process of restructuring, and everything else work

  • Font not rendering properly on WPF desktop application 2013-11-18

    I have a custom font in my project. But WPF is not rendering it properly. <TextBlock Text="This is a test sentence" Foreground="Black" FontSize="50" FontFamily="Assets/Fonts/#Custom Font"/> Now I have two font files named: Custom Font Medium It

  • Sony Vegas Pro 11 shows only audio templates for rendering 2013-12-20

    Hey there. I have Sony Vegas Pro 11 running on Windows 7 64-Bit. I do many projects as home movies... I just completed a home movie with several audio & video clips with transparent title text clips and i wanted to render it. But when I click 'Re

  • Which SVG toolkit would you recommend to use in Java? 2008-10-02

    As a follow-up to another question, I was wondering what would be the best way to use SVG in a Java project. --------------Solutions------------- The Apache Batik project is an open source SVG renderer written in Java. You can pass it an SVG file, or

  • Is it possible to design NSCell subclasses in Interface Builder? 2008-10-14

    I'm trying to subclass NSCell for use in a NSTableView. The cell I want to create is fairly complicated so it would be very useful if I could design it in Interface Builder and then load the NSCell from a nib. Is this possible? How do I do it? ------

  • Drawing a textured quad using XNA 2009-07-11

    I'm attempting to render a textured quad using the example located here. I can successfully render the quad, but the texture information appears to be lost. The quad takes the color of the underlying texture, though. I've checked the obvious problems

  • How to cartoon-ify an image programmatically? 2009-08-31

    Maybe you have noticed, but cartoon-ifying your photos is the latest rage on the internet. My boss now wants our product, which works with photos and videos of people, to cartoonify them. So I need an algorithm to do it manually (we use c++/Qt for ou

  • Basic google app engine (python) templating issue 2010-02-01

    after going through some basic tutorials on the app engine and the webapp framework, I'm attempting to display documents that are related to a project construct I've created (e.g {% ifequal project.key doc.parentproject %} ) I have created several do

  • Spark View Engine and using viewdata confusion 2010-02-19

    I can't seem to get a grasp on how to use the viewdata structure in the spark view engine. I have the following code in my controller: // Retrieve the project list from the database var projects = from p in _context.Repository<project>() orderb

  • How do I enable code-completion in Netbeans 6.8 for facelets in JSF 1.2? 2010-02-22

    I'd like to enable code completion for facelets + JSF 1.2 in NetBeans 6.8. I'd prefer to enable it for a free-form project that I build using my own Ant build.xml, but I see no options to enable that, so I'm willing to go with a "Web Application with

Copyright (C), All Rights Reserved.

processed in 0.263 (s). 11 q(s)