WPF 鼠标悬停 canvas

Question

我无法在任何地方找到关于 SO 的答案 - 我如何为每个 "item"

制作悬停效果

我希望当我将鼠标悬停在 canvas（数据模板，位于网格内）上时更改 canvas 内的两个矩形的颜色 - 只有 IsMouseOver 工作的地方是我设置 ContentPresenter 的地方，在那里我可以改变网格的大小，仅此而已。我无法在 canvas 上获取 IsMouseOver 来更改内部矩形的颜色。无论如何，我只是初学者，所以，我知道出了点问题，ContentPresenter 可能是采用样式触发的那个，我只是不知道如何解决这个问题。

    <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

您实际上已经正确地完成了，问题是您在矩形声明中明确设置了 Fill：

<Rectangle ... Fill="#5D606D" ...></Rectangle>
<Rectangle ... Fill="#5D606D" ...></Rectangle>

这些字段优先于您在样式中设置的内容，删除它们并且您的代码可以正常工作。

WPF 鼠标悬停 canvas

WPF mouse hover canvas

wpf

xaml

hover