locked
RenderTargetBitmap seems not to obey transforms

    Question

  • I'm trying to render some UIElements to a RenderTargetBitmap.

    I have an Image, that is moved around the base Element using a TranslateTransform.

    When I use RenderTargetTransform.RenderAsync, the Image is rendered without the transform.

    Can I make it actually use that transform?


    BalintN

    Friday, August 01, 2014 4:18 PM

All replies

  • What is the actual code you're using?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, August 01, 2014 7:50 PM
    Moderator
  • Here is a prepared example. It displays an image shifted 100 pixels down and right, renders it, saves it, the saved image is not shifted.

    This is the XAML:

    <Page
        x:Class="W8RT_POC.RTBTransform"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:W8RT_POC"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="50" />
            </Grid.RowDefinitions>
    
            <Grid x:Name="RenderGrid" Grid.Row="0"
                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
    
                <Image x:Name="RenderImage"
                       HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                       Source="Assets/Move_Normal.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5" >
                    <Image.RenderTransform>
                        <CompositeTransform TranslateX="100" TranslateY="100"/>
                    </Image.RenderTransform>
                </Image>
            </Grid>
    
            <Button x:Name="GoButton" Content="GO" Grid.Row="1"
                    HorizontalAlignment="Left" Click="GoButton_Click" />
        </Grid>
    </Page>

    This is the code behind:

    using System;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    
    using System.Threading.Tasks;
    using Windows.UI.Xaml.Media.Imaging;
    
    namespace W8RT_POC
    {
        public sealed partial class RTBTransform : Page
        {
            public RTBTransform()
            {
                this.InitializeComponent();
            }
    
            private async void GoButton_Click(object sender, RoutedEventArgs e)
            {
                RenderTargetBitmap rtb = new RenderTargetBitmap();
                await rtb.RenderAsync(RenderGrid, (int)this.RenderGrid.Width, (int)this.RenderGrid.Height);
                await SaveRenderTargetBitmap(rtb);
            }
    
    
            private async Task SaveRenderTargetBitmap(RenderTargetBitmap RtbToSave)
            {
                // Get a file like this:
                var picker = new Windows.Storage.Pickers.FileSavePicker();
                picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
                picker.FileTypeChoices.Add("GIF file", new string[] { ".gif" });
                picker.DefaultFileExtension = ".gif";
                picker.SuggestedFileName = "Illustration " + DateTime.Now.ToString("yyyy.MM.dd HH:mm:ss");
    
                Windows.Storage.StorageFile file = await picker.PickSaveFileAsync();
    
                if (file != null)
                {
                    Guid encoderId = Windows.Graphics.Imaging.BitmapEncoder.GifEncoderId;
    
                    var bitmapPropertySet = new Windows.Graphics.Imaging.BitmapPropertySet();
    
                    using (var writeStream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite))
                    {
                        var encoder = await Windows.Graphics.Imaging.BitmapEncoder.CreateAsync(encoderId, writeStream);
    
                        byte[] pixels = await GetPixels(RtbToSave);
    
                        encoder.SetPixelData(
                            Windows.Graphics.Imaging.BitmapPixelFormat.Bgra8,
                            Windows.Graphics.Imaging.BitmapAlphaMode.Premultiplied,
                            (uint)RtbToSave.PixelWidth,
                            (uint)RtbToSave.PixelHeight,
                            96,
                            96,
                            pixels);
    
                        await encoder.FlushAsync();
                        using (var outputStream = writeStream.GetOutputStreamAt(0))
                        {
                            await outputStream.FlushAsync();
                        }
                    } // using(writeStream)
                } // if (file != null)
            }
    
    
            private static async Task<byte[]> GetPixels(RenderTargetBitmap bitmap)
            {
                // Get pixels from the RenderTargetBitmap. See http://social.technet.microsoft.com/wiki/contents/articles/20648.using-the-rendertargetbitmap-in-windows-store-apps-with-xaml-and-c.aspx
                // Bytes are in BGRA8 format.
                Windows.Storage.Streams.IBuffer pixelBuffer = await bitmap.GetPixelsAsync();
                byte[] pixels = pixelBuffer.ToArray();
                return pixels;
            }
    
        }
    }


    BalintN



    • Edited by BalintN Saturday, August 02, 2014 4:51 AM bugfix in sample code
    Friday, August 01, 2014 8:52 PM
  • Come on, there's got to be an answer to this!

    Or there should be a sample that would point me in the right direction.


    BalintN

    Friday, August 15, 2014 10:08 PM