Question

I have a Rectangle Shape in Silverlight that is rotated 15 degrees. It is filled with an image. The normal behavior of SL is to rotate the Fill object with it’s parent (the rectangle, in this case).

Is there any way to ignore the transform effect for the Fill object? I’d like the image to continue to point north on the screen.

Here’s the XAML I have below. I’d like to see if there is a property or another way to not rotate the ImageBrush (image2.png).

  <Rectangle x:Name="Rectangle_5_ID6" RenderTransformOrigin="0.5 0.5" Height="24" Width="78" Stroke="#000000" StrokeThickness="1" Canvas.Top="25" Canvas.Left="25">
    <Rectangle.RenderTransform>
      <TransformGroup>
        <RotateTransform Angle="15" />
      </TransformGroup>
    </Rectangle.RenderTransform>
    <Rectangle.Fill>
      <ImageBrush ImageSource="image2.png"  />
    </Rectangle.Fill>
  </Rectangle>

Answer 1

There are a number of different approaches but I suspect the one that fits your needs the best would be to use a Path instead.

<Path x:Name="Rectangle_5_ID6" Stroke="Black" StrokeThickness="1" >
    <Path.Data>
        <RectangleGeometry Rect="0, 0, 78, 24" >
            <RectangleGeometry.Transform>
                <RotateTransform Angle="15" CenterX="39" CenterY="12" />
            </RectangleGeometry.Transform>
        </RectangleGeometry>
    </Path.Data>
    <Path.Fill>
        <ImageBrush ImageSource="image2.png" />
    </Path.Fill>
</Path>

The path ends up having a rectangular area that can accommodate all the geometries contain in its data and the fill drawn into this area. The Rectangle geometry is drawn with the rotate transform applied and only the part of the fill that appears inside the geometry is actually visibile the rest is clipped. Hence you get the desired output.