- [C#] Hướng dẫn fix lỗi Visual Studio 2022 not Support Target Net Framework 4.5.2
- [C#] Giới thiệu thư viện Sunny UI thiết kế giao diện trên Winform
- [DATABASE] Hướng dẫn thêm và cập nhật Extended Property Column trong Table Sqlserver
- [DEVEXPRESS] Hướng dẫn sử dụng Vertical Gridview để hiển thị thông tin sản phẩm
- [C#] Hướng dẫn sử dụng Json Schema để Validate chuỗi string có phải json
- [C#] Hướng dẫn sử dụng công cụ Clean Code trên Visual Studio
- [C#] Hướng dẫn Drag and Drop File vào RichTextBox
- [C#] Hướng dẫn tạo hiệu ứng Karaoke Text Effect Winform
- [C#] Sử dụng thư viện ZedGraph vẽ biểu đồ Line, Bar, Pie trên Winform
- [DATABASE] Hướng dẫn sort sắp xếp địa chỉ IP trên sqlserver sử dụng hàm PARSENAME
- [C#] Theo dõi sử kiện process Start hay Stop trên Winform
- [ASP.NET] Chia sẻ source code chụp hình sử dụng camera trên website
- [C#] Chạy ứng dụng trên Virtual Desktop (màn hình ảo) Winform
- [C#] Mã hóa và giải mã Data Protection API trên winform
- [C#] Hướng dẫn tạo Gradient Background trên Winform
- [DATABASE] Hướng dẫn convert Epoch to DateTime trong sqlserver
- [DATABASE] Hướng dẫn sử dụng STRING_AGG và CONCAT_WS trong sqlserver 2017
- [C#] Hướng dẫn Copy With All Property in Class Object
- [DEVEXPRESS] Hướng dẫn load Json DataSource vào GridView
- [C#] Hướng dẫn tạo chữ ký trên winform Signature Pad
[DEVEXPRESS] Hướng dẫn phóng lớn zoom image trong PictureEdit C#
Xin chào các bạn, bài viết hôm nay mình sẻ tiếp tục hướng dẫn các bạn cách zoom lớn hình ảnh giống phóng lớn sản phẩm hình ảnh trên website trên PictureEdit Devexpress.
[DEVEXPRESS] Zoom Image in PictureEdit C#
Các bạn lướt web các trang thương mại điện tử, hay mua hàng sản phẩm, các bạn thường thấy khi cửa hàng show hình ảnh của họ lên website.
Bạn có thể rê chuột vào tấm hình nhỏ và hiện hình lớn ở góc kế bên, giúp cho người dùng mua hàng dễ dàng xem được chi tiết của sản phẩm.
Dưới đây là hình ảnh demo ứng dụng Zoom image pictureedit devexpress c#:
Để sử dụng chúng ta sẽ sử dụng 3 componnet:
- Hai Picture Edit
- Một Flyout Panel
Cách thức hoạt động của ứng dụng, khi hover vào pictureEdit1, chúng ta sẽ crop cắt xén hình lại của pictureBox1 và hiển thị vào pictureBox2
Và sau đó chúng ta sẽ sử dụng Flyout Panel để showdialog.
Full source code zoom image c#:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace zoomPicture
{
public partial class Form1 : DevExpress.XtraEditors.XtraForm
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
pictureEdit1.Image = Properties.Resources.hotgirl2;
pictureEdit1.Properties.SizeMode = DevExpress.XtraEditors.Controls.PictureSizeMode.Zoom;
pictureEdit1.MouseEnter += PictureEdit1_MouseEnter;
pictureEdit1.MouseMove += PictureEdit1_MouseMove;
pictureEdit1.MouseLeave += PictureEdit1_MouseLeave;
// pictureEdit1.Size = new Size(300, 300);
pictureEdit2.Properties.SizeMode = DevExpress.XtraEditors.Controls.PictureSizeMode.Stretch;
flyoutPanel1.OwnerControl = this;
flyoutPanel1.Size = new Size(500, 500);
flyoutPanel1.Options.Location = new Point(250, 22);
flyoutPanel1.Options.AnchorType = DevExpress.Utils.Win.PopupToolWindowAnchor.Manual;
flyoutPanel1.Options.AnimationType = DevExpress.Utils.Win.PopupToolWindowAnimation.Fade;
}
int zoomFacet = 150;
private void PictureEdit1_MouseMove(object sender, MouseEventArgs e)
{
if (!flyoutPanel1.IsPopupOpen)
flyoutPanel1.ShowPopup();
Point offsetLocation = pictureEdit1.ViewportToImage(e.Location);
offsetLocation.X -= zoomFacet / 2;
offsetLocation.Y -= zoomFacet / 2;
offsetLocation.X = offsetLocation.X + zoomFacet > pictureEdit1.Image.Width
? pictureEdit1.Image.Width - zoomFacet : offsetLocation.X;
offsetLocation.X = offsetLocation.X < 0 ? 0 : offsetLocation.X;
offsetLocation.Y = offsetLocation.Y + zoomFacet > pictureEdit1.Image.Height
? pictureEdit1.Image.Height - zoomFacet : offsetLocation.Y;
offsetLocation.Y = offsetLocation.Y < 0 ? 0 : offsetLocation.Y;
pictureEdit2.Image = cropImage(pictureEdit1.Image,
new Rectangle(offsetLocation, new Size(zoomFacet, zoomFacet)));
}
private static Image cropImage(Image img, Rectangle cropArea)
{
using(Bitmap bmpImage = new Bitmap(img))
{
return bmpImage.Clone(cropArea, bmpImage.PixelFormat);
}
}
private void PictureEdit1_MouseLeave(object sender, EventArgs e)
{
flyoutPanel1.HidePopup();
}
private void PictureEdit1_MouseEnter(object sender, EventArgs e)
{
flyoutPanel1.ShowPopup();
}
}
}
Thanks for watching!