Question

I have a small polygon written on the large canvas. I want to highlight a polygon when mouse is moving over the canvas. The code is like this:

<UserControl ...>
  <Canvas Name="canvas" Height="22" Width="22">
      <Canvas.Resources>
          <Style TargetType="Canvas">
              <Style.Triggers>
                  <Trigger Property="IsMouseOver" Value="false">
                      <Setter Property="polygon.Stroke" Value="#EEEEEE"/>
                  </Trigger>
                  <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="polygon.Stroke" Value="Aqua"/>
                </Trigger>
              </Style.Triggers>
          </Style>
      </Canvas.Resources>
      <Polygon Points="11,1 16,6 16,16 11,21" Name="polygon">
              <Polygon.Fill>
                  <SolidColorBrush Color="#EEEEEE"/>
              </Polygon.Fill>
      </Polygon>
  </Canvas>
</UserControl>

However setter does not see the “polygon”.

Answer 1

You cannot use Setters like that, if you use this kind of notation the engine will look for an attached property, or if no Style.TargetType was set for a property on the type before the dot.

The easiest thing to do is probably applying a style to the polygon itself and using a DataTrigger which binds to the Canvas so you can trigger on its properties.

  <Polygon Points="11,1 16,6 16,16 11,21" Name="polygon">
       <Polygon.Fill>
           <SolidColorBrush Color="#EEEEEE"/>
       </Polygon.Fill>
       <Polygon.Style>
          <Style TargetType="{x:Type Polygon}">
             <Style.Triggers> 
                <DataTrigger
                   Binding="{Binding Path=IsMouseOver,
                                     RelativeSource={RelativeSource
                                     AncestorType={x:Type Canvas}}}"
                   Value="True">
                   <Setter Property="Stroke" Value="Red"/>
                </DataTrigger>
             </Style.Triggers>
          </Style>
       <Polygon.Style>
  </Polygon>