WPF mouse hover canvas - wpf

Question

i could not find answers on SO anywhere - how do i make hover effect for each "item"
i want that when i hover over canvas (data template, positioned inside grid) to change color on both rectangles that are inside canvas - only place where IsMouseOver works is where i set ContentPresenter, and there i can change size of Grid, and thats all. I cannot get IsMouseOver on canvas to change color of rectangles inside. Anyhow, i am just begginer, so, i know something is wrong, ContentPresenter maybe is the one that takes style trigger, i just do not know how to fix this.
<Border Background="#1C222E">
<Viewbox Grid.Column="0" Grid.Row="0" Name="SeatsBox">
<Viewbox.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
</Viewbox.RenderTransform>
<ItemsControl ItemsSource="{Binding Seats}" Name="SeatsItems">
<ItemsControl.RenderTransform>
<TranslateTransform X="0" Y="0" />
</ItemsControl.RenderTransform>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid local:GridHelpers.RowCount="{Binding RowCount}" HorizontalAlignment="Center" VerticalAlignment="Center" local:GridHelpers.ColumnCount="{Binding ColumnCount}" ShowGridLines="False" Background="#1C222E" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Grid.Row" Value="{Binding RowEx}" />
<Setter Property="Grid.Column" Value="{Binding ColumnEx}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="60"/>
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="200" />
<Setter Property="Fill" Value="Blue" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Canvas}, Path=IsMouseOver}" Value="True">
<Setter Property="Fill" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas Width="30" Height="30" Margin="4" Background="Transparent" Tag="{Binding ID}">
<Rectangle Name="RecTop" Canvas.Top="4" Canvas.Left="1" Width="28" Height="18" Fill="#5D606D" Stroke="#5D606D" RadiusX="2" RadiusY="2"></Rectangle>
<Rectangle Name="RecBot" Canvas.Top="23" Canvas.Left="1" Width="28" Height="7" Fill="#5D606D" Stroke="#5D606D" RadiusX="2" RadiusY="2"></Rectangle>
<!-- <TextBlock Text="{Binding Path=Column}" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Center" /> -->
</Canvas>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Status}" Value="Taken">
<Setter TargetName="RecTop" Property="Stroke" Value="#2E3441" />
<Setter TargetName="RecTop" Property="Fill" Value="#2E3441" />
<Setter TargetName="RecBot" Property="Stroke" Value="#2E3441" />
<Setter TargetName="RecBot" Property="Fill" Value="#2E3441" />
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="Reserved">
<Setter TargetName="RecTop" Property="Stroke" Value="#5D606D" />
<Setter TargetName="RecBot" Property="Stroke" Value="#5D606D" />
<Setter TargetName="RecTop" Property="Fill" Value="Transparent" />
<Setter TargetName="RecBot" Property="Fill" Value="Transparent" />
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="Broken">
<Setter TargetName="RecTop" Property="Stroke" Value="#1885FF" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Viewbox>
</Border>

Answer 1

You've actually already done it properly, the problem is that you're setting Fill explicitly in the Rectangle declarations:
<Rectangle ... Fill="#5D606D" ...></Rectangle>
<Rectangle ... Fill="#5D606D" ...></Rectangle>
Those fields have precedence over what you've set in your style, remove them and your code works fine.