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> 

至於效果，取決於什麼影響，他們中的很多已經建成（模糊，陰影，等）。但是，無論你想在樣式中使用觸發器。

<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愛好者來說是一個很好的工具。