Vista - Does Rotate also mean skew?

I've drawn a Rectangle and filled it with a DrawingBrush, then tried to
transform the brush and rotate it by 45 degrees [see the source code
http://blog.pantos.name/images/18/o_Code.JPG]. The resulting transformation
as you can see in the image
[http://blog.pantos.name/images/18/o_...ormations.JPG] is also
skewed. The same applies for all brushes as well as the opacity mask ones.
Does anyone have any idea why this is happening?

--
_________________________
Kostas Pantos [MCP]
http://kostas.pantos.name

This occurs because you're rotating using Brush.RelativeTransform. This
transform applies before the stretch/shrink/offset transform is applied to
map the viewbox to the viewport. As a result, the vertical stretch which
applies in your example (to stretch a viewbox with an aspect ratio of 1:1 to
a Rectangle with aspect ratio 12:19) applies *after* the rotation. If you
were to apply the same transform to the Brush.Transform property, you would
see no skew.

-Adam Smith [MS]

"Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com> wrote
in message news:67CA4CCA-7EDF-4EC9-A2B5-2A60519A22CC@microsoft.com...
> I've drawn a Rectangle and filled it with a DrawingBrush, then tried to
> transform the brush and rotate it by 45 degrees [see the source code
> http://blog.pantos.name/images/18/o_Code.JPG]. The resulting
> transformation
> as you can see in the image
> [http://blog.pantos.name/images/18/o_...ormations.JPG] is also
> skewed. The same applies for all brushes as well as the opacity mask ones.
> Does anyone have any idea why this is happening?
>
> --
> _________________________
> Kostas Pantos [MCP]
> http://kostas.pantos.name

I've already seen that with the Brush.Transform property there's no skew. The
Brush.Relative transform though is the default tranformation property that
Microsoft Expression Interactive Designer uses and the only one that can be
manupulated by the designer (The Brush.Transform property can only be
manipulated from the XAML code).
If my viewbox has the same aspect ratio as the rectangle will a skew be
aplied?
Thanks Adam for the reply.
--
_________________________
Kostas Pantos [MCP]
http://kostas.pantos.name


"Adam Smith [MS]" wrote:

> This occurs because you're rotating using Brush.RelativeTransform. This
> transform applies before the stretch/shrink/offset transform is applied to
> map the viewbox to the viewport. As a result, the vertical stretch which
> applies in your example (to stretch a viewbox with an aspect ratio of 1:1 to
> a Rectangle with aspect ratio 12:19) applies *after* the rotation. If you
> were to apply the same transform to the Brush.Transform property, you would
> see no skew.
>
> -Adam Smith [MS]
>
> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com> wrote
> in message news:67CA4CCA-7EDF-4EC9-A2B5-2A60519A22CC@microsoft.com...
> > I've drawn a Rectangle and filled it with a DrawingBrush, then tried to
> > transform the brush and rotate it by 45 degrees [see the source code
> > http://blog.pantos.name/images/18/o_Code.JPG]. The resulting
> > transformation
> > as you can see in the image
> > [http://blog.pantos.name/images/18/o_...ormations.JPG] is also
> > skewed. The same applies for all brushes as well as the opacity mask ones.
> > Does anyone have any idea why this is happening?
> >
> > --
> > _________________________
> > Kostas Pantos [MCP]
> > http://kostas.pantos.name
>
>
>

I believe that's correct - basically what's happening is that your rotation
is applied, and the result is then scaled by Viewport.Width / Viewbox.Width,
Viewport.Height / Viewbox.Height. If that results in a non-uniform scale,
you'll see what looks like a skew applied to your rotated object.

I'll forward this feedback to EID.

-Adam Smith [MS]


"Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com> wrote
in message news:AE917E57-632D-40D6-9F48-9FAEABFF8C57@microsoft.com...
> I've already seen that with the Brush.Transform property there's no skew.
> The
> Brush.Relative transform though is the default tranformation property that
> Microsoft Expression Interactive Designer uses and the only one that can
> be
> manupulated by the designer (The Brush.Transform property can only be
> manipulated from the XAML code).
> If my viewbox has the same aspect ratio as the rectangle will a skew be
> aplied?
> Thanks Adam for the reply.
> --
> _________________________
> Kostas Pantos [MCP]
> http://kostas.pantos.name
>
>
> "Adam Smith [MS]" wrote:
>
>> This occurs because you're rotating using Brush.RelativeTransform. This
>> transform applies before the stretch/shrink/offset transform is applied
>> to
>> map the viewbox to the viewport. As a result, the vertical stretch which
>> applies in your example (to stretch a viewbox with an aspect ratio of 1:1
>> to
>> a Rectangle with aspect ratio 12:19) applies *after* the rotation. If
>> you
>> were to apply the same transform to the Brush.Transform property, you
>> would
>> see no skew.
>>
>> -Adam Smith [MS]
>>
>> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com>
>> wrote
>> in message news:67CA4CCA-7EDF-4EC9-A2B5-2A60519A22CC@microsoft.com...
>> > I've drawn a Rectangle and filled it with a DrawingBrush, then tried to
>> > transform the brush and rotate it by 45 degrees [see the source code
>> > http://blog.pantos.name/images/18/o_Code.JPG]. The resulting
>> > transformation
>> > as you can see in the image
>> > [http://blog.pantos.name/images/18/o_...ormations.JPG] is also
>> > skewed. The same applies for all brushes as well as the opacity mask
>> > ones.
>> > Does anyone have any idea why this is happening?
>> >
>> > --
>> > _________________________
>> > Kostas Pantos [MCP]
>> > http://kostas.pantos.name
>>
>>
>>

Hi Adam,
I've tried to verify your response with a simple demo but didn't get
anywhere. As you can see from the following code I've created a rectangle and
set its fill to a solid color brush, then I've used a drawing brush as an
opacity mask. I've made sure that the viewbox of the opacity brush had the
same aspect ratio as the rectangle by setting its
ViewboxUnits="RelativeToBoundingBox" and Viewbox="0,0,1,1" [note: according
to the documentation viewbox property is "The position and dimensions of the
brush's content. The default value is a Rect with a TopLeft of (0,0) and a
Width and Height of 1.]. Then tried to rotate it using a relative tranform
and the result was again scewed as you can see from the image
http://blog.pantos.name/images/18/o_winfxScew.jpg .
What am I doing wrong? I assume that by Viewport you mean the rectangle,
right? If that's the case, then in my examle, Rectangle.Width /
Viewbox.Width, rectangle.Height / Viewbox.Height results in a uniform scale
(1,1). How come my brush is again scewed.
Thanks for any help, sorry for the lengthy post.

==Code==
<Rectangle Stroke="#FF000000" HorizontalAlignment="Left"
VerticalAlignment="Stretch" Margin="96,108,0,121" Width="170" Height="220"
x:Name="Rectangle" RenderTransformOrigin="0.5,0.5">
<Rectangle.Fill>
<SolidColorBrush Color="sc#1, 0.18603605, 0.211999342, 0.6086484"/>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<DrawingBrush ViewboxUnits="RelativeToBoundingBox" Viewbox="0,0,1,1"
Stretch="None">
<DrawingBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform X="0" Y="0"/>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="45"/>
<TranslateTransform X="0" Y="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</DrawingBrush.RelativeTransform>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<DrawingCollection>
<GeometryDrawing Brush="#FFD3D3D3">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,20,20"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="#FF000000">
<GeometryDrawing.Geometry>
<EllipseGeometry RadiusX="10" RadiusY="10" Center="0,0"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="#FF000000">
<GeometryDrawing.Geometry>
<EllipseGeometry RadiusX="10" RadiusY="10" Center="20,20"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="#FFFFFFFF">
<GeometryDrawing.Geometry>
<EllipseGeometry RadiusX="10" RadiusY="10" Center="20,0"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="#FFFFFFFF">
<GeometryDrawing.Geometry>
<EllipseGeometry RadiusX="10" RadiusY="10" Center="0,20"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingCollection>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.OpacityMask>
</Rectangle>
==Code==
--
_________________________
Kostas Pantos [MCP]
http://kostas.pantos.name


"Adam Smith [MS]" wrote:

> I believe that's correct - basically what's happening is that your rotation
> is applied, and the result is then scaled by Viewport.Width / Viewbox.Width,
> Viewport.Height / Viewbox.Height. If that results in a non-uniform scale,
> you'll see what looks like a skew applied to your rotated object.
>
> I'll forward this feedback to EID.
>
> -Adam Smith [MS]
>
>
> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com> wrote
> in message news:AE917E57-632D-40D6-9F48-9FAEABFF8C57@microsoft.com...
> > I've already seen that with the Brush.Transform property there's no skew.
> > The
> > Brush.Relative transform though is the default tranformation property that
> > Microsoft Expression Interactive Designer uses and the only one that can
> > be
> > manupulated by the designer (The Brush.Transform property can only be
> > manipulated from the XAML code).
> > If my viewbox has the same aspect ratio as the rectangle will a skew be
> > aplied?
> > Thanks Adam for the reply.
> > --
> > _________________________
> > Kostas Pantos [MCP]
> > http://kostas.pantos.name
> >
> >
> > "Adam Smith [MS]" wrote:
> >
> >> This occurs because you're rotating using Brush.RelativeTransform. This
> >> transform applies before the stretch/shrink/offset transform is applied
> >> to
> >> map the viewbox to the viewport. As a result, the vertical stretch which
> >> applies in your example (to stretch a viewbox with an aspect ratio of 1:1
> >> to
> >> a Rectangle with aspect ratio 12:19) applies *after* the rotation. If
> >> you
> >> were to apply the same transform to the Brush.Transform property, you
> >> would
> >> see no skew.
> >>
> >> -Adam Smith [MS]
> >>
> >> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com>
> >> wrote
> >> in message news:67CA4CCA-7EDF-4EC9-A2B5-2A60519A22CC@microsoft.com...
> >> > I've drawn a Rectangle and filled it with a DrawingBrush, then tried to
> >> > transform the brush and rotate it by 45 degrees [see the source code
> >> > http://blog.pantos.name/images/18/o_Code.JPG]. The resulting
> >> > transformation
> >> > as you can see in the image
> >> > [http://blog.pantos.name/images/18/o_...ormations.JPG] is also
> >> > skewed. The same applies for all brushes as well as the opacity mask
> >> > ones.
> >> > Does anyone have any idea why this is happening?
> >> >
> >> > --
> >> > _________________________
> >> > Kostas Pantos [MCP]
> >> > http://kostas.pantos.name
> >>
> >>
> >>
>
>
>

Viewport is a property on TileBrush (the base class for VisualBrush,
ImageBrush and DrawingBrush), and defines the area into which the Viewbox
(content) will be stretched. By default, the Viewport is 0,0,1,1 and
ViewportUnits are RelativeToBoundingBox, so yes, by default this will be the
same size and aspect ratio as the Rectangle you're filling, but you can
explicitly set these properties if you wish to override that default
behavior.

In your example, your Rectangle's width is 170 and its Height is 220, and
since your content extends from -10,-10 to 30,30 and your Viewbox is 0,0,1,1
Relative (i.e. it stretches to encompass the entire source), the Viewbox's
Width is 40 and the Viewbox's Height is also 40. So, your Viewport has an
aspect ratio of 17:22 while your source has a ratio of 40:40 == 1:1, so you
should see a ~30% vertical stretch/distortion applied post
RelativeTransform, which is what appears to be happening in the image you
link to.

Please let me know if this helps - I'd really like to make sure we can make
this work. I believe that what you *really* want is to not use the
RelativeTransform (and instead use Transform), but I understand your point
about EID only providing easy access to the RelativeTransform - I have
passed on that feedback.

-Adam Smith [MS]

"Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com> wrote
in message news:70D67DBD-3063-4A17-91B6-01499EE83EA4@microsoft.com...
> Hi Adam,
> I've tried to verify your response with a simple demo but didn't get
> anywhere. As you can see from the following code I've created a rectangle
> and
> set its fill to a solid color brush, then I've used a drawing brush as an
> opacity mask. I've made sure that the viewbox of the opacity brush had the
> same aspect ratio as the rectangle by setting its
> ViewboxUnits="RelativeToBoundingBox" and Viewbox="0,0,1,1" [note:
> according
> to the documentation viewbox property is "The position and dimensions of
> the
> brush's content. The default value is a Rect with a TopLeft of (0,0) and a
> Width and Height of 1.]. Then tried to rotate it using a relative tranform
> and the result was again scewed as you can see from the image
> http://blog.pantos.name/images/18/o_winfxScew.jpg .
> What am I doing wrong? I assume that by Viewport you mean the rectangle,
> right? If that's the case, then in my examle, Rectangle.Width /
> Viewbox.Width, rectangle.Height / Viewbox.Height results in a uniform
> scale
> (1,1). How come my brush is again scewed.
> Thanks for any help, sorry for the lengthy post.
>
> ==Code==
> <Rectangle Stroke="#FF000000" HorizontalAlignment="Left"
> VerticalAlignment="Stretch" Margin="96,108,0,121" Width="170" Height="220"
> x:Name="Rectangle" RenderTransformOrigin="0.5,0.5">
> <Rectangle.Fill>
> <SolidColorBrush Color="sc#1, 0.18603605, 0.211999342, 0.6086484"/>
> </Rectangle.Fill>
> <Rectangle.OpacityMask>
> <DrawingBrush ViewboxUnits="RelativeToBoundingBox" Viewbox="0,0,1,1"
> Stretch="None">
> <DrawingBrush.RelativeTransform>
> <TransformGroup>
> <TranslateTransform X="0" Y="0"/>
> <ScaleTransform ScaleX="1" ScaleY="1"/>
> <SkewTransform AngleX="0" AngleY="0"/>
> <RotateTransform Angle="45"/>
> <TranslateTransform X="0" Y="0"/>
> <TranslateTransform X="0" Y="0"/>
> </TransformGroup>
> </DrawingBrush.RelativeTransform>
> <DrawingBrush.Drawing>
> <DrawingGroup>
> <DrawingGroup.Children>
> <DrawingCollection>
> <GeometryDrawing Brush="#FFD3D3D3">
> <GeometryDrawing.Geometry>
> <RectangleGeometry Rect="0,0,20,20"/>
> </GeometryDrawing.Geometry>
> </GeometryDrawing>
> <GeometryDrawing Brush="#FF000000">
> <GeometryDrawing.Geometry>
> <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,0"/>
> </GeometryDrawing.Geometry>
> </GeometryDrawing>
> <GeometryDrawing Brush="#FF000000">
> <GeometryDrawing.Geometry>
> <EllipseGeometry RadiusX="10" RadiusY="10" Center="20,20"/>
> </GeometryDrawing.Geometry>
> </GeometryDrawing>
> <GeometryDrawing Brush="#FFFFFFFF">
> <GeometryDrawing.Geometry>
> <EllipseGeometry RadiusX="10" RadiusY="10" Center="20,0"/>
> </GeometryDrawing.Geometry>
> </GeometryDrawing>
> <GeometryDrawing Brush="#FFFFFFFF">
> <GeometryDrawing.Geometry>
> <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,20"/>
> </GeometryDrawing.Geometry>
> </GeometryDrawing>
> </DrawingCollection>
> </DrawingGroup.Children>
> </DrawingGroup>
> </DrawingBrush.Drawing>
> </DrawingBrush>
> </Rectangle.OpacityMask>
> </Rectangle>
> ==Code==
> --
> _________________________
> Kostas Pantos [MCP]
> http://kostas.pantos.name
>
>
> "Adam Smith [MS]" wrote:
>
>> I believe that's correct - basically what's happening is that your
>> rotation
>> is applied, and the result is then scaled by Viewport.Width /
>> Viewbox.Width,
>> Viewport.Height / Viewbox.Height. If that results in a non-uniform
>> scale,
>> you'll see what looks like a skew applied to your rotated object.
>>
>> I'll forward this feedback to EID.
>>
>> -Adam Smith [MS]
>>
>>
>> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com>
>> wrote
>> in message news:AE917E57-632D-40D6-9F48-9FAEABFF8C57@microsoft.com...
>> > I've already seen that with the Brush.Transform property there's no
>> > skew.
>> > The
>> > Brush.Relative transform though is the default tranformation property
>> > that
>> > Microsoft Expression Interactive Designer uses and the only one that
>> > can
>> > be
>> > manupulated by the designer (The Brush.Transform property can only be
>> > manipulated from the XAML code).
>> > If my viewbox has the same aspect ratio as the rectangle will a skew be
>> > aplied?
>> > Thanks Adam for the reply.
>> > --
>> > _________________________
>> > Kostas Pantos [MCP]
>> > http://kostas.pantos.name
>> >
>> >
>> > "Adam Smith [MS]" wrote:
>> >
>> >> This occurs because you're rotating using Brush.RelativeTransform.
>> >> This
>> >> transform applies before the stretch/shrink/offset transform is
>> >> applied
>> >> to
>> >> map the viewbox to the viewport. As a result, the vertical stretch
>> >> which
>> >> applies in your example (to stretch a viewbox with an aspect ratio of
>> >> 1:1
>> >> to
>> >> a Rectangle with aspect ratio 12:19) applies *after* the rotation. If
>> >> you
>> >> were to apply the same transform to the Brush.Transform property, you
>> >> would
>> >> see no skew.
>> >>
>> >> -Adam Smith [MS]
>> >>
>> >> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com>
>> >> wrote
>> >> in message news:67CA4CCA-7EDF-4EC9-A2B5-2A60519A22CC@microsoft.com...
>> >> > I've drawn a Rectangle and filled it with a DrawingBrush, then tried
>> >> > to
>> >> > transform the brush and rotate it by 45 degrees [see the source code
>> >> > http://blog.pantos.name/images/18/o_Code.JPG]. The resulting
>> >> > transformation
>> >> > as you can see in the image
>> >> > [http://blog.pantos.name/images/18/o_...ormations.JPG] is
>> >> > also
>> >> > skewed. The same applies for all brushes as well as the opacity mask
>> >> > ones.
>> >> > Does anyone have any idea why this is happening?
>> >> >
>> >> > --
>> >> > _________________________
>> >> > Kostas Pantos [MCP]
>> >> > http://kostas.pantos.name
>> >>
>> >>
>> >>
>>
>>
>>

Hi Adam,
Thanks for your interest and quick response, I too do hope we can make this
work.

I guess that you've calculated this ("your content extends from -10,-10 to
30,30") coordinates by manually addind the Geometry objects' dimensions,
right? In that respect you're right the content width and height were 40.
So I've changed my example a bit, I've deleted all GeometryObjects from the
DrawingBrush (used as an OpacityMask) except from a Rectangle. I've then set
the width and height properties of this RectangleGeometry object to be equal
to my Rectangle. Thus according to your previous calculations the Viewbox's
aspect ratio should be equal to the Viewport's one.

Again though the rotation of the opacityMask brush resulted in a skew.
http://blog.pantos.name/images/18/o_opacityscew.jpg

==Code==
<Rectangle Stroke="#FF000000" Width="170" Height="220" x:Name="Rectangle"
RenderTransformOrigin="0.5,0.5">
<Rectangle.Fill>
<SolidColorBrush Color="sc#1, 0.18603605, 0.211999342, 0.6086484"/>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<DrawingBrush ViewboxUnits="RelativeToBoundingBox" Viewbox="0,0,1,1"
Stretch="None">
<DrawingBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform X="0" Y="0"/>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="45"/>
<TranslateTransform X="0" Y="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</DrawingBrush.RelativeTransform>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<DrawingCollection>
<GeometryDrawing Brush="#FFD3D3D3">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,170,220"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingCollection>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.OpacityMask>
</Rectangle>
==Code==
--
_________________________
Kostas Pantos [MCP]
http://kostas.pantos.name


"Adam Smith [MS]" wrote:

> Viewport is a property on TileBrush (the base class for VisualBrush,
> ImageBrush and DrawingBrush), and defines the area into which the Viewbox
> (content) will be stretched. By default, the Viewport is 0,0,1,1 and
> ViewportUnits are RelativeToBoundingBox, so yes, by default this will be the
> same size and aspect ratio as the Rectangle you're filling, but you can
> explicitly set these properties if you wish to override that default
> behavior.
>
> In your example, your Rectangle's width is 170 and its Height is 220, and
> since your content extends from -10,-10 to 30,30 and your Viewbox is 0,0,1,1
> Relative (i.e. it stretches to encompass the entire source), the Viewbox's
> Width is 40 and the Viewbox's Height is also 40. So, your Viewport has an
> aspect ratio of 17:22 while your source has a ratio of 40:40 == 1:1, so you
> should see a ~30% vertical stretch/distortion applied post
> RelativeTransform, which is what appears to be happening in the image you
> link to.
>
> Please let me know if this helps - I'd really like to make sure we can make
> this work. I believe that what you *really* want is to not use the
> RelativeTransform (and instead use Transform), but I understand your point
> about EID only providing easy access to the RelativeTransform - I have
> passed on that feedback.
>
> -Adam Smith [MS]
>
> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com> wrote
> in message news:70D67DBD-3063-4A17-91B6-01499EE83EA4@microsoft.com...
> > Hi Adam,
> > I've tried to verify your response with a simple demo but didn't get
> > anywhere. As you can see from the following code I've created a rectangle
> > and
> > set its fill to a solid color brush, then I've used a drawing brush as an
> > opacity mask. I've made sure that the viewbox of the opacity brush had the
> > same aspect ratio as the rectangle by setting its
> > ViewboxUnits="RelativeToBoundingBox" and Viewbox="0,0,1,1" [note:
> > according
> > to the documentation viewbox property is "The position and dimensions of
> > the
> > brush's content. The default value is a Rect with a TopLeft of (0,0) and a
> > Width and Height of 1.]. Then tried to rotate it using a relative tranform
> > and the result was again scewed as you can see from the image
> > http://blog.pantos.name/images/18/o_winfxScew.jpg .
> > What am I doing wrong? I assume that by Viewport you mean the rectangle,
> > right? If that's the case, then in my examle, Rectangle.Width /
> > Viewbox.Width, rectangle.Height / Viewbox.Height results in a uniform
> > scale
> > (1,1). How come my brush is again scewed.
> > Thanks for any help, sorry for the lengthy post.
> >
> > ==Code==
> > <Rectangle Stroke="#FF000000" HorizontalAlignment="Left"
> > VerticalAlignment="Stretch" Margin="96,108,0,121" Width="170" Height="220"
> > x:Name="Rectangle" RenderTransformOrigin="0.5,0.5">
> > <Rectangle.Fill>
> > <SolidColorBrush Color="sc#1, 0.18603605, 0.211999342, 0.6086484"/>
> > </Rectangle.Fill>
> > <Rectangle.OpacityMask>
> > <DrawingBrush ViewboxUnits="RelativeToBoundingBox" Viewbox="0,0,1,1"
> > Stretch="None">
> > <DrawingBrush.RelativeTransform>
> > <TransformGroup>
> > <TranslateTransform X="0" Y="0"/>
> > <ScaleTransform ScaleX="1" ScaleY="1"/>
> > <SkewTransform AngleX="0" AngleY="0"/>
> > <RotateTransform Angle="45"/>
> > <TranslateTransform X="0" Y="0"/>
> > <TranslateTransform X="0" Y="0"/>
> > </TransformGroup>
> > </DrawingBrush.RelativeTransform>
> > <DrawingBrush.Drawing>
> > <DrawingGroup>
> > <DrawingGroup.Children>
> > <DrawingCollection>
> > <GeometryDrawing Brush="#FFD3D3D3">
> > <GeometryDrawing.Geometry>
> > <RectangleGeometry Rect="0,0,20,20"/>
> > </GeometryDrawing.Geometry>
> > </GeometryDrawing>
> > <GeometryDrawing Brush="#FF000000">
> > <GeometryDrawing.Geometry>
> > <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,0"/>
> > </GeometryDrawing.Geometry>
> > </GeometryDrawing>
> > <GeometryDrawing Brush="#FF000000">
> > <GeometryDrawing.Geometry>
> > <EllipseGeometry RadiusX="10" RadiusY="10" Center="20,20"/>
> > </GeometryDrawing.Geometry>
> > </GeometryDrawing>
> > <GeometryDrawing Brush="#FFFFFFFF">
> > <GeometryDrawing.Geometry>
> > <EllipseGeometry RadiusX="10" RadiusY="10" Center="20,0"/>
> > </GeometryDrawing.Geometry>
> > </GeometryDrawing>
> > <GeometryDrawing Brush="#FFFFFFFF">
> > <GeometryDrawing.Geometry>
> > <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,20"/>
> > </GeometryDrawing.Geometry>
> > </GeometryDrawing>
> > </DrawingCollection>
> > </DrawingGroup.Children>
> > </DrawingGroup>
> > </DrawingBrush.Drawing>
> > </DrawingBrush>
> > </Rectangle.OpacityMask>
> > </Rectangle>
> > ==Code==
> > --
> > _________________________
> > Kostas Pantos [MCP]
> > http://kostas.pantos.name
> >
> >
> > "Adam Smith [MS]" wrote:
> >
> >> I believe that's correct - basically what's happening is that your
> >> rotation
> >> is applied, and the result is then scaled by Viewport.Width /
> >> Viewbox.Width,
> >> Viewport.Height / Viewbox.Height. If that results in a non-uniform
> >> scale,
> >> you'll see what looks like a skew applied to your rotated object.
> >>
> >> I'll forward this feedback to EID.
> >>
> >> -Adam Smith [MS]
> >>
> >>
> >> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com>
> >> wrote
> >> in message news:AE917E57-632D-40D6-9F48-9FAEABFF8C57@microsoft.com...
> >> > I've already seen that with the Brush.Transform property there's no
> >> > skew.
> >> > The
> >> > Brush.Relative transform though is the default tranformation property
> >> > that
> >> > Microsoft Expression Interactive Designer uses and the only one that
> >> > can
> >> > be
> >> > manupulated by the designer (The Brush.Transform property can only be
> >> > manipulated from the XAML code).
> >> > If my viewbox has the same aspect ratio as the rectangle will a skew be
> >> > aplied?
> >> > Thanks Adam for the reply.
> >> > --
> >> > _________________________
> >> > Kostas Pantos [MCP]
> >> > http://kostas.pantos.name
> >> >
> >> >
> >> > "Adam Smith [MS]" wrote:
> >> >
> >> >> This occurs because you're rotating using Brush.RelativeTransform.
> >> >> This
> >> >> transform applies before the stretch/shrink/offset transform is
> >> >> applied
> >> >> to
> >> >> map the viewbox to the viewport. As a result, the vertical stretch
> >> >> which
> >> >> applies in your example (to stretch a viewbox with an aspect ratio of
> >> >> 1:1
> >> >> to
> >> >> a Rectangle with aspect ratio 12:19) applies *after* the rotation. If
> >> >> you
> >> >> were to apply the same transform to the Brush.Transform property, you
> >> >> would
> >> >> see no skew.
> >> >>
> >> >> -Adam Smith [MS]
> >> >>
> >> >> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com>
> >> >> wrote
> >> >> in message news:67CA4CCA-7EDF-4EC9-A2B5-2A60519A22CC@microsoft.com...
> >> >> > I've drawn a Rectangle and filled it with a DrawingBrush, then tried
> >> >> > to
> >> >> > transform the brush and rotate it by 45 degrees [see the source code
> >> >> > http://blog.pantos.name/images/18/o_Code.JPG]. The resulting
> >> >> > transformation
> >> >> > as you can see in the image
> >> >> > [http://blog.pantos.name/images/18/o_...ormations.JPG] is
> >> >> > also
> >> >> > skewed. The same applies for all brushes as well as the opacity mask
> >> >> > ones.
> >> >> > Does anyone have any idea why this is happening?
> >> >> >
> >> >> > --
> >> >> > _________________________
> >> >> > Kostas Pantos [MCP]
> >> >> > http://kostas.pantos.name
> >> >>
> >> >>
> >> >>
> >>
> >>
> >>
>
>
>

Hmm... you know, I should have caught this sooner, but you have
Stretch="None"... which means that my logic about Viewbox->Viewport aspect
ratio doesn't come in to play.

For everyone else reading along, that stuff still applies when
Stretch="Fill" (the default), but that shouldn't matter here.

I'll take a closer look at precisely how RelativeTransform is picking up the
aspect ratio distortion. Thanks for keeping with this issue - I want to get
to the bottom of it.

-Adam Smith [MS]

"Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com> wrote
in message news:2661FC32-9DAA-498A-B2B8-862E680CA90E@microsoft.com...
> Hi Adam,
> Thanks for your interest and quick response, I too do hope we can make
> this
> work.
>
> I guess that you've calculated this ("your content extends from -10,-10 to
> 30,30") coordinates by manually addind the Geometry objects' dimensions,
> right? In that respect you're right the content width and height were 40.
> So I've changed my example a bit, I've deleted all GeometryObjects from
> the
> DrawingBrush (used as an OpacityMask) except from a Rectangle. I've then
> set
> the width and height properties of this RectangleGeometry object to be
> equal
> to my Rectangle. Thus according to your previous calculations the
> Viewbox's
> aspect ratio should be equal to the Viewport's one.
>
> Again though the rotation of the opacityMask brush resulted in a skew.
> http://blog.pantos.name/images/18/o_opacityscew.jpg
>
> ==Code==
> <Rectangle Stroke="#FF000000" Width="170" Height="220" x:Name="Rectangle"
> RenderTransformOrigin="0.5,0.5">
> <Rectangle.Fill>
> <SolidColorBrush Color="sc#1, 0.18603605, 0.211999342, 0.6086484"/>
> </Rectangle.Fill>
> <Rectangle.OpacityMask>
> <DrawingBrush ViewboxUnits="RelativeToBoundingBox" Viewbox="0,0,1,1"
> Stretch="None">
> <DrawingBrush.RelativeTransform>
> <TransformGroup>
> <TranslateTransform X="0" Y="0"/>
> <ScaleTransform ScaleX="1" ScaleY="1"/>
> <SkewTransform AngleX="0" AngleY="0"/>
> <RotateTransform Angle="45"/>
> <TranslateTransform X="0" Y="0"/>
> <TranslateTransform X="0" Y="0"/>
> </TransformGroup>
> </DrawingBrush.RelativeTransform>
> <DrawingBrush.Drawing>
> <DrawingGroup>
> <DrawingGroup.Children>
> <DrawingCollection>
> <GeometryDrawing Brush="#FFD3D3D3">
> <GeometryDrawing.Geometry>
> <RectangleGeometry Rect="0,0,170,220"/>
> </GeometryDrawing.Geometry>
> </GeometryDrawing>
> </DrawingCollection>
> </DrawingGroup.Children>
> </DrawingGroup>
> </DrawingBrush.Drawing>
> </DrawingBrush>
> </Rectangle.OpacityMask>
> </Rectangle>
> ==Code==
> --
> _________________________
> Kostas Pantos [MCP]
> http://kostas.pantos.name
>
>
> "Adam Smith [MS]" wrote:
>
>> Viewport is a property on TileBrush (the base class for VisualBrush,
>> ImageBrush and DrawingBrush), and defines the area into which the Viewbox
>> (content) will be stretched. By default, the Viewport is 0,0,1,1 and
>> ViewportUnits are RelativeToBoundingBox, so yes, by default this will be
>> the
>> same size and aspect ratio as the Rectangle you're filling, but you can
>> explicitly set these properties if you wish to override that default
>> behavior.
>>
>> In your example, your Rectangle's width is 170 and its Height is 220, and
>> since your content extends from -10,-10 to 30,30 and your Viewbox is
>> 0,0,1,1
>> Relative (i.e. it stretches to encompass the entire source), the
>> Viewbox's
>> Width is 40 and the Viewbox's Height is also 40. So, your Viewport has
>> an
>> aspect ratio of 17:22 while your source has a ratio of 40:40 == 1:1, so
>> you
>> should see a ~30% vertical stretch/distortion applied post
>> RelativeTransform, which is what appears to be happening in the image you
>> link to.
>>
>> Please let me know if this helps - I'd really like to make sure we can
>> make
>> this work. I believe that what you *really* want is to not use the
>> RelativeTransform (and instead use Transform), but I understand your
>> point
>> about EID only providing easy access to the RelativeTransform - I have
>> passed on that feedback.
>>
>> -Adam Smith [MS]
>>
>> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com>
>> wrote
>> in message news:70D67DBD-3063-4A17-91B6-01499EE83EA4@microsoft.com...
>> > Hi Adam,
>> > I've tried to verify your response with a simple demo but didn't get
>> > anywhere. As you can see from the following code I've created a
>> > rectangle
>> > and
>> > set its fill to a solid color brush, then I've used a drawing brush as
>> > an
>> > opacity mask. I've made sure that the viewbox of the opacity brush had
>> > the
>> > same aspect ratio as the rectangle by setting its
>> > ViewboxUnits="RelativeToBoundingBox" and Viewbox="0,0,1,1" [note:
>> > according
>> > to the documentation viewbox property is "The position and dimensions
>> > of
>> > the
>> > brush's content. The default value is a Rect with a TopLeft of (0,0)
>> > and a
>> > Width and Height of 1.]. Then tried to rotate it using a relative
>> > tranform
>> > and the result was again scewed as you can see from the image
>> > http://blog.pantos.name/images/18/o_winfxScew.jpg .
>> > What am I doing wrong? I assume that by Viewport you mean the
>> > rectangle,
>> > right? If that's the case, then in my examle, Rectangle.Width /
>> > Viewbox.Width, rectangle.Height / Viewbox.Height results in a uniform
>> > scale
>> > (1,1). How come my brush is again scewed.
>> > Thanks for any help, sorry for the lengthy post.
>> >
>> > ==Code==
>> > <Rectangle Stroke="#FF000000" HorizontalAlignment="Left"
>> > VerticalAlignment="Stretch" Margin="96,108,0,121" Width="170"
>> > Height="220"
>> > x:Name="Rectangle" RenderTransformOrigin="0.5,0.5">
>> > <Rectangle.Fill>
>> > <SolidColorBrush Color="sc#1, 0.18603605, 0.211999342, 0.6086484"/>
>> > </Rectangle.Fill>
>> > <Rectangle.OpacityMask>
>> > <DrawingBrush ViewboxUnits="RelativeToBoundingBox" Viewbox="0,0,1,1"
>> > Stretch="None">
>> > <DrawingBrush.RelativeTransform>
>> > <TransformGroup>
>> > <TranslateTransform X="0" Y="0"/>
>> > <ScaleTransform ScaleX="1" ScaleY="1"/>
>> > <SkewTransform AngleX="0" AngleY="0"/>
>> > <RotateTransform Angle="45"/>
>> > <TranslateTransform X="0" Y="0"/>
>> > <TranslateTransform X="0" Y="0"/>
>> > </TransformGroup>
>> > </DrawingBrush.RelativeTransform>
>> > <DrawingBrush.Drawing>
>> > <DrawingGroup>
>> > <DrawingGroup.Children>
>> > <DrawingCollection>
>> > <GeometryDrawing Brush="#FFD3D3D3">
>> > <GeometryDrawing.Geometry>
>> > <RectangleGeometry Rect="0,0,20,20"/>
>> > </GeometryDrawing.Geometry>
>> > </GeometryDrawing>
>> > <GeometryDrawing Brush="#FF000000">
>> > <GeometryDrawing.Geometry>
>> > <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,0"/>
>> > </GeometryDrawing.Geometry>
>> > </GeometryDrawing>
>> > <GeometryDrawing Brush="#FF000000">
>> > <GeometryDrawing.Geometry>
>> > <EllipseGeometry RadiusX="10" RadiusY="10" Center="20,20"/>
>> > </GeometryDrawing.Geometry>
>> > </GeometryDrawing>
>> > <GeometryDrawing Brush="#FFFFFFFF">
>> > <GeometryDrawing.Geometry>
>> > <EllipseGeometry RadiusX="10" RadiusY="10" Center="20,0"/>
>> > </GeometryDrawing.Geometry>
>> > </GeometryDrawing>
>> > <GeometryDrawing Brush="#FFFFFFFF">
>> > <GeometryDrawing.Geometry>
>> > <EllipseGeometry RadiusX="10" RadiusY="10" Center="0,20"/>
>> > </GeometryDrawing.Geometry>
>> > </GeometryDrawing>
>> > </DrawingCollection>
>> > </DrawingGroup.Children>
>> > </DrawingGroup>
>> > </DrawingBrush.Drawing>
>> > </DrawingBrush>
>> > </Rectangle.OpacityMask>
>> > </Rectangle>
>> > ==Code==
>> > --
>> > _________________________
>> > Kostas Pantos [MCP]
>> > http://kostas.pantos.name
>> >
>> >
>> > "Adam Smith [MS]" wrote:
>> >
>> >> I believe that's correct - basically what's happening is that your
>> >> rotation
>> >> is applied, and the result is then scaled by Viewport.Width /
>> >> Viewbox.Width,
>> >> Viewport.Height / Viewbox.Height. If that results in a non-uniform
>> >> scale,
>> >> you'll see what looks like a skew applied to your rotated object.
>> >>
>> >> I'll forward this feedback to EID.
>> >>
>> >> -Adam Smith [MS]
>> >>
>> >>
>> >> "Konstantinos Pantos" <KonstantinosPantos@discussions.microsoft.com>
>> >> wrote
>> >> in message news:AE917E57-632D-40D6-9F48-9FAEABFF8C57@microsoft.com...
>> >> > I've already seen that with the Brush.Transform property there's no
>> >> > skew.
>> >> > The
>> >> > Brush.Relative transform though is the default tranformation
>> >> > property
>> >> > that
>> >> > Microsoft Expression Interactive Designer uses and the only one that
>> >> > can
>> >> > be
>> >> > manupulated by the designer (The Brush.Transform property can only
>> >> > be
>> >> > manipulated from the XAML code).
>> >> > If my viewbox has the same aspect ratio as the rectangle will a skew
>> >> > be
>> >> > aplied?
>> >> > Thanks Adam for the reply.
>> >> > --
>> >> > _________________________
>> >> > Kostas Pantos [MCP]
>> >> > http://kostas.pantos.name
>> >> >
>> >> >
>> >> > "Adam Smith [MS]" wrote:
>> >> >
>> >> >> This occurs because you're rotating using Brush.RelativeTransform.
>> >> >> This
>> >> >> transform applies before the stretch/shrink/offset transform is
>> >> >> applied
>> >> >> to
>> >> >> map the viewbox to the viewport. As a result, the vertical stretch
>> >> >> which
>> >> >> applies in your example (to stretch a viewbox with an aspect ratio
>> >> >> of
>> >> >> 1:1
>> >> >> to
>> >> >> a Rectangle with aspect ratio 12:19) applies *after* the rotation.
>> >> >> If
>> >> >> you
>> >> >> were to apply the same transform to the Brush.Transform property,
>> >> >> you
>> >> >> would
>> >> >> see no skew.
>> >> >>
>> >> >> -Adam Smith [MS]
>> >> >>
>> >> >> "Konstantinos Pantos"
>> >> >> <KonstantinosPantos@discussions.microsoft.com>
>> >> >> wrote
>> >> >> in message
>> >> >> news:67CA4CCA-7EDF-4EC9-A2B5-2A60519A22CC@microsoft.com...
>> >> >> > I've drawn a Rectangle and filled it with a DrawingBrush, then
>> >> >> > tried
>> >> >> > to
>> >> >> > transform the brush and rotate it by 45 degrees [see the source
>> >> >> > code
>> >> >> > http://blog.pantos.name/images/18/o_Code.JPG]. The resulting
>> >> >> > transformation
>> >> >> > as you can see in the image
>> >> >> > [http://blog.pantos.name/images/18/o_...ormations.JPG] is
>> >> >> > also
>> >> >> > skewed. The same applies for all brushes as well as the opacity
>> >> >> > mask
>> >> >> > ones.
>> >> >> > Does anyone have any idea why this is happening?
>> >> >> >
>> >> >> > --
>> >> >> > _________________________
>> >> >> > Kostas Pantos [MCP]
>> >> >> > http://kostas.pantos.name
>> >> >>
>> >> >>
>> >> >>
>> >>
>> >>
>> >>
>>
>>
>>