我們如何彈出c＃形式的圖片框像bing圖片搜索做

Question

我想讓我的動態生成的圖片框在鼠標懸停上像「bing」一樣做。下面是附加的bing搜索看起來像鼠標懸停在圖片：

現在，這是一個項目，我的搜索結果我的工作，我真正想要做的是，我想使圖片彈出，如上面在bing搜索中所示。

請注意，所有的圖片框在運行時動態生成。

Answer 1

如果你正在使用圖片框。 然後你可以增強當前的圖片框，像這樣 並使用它。

//extending the picture box 
    public class PicControl : PictureBox 
     { 
      // variables to save the picture box old position 
      private int _OldWidth; 
      private int _OldHeight; 
      private int _OldTop; 
      private int _OldLeft; 
      public PicControl() 
      { 
      } 
    protected override void OnLoadCompleted(System.ComponentModel.AsyncCompletedEventArgs e) 
     { 

      _OldTop = this.Top; 
      _OldLeft = this.Left; 
      _OldWidth = this.Width; 
      _OldHeight = this.Height; 
      base.OnLoadCompleted(e); 
     } 
      protected override void OnMouseEnter(EventArgs e) 
      { 
       //once mouse enters 
        // take the backup of height width top left 
       //so we can restore once mouse leaves 
       _OldTop = this.Top; 
       _OldLeft = this.Left; 
       _OldWidth = this.Width; 
       _OldHeight = this.Height; 
       //decrease the control top left to show hover effect 
       this.Top = this.Top - 10; 
       this.Left = this.Left - 10; 
       // same increase the height width 
       this.Height = this.Height + 20; 
       this.Width = this.Width + 20; 
       // show to control on top of all 
       this.BringToFront(); 
       //trigger the base event 
       base.OnMouseEnter(e); 
      } 
      protected override void OnMouseLeave(EventArgs e) 
      { 
        // mouse leaves now we have to restore 
        //picture box to its original position 
       this.Height = _OldHeight; 
       this.Width = _OldWidth; 
       this.Left = _OldLeft; 
       this.Top = _OldTop; 
       base.OnMouseLeave(e); 
      } 
     } 

現在，當你在你的項目中添加這個類，並建立它，它就會 告訴你PicControl你的工具箱中，你可以爲了得到這種效果與PicContorl 替換圖片框。希望它能幫助你。

Answer 2

使用該代碼在樣式表

.image:hover { 
-webkit-transform:scale(1.2); transform:scale(1.2); 
} 
.image { 
-webkit-transition: all 0.7s ease; transition: all 0.7s ease; 
} 

，並通過此class到圖像

<img alt="" src="../Sample%20Pictures/Chrysanthemum.jpg" 
      style="width: 301px; height: 196px" class="image " /> 

輸入： -

輸出： -

Answer 3

下面是一些示例，您可以如何爲這些圖像製作非常平凡的彈出窗口。

//Sample object representing one of your pictures 
    PictureBox pb1 = new PictureBox(); 
    List<PictureBox> images = new List<PictureBox>(); 
    images.Add(pb1); 

    int frameSize = 5; 
    PictureBox popup = new PictureBox(); 
    popup.Visible = false; 
    popup.MouseLeave += (s, a) => 
    { 
     popup.Visible = false; 
    }; 

    foreach (var pb in images) 
    { 
     pb.MouseEnter += (s, a) => 
     { 
      var sender = (PictureBox)s; 
      popup.Image = sender.Image; 
      popup.Left = sender.Left - frameSize; 
      popup.Top = sender.Top - frameSize; 
      popup.Width = sender.Width + (2 * frameSize); 
      popup.Height = sender.Height + (2 * frameSize); 
      popup.Visible = true; 
      popup.BringToFront(); 
     }; 
    } 

讓我們假設你的圖片框在「圖像」集合中。我們還有一個隱藏的圖片框，它可以像彈出一樣工作。

接下來對於它們中的每個我們綁定到MouseEnter事件。在MouseEnter上，我們在彈出的圖片上方放置彈出式圖片框，我們在那裏設置了相同的圖片，但是我們將它稍微放大並居中放置在底層圖片上，然後顯示彈出窗口。

我們也綁定到彈出式菜單的MouseLeave事件，所以當鼠標離開彈出窗口時它會消失。

當然，這只是一個啓發你進一步發展的概念。請記住標記爲答案，如果幫助你和你喜歡它:)