Question

我有一个非常简单的操作 - 每当用户将鼠标悬停在矩形上时，它应该改变其他矩形的颜色。现在就是这样做的：

<Rectangle Panel.ZIndex="3" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top" MouseEnter="Rectangle_MouseEnter" MouseLeave="Rectangle_MouseLeave">
    <Rectangle.Fill>
        <ImageBrush ImageSource="/Images/close.ico"/>
    </Rectangle.Fill>
</Rectangle>

<Rectangle Panel.ZIndex="2" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top" Name="ExitSquare">
    <Rectangle.Fill>
        <SolidColorBrush Color="#f9b129"/>
    </Rectangle.Fill>
</Rectangle>

private void Rectangle_MouseEnter(object sender, MouseEventArgs e)
{
    ExitSquare.Fill = new SolidColorBrush(Color.FromRgb(251, 200, 106));
}

private void Rectangle_MouseLeave(object sender, MouseEventArgs e)
{
    ExitSquare.Fill = new SolidColorBrush(Color.FromRgb(249, 177, 41));
}

我想知道 - 如果我的目标是使用MVVM模式，可能有更好的选择吗？尝试绑定MouseEnter和MouseLeave事件并使它们在我的ViewModel的私有成员上操作是不是一个好主意，该成员将绑定到矩形的颜色，或者只会使事情变得不必要地复杂化？

Answer 1

为了使其成为MVVM，您可以使用ViewModel将这两个MouseEvent绑定到EventToCommand，这是Blend SDK的一部分，通过此命名空间：

http://schemas.microsoft.com/expression/2010/interactivity

这里有一个NuGet包：https://www.nuget.org/packages/Expression.Blend.Sdk/

如何使用它的示例：

<Rectangle Panel.ZIndex="3" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top">
    <Rectangle.Fill>
        <ImageBrush ImageSource="/Images/close.ico"/>
    </Rectangle.Fill>
     <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <i:InvokeCommandAction Command="{Binding MouseEnterCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeave">
            <i:InvokeCommandAction Command="{Binding MouseLeaveCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Rectangle>

真正的问题是，为什么你想要 MVVM ？这是你要进行单元测试的吗？ IMO，因为这只需要处理美学，所以在代码隐藏中这样做是完全可以的，因为它不处理任何数据，计算，状态等。

Answer 2

您既不需要视图模型也不需要代码中的任何事件处理程序。

在另一个Rectangle的IsMouseOver属性上使用DataTrigger的样式就足够了：

a -> m a

Answer 3

此样式设置为可用于您的应用程序。

<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                <ContentPresenter />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Trigger.Setters>
                                        <Setter Property="Background" Value="Black" />
                                    </Trigger.Setters>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="False">
                                    <Trigger.Setters>
                                        <Setter Property="Background">
                                            <Setter.Value>
                                                <ImageBrush ImageSource="/Images/close.ico"/>
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger.Setters>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </Button.Style>
</Button>

WPF

3 个答案: