Граница многоугольника не соответствует визуалу на холсте с преобразованием ScaleTransform

Question

Следующий XAML - это просто многоугольник на холсте с масштабом x2000. Существует триггер, который изменяет цвет заливки для многоугольника, когда мышь находится над ним.

Почему окно меняет цвет, когда вы наводите указатель мыши над и слева от многоугольника.

<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>

Если я заменим полигон на TextBlock, этого не произойдет. Как я могу избежать этого?

Answer 1

Это выглядит для меня как ошибка в тестовом коде Microsoft для Polygon. Тем не менее, я смог остановить его, нарисовав многоугольник в начале координат, а затем переведя его с помощью Canvas.Top и Canvas.Bottom. Надеюсь, что это решит вашу проблему.

<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

Это из-за расположения элемента Shape (из которого получен объект Polygon). Ваша форма начинается с 0,0 (а не с .1, .1, как нарисовано), таким образом, тест попадания работает слева. Чтобы установить положение фигуры на Canvas, вы должны использовать вложенные свойства Canvas.Left / Top, чтобы ваш код выглядел следующим образом и поведение

**<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>**