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

时间:2012-11-21 20:43:03

标签: c# wpf xaml

我是WPF + C#的新手,并试图赶上msdn和堆栈的大量教程。我目前正在尝试在 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>

3 个答案:

答案 0 :(得分:2)

您需要将触发器移动得更高......并且因为您只能在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,只有当你将光标移动到Canvas中的一个对象上时,Trigger才会起作用

答案 1 :(得分:1)

您可以删除样式触发器,并将方法附加到.xaml.cs文件中的MouseEnterMouseLeave事件:

    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;
        }
    }

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

答案 2 :(得分:0)

此外,您可以为Shape定义基本样式,然后为多边形和矩形派生它。

 <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>

干杯...