Mapping text block using WriteableBitmap and RotateTransform on WP7

Question

it looks like WriteableBitmap for Silverlight for Windows Phone has a really annoying bug. I have the following code and xaml:

public partial class MainPage : PhoneApplicationPage { CompositeTransform rotate = new CompositeTransform(); public MainPage() { InitializeComponent(); } private void Button_Click(object sender, System.Windows.RoutedEventArgs e) { this.rotate.Rotation += 15; WriteableBitmap bmp = new WriteableBitmap(this.button, rotate); this.image.Source = bmp; Dispatcher.BeginInvoke(() => Debug.WriteLine("{0}, {1}", bmp.PixelWidth, bmp.PixelHeight)); } } 

Here is the haml:

 <Grid> <Button VerticalAlignment="Top" HorizontalAlignment="Center" Content="This is a textblock inside a layout" x:Name="button"/> <Image VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="image"/> <Button VerticalAlignment="Bottom" Content="Rotate" Click="Button_Click"/> </Grid> 

When you press the bottom button, the top button is rendered using a recordable bitmap using a compound transform. After each rendering, the resulting image of the top button is larger than the previous one. In addition, the values ​​of the PixelWith and PixelHeight property for the recorded bitmap are very different from the RenderSize of the Image object. Does anyone know what is going on?

Answer 1

I don’t quite understand what is happening, but I believe that the size of the controls is adjusted due to horizontal and vertical alignment, and for some reason this causes the problem you mentioned.

You can get around it by setting the Stretch property of the Image control to None . Thus, the displayed image will always retain its original size regardless of the size of the image control.

  <Image VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None" x:Name="image"/>