鼠标悬停在 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 无关。你的问题都是与视图相关的（嗯，主要是）。

你需要一个ToolTip：

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

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

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

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

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

---

至于为什么我说“你的问题都是与视图相关的（嗯，主要是）”......我的意思是它在数据绑定点之前都是与视图相关的，那么你必须与你的view-model 以确保它公开了您需要的属性。除此之外，这是一个 100% 与视图相关的问题，在这种情况下您不必担心任何 MVVM 问题。继续使用 MVVM，但要意识到无论您是否使用 MVVM，您都会这样做。

Answer 2

您是否考虑过使用触发器？ 在处理鼠标悬停事件时，我通常使用触发器，但您也应该考虑 MVVM light -（或类似的东西）它是 MVVM 爱好者的绝佳工具。