- [DEVEXPRESS] Hướng dẫn bật tính năng Scroll Pixcel in Touch trên GridView
- [DEVEXPRESS] Hướng dẫn sử dụng TileBar viết ứng dụng duyệt hình ảnh Winform
- [DEVEXPRESS] Tô màu border TextEdit trên Winform
- [C#] Lấy dữ liệu từ Console Write hiển thị lên textbox Winform
- [C#] Hiển thị Progress bar trên Window Console
- [C#] Di chuyển control Runtime và lưu layout trên winform
- [SQLSERVER] Sử dụng hàm NULL IF
- [C#] Chia sẽ source code mã đi tuần bằng giao diện Winform
- [C#] Flash Window in Taskbar Winform
- Download và Giải nén tập tin File sử dụng Powershell
- [C#] Hướng dẫn cách lấy thông tin đăng nhập tài khoản và mật khẩu web browser trên windows
- [VB.NET] CRUD Thêm xóa sửa tìm kiếm Realtime FireBase
- [C#] Hiển thị thông báo Toast Message trong lập trình Winform
- [C#] Cấu hình định dạng ngày tháng, thời gian trên Windows cho ứng dụng Winform
- [C#] Rút gọn đường dẫn link url với TinyURL API
- [C#] Hướng dẫn cách bo tròn winform with Radius
- [C#] Chia sẽ class BackGroundOverlay Show Modal cho Winform
- [C#] Hướng dẫn Flip Image Winform
- [C#] Invoke là gì? cách sử dụng phương thức Invoke()
- [C#] Hướng dẫn chia sẽ file, folder từ ứng dụng sang Zalo Chat
[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!