Polygon Boundary not matching visual on a Canvas with a ScaleTransform

Question

The following XAML is simply a Polygon on a Canvas that is scaled x2000. There is a trigger that changes the Fill color for the Polygon when the mouse is over it.

Why does the box change color when you hover your mouse above and to the left of the Polygon.

<Canvas Background="Black" Height="600" Width="600">
    <Canvas.RenderTransform>
        <ScaleTransform ScaleX="2000" ScaleY="2000" />
    </Canvas.RenderTransform>
    <Polygon>
        <Polygon.Resources>
            <Style TargetType="Polygon">
                <Setter Property="Fill" Value="HotPink"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Fill" Value="LimeGreen"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Polygon.Resources>
        <Polygon.Points>
            <PointCollection>
                <Point X="0.1" Y="0.1" />
                <Point X="0.2" Y="0.1" />
                <Point X="0.2" Y="0.2" />
                <Point X="0.1" Y="0.2" />
            </PointCollection>
        </Polygon.Points>
    </Polygon>
</Canvas>

If I replace the Polygon with a TextBlock, this doesn't happen. How can I avoid this from happening?

Answer 1

This looks to me like a bug in Microsoft's hit-test code for Polygon. However, I was able to get it to stop by drawing the polygon at the origin and then translating it using Canvas.Top and Canvas.Bottom. Hope this solves your problem.

<Canvas Background="Black" Height="600" Width="600">
    <Canvas.RenderTransform>
        <ScaleTransform ScaleX="2000" ScaleY="2000" />
    </Canvas.RenderTransform>
    <Polygon Canvas.Top="0.1" Canvas.Left="0.1">
        <Polygon.Resources>
            <Style TargetType="Polygon">
                <Setter Property="Fill" Value="HotPink"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Fill" Value="LimeGreen"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Polygon.Resources>
        <Polygon.Points>
            <PointCollection>
                <Point X="0.0" Y="0.0" />
                <Point X="0.1" Y="0.0" />
                <Point X="0.1" Y="0.1" />
                <Point X="0.0" Y="0.1" />
            </PointCollection>
        </Polygon.Points>
    </Polygon>
</Canvas>

Answer 2

It's because of Shape element (which Polygon object derrived from) layout. Your shape starts from 0,0 (not from .1,.1 as drawn) thus hit test works on left. To set shape position on Canvas you should use Canvas.Left/Top attached properties, so your code will looks like this and behaviours right

**<Polygon Canvas.Top=".1" Canvas.Left=".1">
<Polygon.Points> 
 <Point X="0" Y="0" /> 
 <Point X=".1" Y="0" />  
 <Point X=".1" Y=".1" /> 
 <Point X="0" Y=".1" />
</Polygon.Points>**