How can I make a WPF element resize after rotation, rather than before?

Question

I have a simple, horizontal <Line> element. This line has a RotateTransform applied to it, which slants the line at whatever angle I choose. The problem is that the rendered length of the line is calculated before the transformation is applied. The result is that the line no longer fits its parent element after it is rotated.

My current code looks similar to this, using 15° as an example:

<Grid Background="Orange">
    <Line   HorizontalAlignment="Left" VerticalAlignment="Bottom"
            RenderTransformOrigin="0,0" Stretch="UniformToFill"
            StrokeThickness="1" Stroke="Green" X1="0" Y1="0" X2="1" Y2="0">
        <UIElement.RenderTransform>
            <RotateTransform Angle="-15" />
        </UIElement.RenderTransform>
    </Line>
</Grid>

The result is this:
http://img179.imageshack.us/img179/2592/slantpartial.png
As shown, the line does not make contact with the right-side of the control, due to the rotation. I need the line to stretch to the largest size possible and fill its parent control completely, regardless of what I set the angle to. The angle will change dynamically at run-time, and I can't use slope calculation in my current project. I need to keep the RotateTransform as the means of slanting the line.

An example of what I need to accomplish - again, using 15° as an example:
http://img42.imageshack.us/img42/8276/slantcomplete.png

score 1 · Accepted Answer · answered Sep 17 '09 at 05:29

1

Make the line as long as the maximum distance between the top left and bottom right corners of the parent container. This will make the line slightly longer than the container when lying flat, but fit perfectly when on a 50% slope. Let the parent crop the overflow.

answered Sep 17 '09 at 05:29

Soviut

88,194
49
192
260

1

This doesn't work using RenderTransform, since the line is cropped by the layout system before a RenderTransform is applied. However, this solution DOES work perfectly with a LayoutTransform. Lengthening the line manually causes the layout system to use the code-specified length, overriding any other factors except for "Stretch." The "Stretch" property of the line needs to be set to "None" for this solution to work. Likewise, the "HorizontalAlignment" and "VerticalAlignment" properties should NOT be set to "Stretch." – Giffyguy Sep 17 '09 at 20:55
(The system won't allow me to upvote your answer. That's really weird...) – Giffyguy Sep 17 '09 at 20:56

score 1 · Answer 2 · answered Sep 17 '09 at 05:38

1

You can try scale transform before rotate transform:

<UIElement.RenderTransform>
  <TransformGroup>
    <ScaleTransform ScaleX="2.0" />
    <RotateTransform Angle="-15" />
  </TransformGroup>
</UIElement.RenderTransform>

answered Sep 17 '09 at 05:38

idursun

6,261
1
37
51

The problem with this solution is it scales the line's thickness as well, distorting the final result. – Giffyguy Sep 17 '09 at 20:23

score 0 · Answer 3 · answered Sep 17 '09 at 11:23

0

The simplest solution would be to change the X and Y values dynamically and not use a RenderTransform. Why is it that slope calculations can't be used?

answered Sep 17 '09 at 11:23

moogs

8,122
8
44
60

I can't use slope to define the line, since I am most likely going to need to apply gradients and other eye-candies to this line later. A sloped line will react differently to a gradient's coordinate system, but a flat line will always react the same way. Since the transformation is applied after the gradient, the gradient will be rotated with the line so it will still render correctly. For further clarification, see my question regarding this: http://stackoverflow.com/questions/1412833/ – Giffyguy Sep 17 '09 at 19:05

How can I make a WPF element resize after rotation, rather than before?

3 Answers3