像bing images search这样的c#形式怎么弹出图片框呢

Question

我正在尝试使动态生成的图片框像“bing”一样在鼠标悬停时起作用。下面是鼠标悬停时 bing 搜索的图片：

现在这是我正在做的一个项目的搜索结果，我真正想做的是像上面bing搜索中显示的那样弹出图片。

请注意，所有图片框都是在运行时间动态生成的。

Answer 1

使用此代码的风格 sheet

.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 2

下面是一些示例，您可以如何为此类图像制作非常简单的弹出窗口。

    //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();
        };
    }

假设您的图片框在 "images" 集合中。我们还有一个隐藏的图片框，可以用作弹出窗口。

接下来我们为它们中的每一个绑定到 MouseEnter 事件。在 MouseEnter 上，我们将弹出图片框放置在悬停图像上方，并在那里设置相同的图像，但我们将其稍微放大并在底层图片上居中，然后显示弹出窗口。

我们还绑定了弹出窗口的 MouseLeave 事件，因此当鼠标离开弹出窗口时它会消失。

当然这只是一个概念，可以启发您进一步发展。如果对您有帮助并且喜欢，记得标记为答案:)

Answer 3

如果您使用的是图片框。然后你可以像这样增强当前的图片框并使用它。

  //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);
            }
        }

现在当你在你的项目中添加这个 class 并构建它时，它会在你的工具箱中显示 PicControl 你可以用 PicContorl 替换 pictureBox 为了得到那个效果。希望它能帮助你。

像bing images search这样的c#形式怎么弹出图片框呢

How can we pop-up picture boxes in c# forms like bing images search do

c#

mouseevent

picturebox

mousehover