La limite du polygone ne correspond pas au visuel sur un canevas avec une transformation d'échelle (ScaleTransform)

Question

Le XAML suivant est simplement un polygone sur un canevas qui est mis à l'échelle x2000. Il existe un déclencheur qui modifie la couleur de remplissage du polygone lorsque la souris passe dessus.

Pourquoi la boîte change-t-elle de couleur lorsque vous passez votre souris au-dessus et à gauche du polygone ?

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

Si je remplace le polygone par un bloc de texte, cela ne se produit pas. Comment puis-je éviter que cela ne se produise ?

Answer 1

Cela me semble être un bug dans le code de test de Microsoft pour le Polygone. Cependant, j'ai réussi à le faire cesser en dessinant le polygone à l'origine, puis en le translatant à l'aide de Canvas.Top et Canvas.Bottom. J'espère que cela résoudra votre problème.

<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

C'est à cause de la disposition de l'élément Shape (dont dérive l'objet Polygon). Votre forme commence à 0,0 (et non pas à .1, .1 comme dessiné) donc le test d'impact fonctionne à gauche. Pour définir la position de la forme sur le Canvas, vous devez utiliser les propriétés attachées Canvas.Left/Top, ainsi votre code ressemblera à ceci et se comportera correctement

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