MVVM 单个对象上的鼠标悬停事件

Question

我想知道处理我遇到的问题的最佳方法。 我正处于开发 WPF 应用程序的早期阶段，该应用程序包含多个图像 个别班级。我正在尝试使用 MVVM 模型，但我希望实现一个鼠标悬停事件，这样当我滚动图像时，我希望显示一些信息或对图像做一些效果，我不太确定如何解决这个问题，但是我有一个下面的类的例子。

public class TeamKit
{
    private Image mainImage;
    public Canvas Position { get; set; }
    public TextBlock PlayerText { get; set; }
    public TextBlock NameText{ get; set; }
    public Player Player { get; set; }
    private string _playerName = "Player0";
    private string _playerNumber = "0";
    private BitmapImage _bImage;

    public TeamKit(Thickness t)
    {
        mainImage = new Image();
        _bImage = new BitmapImage(new Uri("pack://Application:,,,/Resources/KitC.png"));
        mainImage.Source = _bImage;
        mainImage.Stretch = System.Windows.Media.Stretch.None;
        Position = new Canvas();
        Position.Width = 38;
        Position.Height = 45;
        Position.Margin = t;
        mainImage.Margin = new Thickness(0, 0, 0, 6);

        PlayerText = new TextBlock();
        PlayerText.Text = ""; PlayerText.TextAlignment = TextAlignment.Center;
        PlayerText.Margin = new Thickness(11, 15, 27, 15);

        Position.Children.Add(mainImage);
        Position.Children.Add(PlayerText);
    }

    public TeamKit()
    {
        mainImage = new Image();
        _bImage = new BitmapImage(new Uri("pack://Application:,,,/Resources/KitC.png"));
        mainImage.Source = _bImage;
        mainImage.Stretch = System.Windows.Media.Stretch.None;
        Position = new Canvas();
        Position.Width = 38;
        Position.Height = 45;
        //mainImage.Margin = new Thickness(0, 0, 0, 6);

        PlayerText = new TextBlock();
        PlayerText.Text = _playerNumber; PlayerText.TextAlignment = TextAlignment.Center;
        PlayerText.Margin = new Thickness(12, 15, 27, 15);
        PlayerText.Width = 15;

        Viewbox Vb = new Viewbox();
        //Vb.StretchDirection = StretchDirection.Both;
        Vb.Stretch = System.Windows.Media.Stretch.Uniform;
        Vb.VerticalAlignment = VerticalAlignment.Stretch;
        Canvas.SetTop(Vb, 40);
        Canvas.SetLeft(Vb, -11);
        Vb.MaxWidth = 50;

        NameText = new TextBlock();
        NameText.Text = _playerName;
        NameText.TextAlignment = TextAlignment.Center;
        NameText.MaxHeight = 40;
        NameText.MaxWidth = 90;

        Vb.Child = NameText;
        Position.Children.Add(Vb);
         //<TextBlock Text="FooAlanghi" TextWrapping="Wrap" TextAlignment="Center" MaxHeight="40" MaxWidth="92" />


        Position.Children.Add(mainImage);
        Position.Children.Add(PlayerText);
    }

    public TeamKit(Player Player, int PlayerNumber)
    {
        this.Player = Player;
        _playerNumber = PlayerNumber.ToString();
        _playerName = Player.Last_Name;

        mainImage = new Image();
        _bImage = new BitmapImage(new Uri("pack://Application:,,,/Resources/KitC.png"));
        mainImage.Source = _bImage;
        mainImage.Stretch = System.Windows.Media.Stretch.None;
        Position = new Canvas();
        Position.Width = 38;
        Position.Height = 45;
        //mainImage.Margin = new Thickness(0, 0, 0, 6);

        PlayerText = new TextBlock();
        PlayerText.Text = _playerNumber; PlayerText.TextAlignment = TextAlignment.Center;
        PlayerText.Margin = new Thickness(12, 15, 27, 15);
        PlayerText.Width = 15;

        Viewbox Vb = new Viewbox();
        //Vb.StretchDirection = StretchDirection.Both;
        Vb.Stretch = System.Windows.Media.Stretch.Uniform;
        Vb.VerticalAlignment = VerticalAlignment.Stretch;
        Canvas.SetTop(Vb, 40);
        Canvas.SetLeft(Vb, -11);
        Vb.MaxWidth = 50;

        NameText = new TextBlock();
        NameText.Text = _playerName;
        NameText.TextAlignment = TextAlignment.Center;
        NameText.MaxHeight = 40;
        NameText.MaxWidth = 90;

        Vb.Child = NameText;
        Position.Children.Add(Vb);
        //<TextBlock Text="FooAlanghi" TextWrapping="Wrap" TextAlignment="Center" MaxHeight="40" MaxWidth="92" />


        Position.Children.Add(mainImage);
        Position.Children.Add(PlayerText);
    }


    public void Add(Panel Parent)
    {
        Parent.Children.Add(this.Position);
    }

    public static void DrawPositionLineUp(List<TeamKit> Players, Panel panel, double top, double left)
    {
        double ix = 0;
        foreach (TeamKit t in Players)
        {
            Canvas.SetLeft(t.Position, left);
            Canvas.SetTop(t.Position, ix += top);
            t.Add(panel);
        }
    }
}

Answer 1

很高兴您使用 MVVM 路线，但请注意，您想要做的事情与 MVVM 无关。你的问题都与视图相关（嗯，大部分）。

您的控件需要工具提示：

<Image ...>
    <Image.ToolTip>
        <ToolTip ...>
            Content (which can be another layout of controls)
        </ToolTip>
    </Image.ToolTip>
</Image>

至于效果，取决于什么效果，其中很多已经内置（模糊、阴影等）。但是，无论哪种方式，您都想在样式中使用触发器。

<Image ...>
    <Image.Style>
        <Style>
            <Trigger Property="Image.IsMouseOver" Value="True">
                <Setter ... /> <!-- Apply Styles Here -->
            </Trigger>
        </Style>
    </Image.Style>
</Image>

注意：最好将样式提取到静态资源中，并将其应用于该窗口/用户控件/页面或链中更高层（应用程序）中的所有此类控件，以便您可以执行

<Image Style="{StaticResource MouseOverImage}" ... />

---

以下操作 ...为什么我说“你的问题都是与视图相关的（嗯，主要是）”......我的意思是它与视图相关，直到数据绑定点，然后你必须与你的视图模型协调才能使确保它公开了您需要的属性。除此之外，这是一个 100% 与视图相关的问题，在这种情况下您不必担心任何 MVVMness。继续使用 MVVM，但要意识到无论您是否使用 MVVM，您都将这样做。

Answer 2

您是否考虑过使用触发器？
在处理鼠标悬停事件时，我通常使用触发器，但您还应该考虑 MVVM light - （或类似的东西）对于 MVVM 爱好者来说是一个很棒的工具。