Windows Phone 8.1在图像上写文本

Question

so I did like 3 h hours of research and could not get anything working yet. I got objects holding a BitmapImage as a property at runtime. I want to write text on this BitmapImage. How am I able to do so using C# & XAML?

I read something about being able to construct a WriteableBitmap and a .render()-method, but I only found a WriteableBitmap Class in the Windows.UI.Xaml.Media.Imaging Namespace.

Can anyone prevent me a snippet to start from?

Answer 1

I found a nice way to get text in images to work. I use a Grid Control to map an Image and two TextBox into onto each other. Make sure the Image is stated first, which means it is rendered first.

<Grid Grid.Row="1" x:Name="Capture_Grid">
 <Image Binding="{Binding Image}" />

 <TextBox x:Name="UpperCaptionBorder_TextBox" Style="{StaticResource CaptionTextBoxStyle}" 
 Text="text" TextWrapping="Wrap" FontSize="32"
 HorizontalAlignment="Center" VerticalAlignment="Bottom"
 SelectionChanged="UpperCaption_TextBox_SelectionChanged"
 />

 <TextBox x:Name="LowerCaptionBorder_TextBox" Style="{StaticResource CaptionTextBoxStyle}" 
 Text="text" TextWrapping="Wrap" FontSize="32"
 HorizontalAlignment="Center" VerticalAlignment="Bottom"
 SelectionChanged="LowerCaption_TextBox_SelectionChanged"
 />
</Grid>

Then I can save the whole Grid control as a 'Scresn Shot', but it will only be as width and height as the Grid actually is.

        RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
        await renderTargetBitmap.RenderAsync(Capture_Grid);
        var pixels = await renderTargetBitmap.GetPixelsAsync();
        Grid element = Capture_Grid;

// file extension correction

        var file = await KnownFolders.PicturesLibrary.CreateFileAsync("pic.png", CreationCollisionOption.ReplaceExisting);

        using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
        {
            var encoder = await
                BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
            byte[] bytes = pixels.ToArray();
            encoder.SetPixelData(BitmapPixelFormat.Bgra8,
                                 BitmapAlphaMode.Ignore,
                                 (uint)renderTargetBitmap.PixelWidth,
                                    (uint)renderTargetBitmap.PixelHeight,
                                 96, 96, bytes);

            await encoder.FlushAsync();
        }

It also saves the Image (Grid + 2 TextBoxes) right in the Image Hub.