使用 ismouseover 更改对象组的背景颜色

Question

我真的是 WPF+C# 的新手，并试图在 msdn 和 stack 上赶上很多教程。我目前正在尝试更改 ismouseover 上所有对象（同时）的颜色（绘制房子）。我可以一次用一个对象（下面的代码中的触发器）执行此操作，但无法找出同时更改所有颜色的方法，这是我的 xaml 代码，我没有在 xaml.cs 中添加任何内容我猜我需要创建一些 for 循环，但我不明白如何将 xaml 中绘制的对象链接到 xaml.cs 中的代码

<Window x:Class="LAB2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="400" Width="600">
<Canvas>

    <Rectangle Canvas.Left="86" Canvas.Top="190" Height="171" Name="body" Stroke="Black" Width="387"/>
    <Rectangle Canvas.Left="118" Canvas.Top="229" Height="82"  Name="window" Stroke="Black" Width="89"/>
    <Rectangle Canvas.Left="346" Canvas.Top="229" Height="132"  Name="door" Stroke="Black" Width="83"/>
    <Polygon Points="10,110 230,10 500,110" Fill="Blue" Stroke="Black" Name="triangle" Canvas.Left="35" Canvas.Top="86" />
    <Rectangle Canvas.Left="156" Canvas.Top="109" Height="61" Name="chimney" Stroke="Black" Width="36">
        <Rectangle.Style>
            <Style TargetType="{x:Type Rectangle}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Fill" Value="Red" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Fill" Value="Blue" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
</Canvas>
<Window.Resources>

</Window.Resources>

Answer 1

您需要将触发器移得更高...因为您只能在 ControlTemplate 或 Style 中使用触发器，所以我的解决方案有点棘手。

    <Control>
        <Control.Template>
            <ControlTemplate>
                <Canvas>
                    <Rectangle Canvas.Left="86" Canvas.Top="190" Height="171" Fill="Blue" Name="body" Stroke="Black" Width="387"/>
                    <Rectangle Canvas.Left="118" Canvas.Top="229" Height="82" Fill="Blue"  Name="window" Stroke="Black" Width="89"/>
                    <Rectangle Canvas.Left="346" Canvas.Top="229" Fill="Blue" Height="132"  Name="door" Stroke="Black" Width="83"/>
                    <Polygon Points="10,110 230,10 500,110" Fill="Blue" Stroke="Black" Name="triangle" Canvas.Left="35" Canvas.Top="86" />
                    <Rectangle Canvas.Left="156" Canvas.Top="109" Height="61" Fill="Blue" Name="chimney" Stroke="Black" Width="36">
                    </Rectangle>
                </Canvas>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="body" Property="Fill" Value="Red" />
                        <Setter TargetName="window" Property="Fill" Value="Red" />
                        <Setter TargetName="door" Property="Fill" Value="Red" />
                        <Setter TargetName="triangle" Property="Fill" Value="Red" />
                    </Trigger>
                    <!--<Trigger Property="IsMouseOver" Value="False">
                        <Setter TargetName="body" Property="Fill" Value="Green" />
                        <Setter TargetName="window" Property="Fill" Value="Green" />
                        <Setter TargetName="door" Property="Fill" Value="Green" />
                        <Setter TargetName="triangle" Property="Fill" Value="Green" />
                    </Trigger>-->
                </ControlTemplate.Triggers>     
            </ControlTemplate>
        </Control.Template>
    </Control>

当您不在 Canvas 中设置 Background 属性时，您会获得更好的行为，因为 Canvas 将忽略 IsMouseOver 并且 Trigger 仅在您将光标移动到 Canvas 中的一个对象上时才会起作用

Answer 2

您可以删除样式触发器，并将方法附加到 .xaml.cs 文件中的 MouseEnter 和 MouseLeave 事件：

    private void body_MouseEnter(object sender, MouseEventArgs e)
    {
        foreach(var c in canvas.Children)
        {
            if(c is Shape) (c as Shape).Fill = Brushes.Red;
        }
    }

    private void body_MouseLeave(object sender, MouseEventArgs e)
    {
        foreach (var c in canvas.Children)
        {
            if (c is Shape) (c as Shape).Fill = Brushes.Blue;
        }
    }

这似乎是蛮力方法，但它确实有效。

Answer 3

此外，您可以为 Shape 定义基本样式，然后为 Polygon 和 rectangle 派生它。

 <Window.Resources>
    <Style x:Key="ShapeMouseOverStyle" TargetType="{x:Type Shape}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill" Value="Red" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Fill" Value="Blue" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="{x:Type Rectangle}" BasedOn="{StaticResource ShapeMouseOverStyle}"/>
    <Style TargetType="{x:Type Polygon}" BasedOn="{StaticResource ShapeMouseOverStyle}"/>
</Window.Resources>

<Grid>
    <Canvas>
        <Rectangle Canvas.Left="86" Canvas.Top="190" Height="171" Name="body" Stroke="Black" Width="387"/>
        <Rectangle Canvas.Left="118" Canvas.Top="229" Height="82"  Name="window" Stroke="Black" Width="89"/>
        <Rectangle Canvas.Left="346" Canvas.Top="229" Height="132"  Name="door" Stroke="Black" Width="83"/>
        <Polygon Points="10,110 230,10 500,110" Fill="Blue" Stroke="Black" Name="triangle" Canvas.Left="35" Canvas.Top="86" />
        <Rectangle Canvas.Left="156" Canvas.Top="109" Height="61" Name="chimney" Stroke="Black" Width="36"/>
    </Canvas>

</Grid>

干杯...