Use style trigger to set property of a nested object

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>

Answer 2

Try EventTrigger, because other kinds of triggers you could only use in templates or styles. And we already know that Style.Trigger doesn't allow your scenario. So here is working example for you:

<Canvas Name="canvas" Height="22" Width="22">
    <Polygon Points="11,1 16,6 16,16 11,21" Name="polygon">
        <Polygon.Fill>
            <SolidColorBrush x:Name="brush" Color="#EEEEEE"/>
        </Polygon.Fill>
        <Polygon.Triggers>
            <EventTrigger RoutedEvent="UIElement.MouseEnter">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetName="brush" Storyboard.TargetProperty="Color">
                        <ColorAnimation From="#EEEEEE" To="Aqua" Duration="00:00:00.01" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="UIElement.MouseLeave">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetName="brush" Storyboard.TargetProperty="Color">
                        <ColorAnimation From="Aqua" To="#EEEEEE" Duration="00:00:00.01" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Polygon.Triggers>
    </Polygon>
</Canvas>