Chương trình xem ảnh sử dụng PictureBox và OpenFileDialog trong C#

Chào các bạn!

Nhiều bạn thắc mắc muốn thao tác với ảnh bằng C# Winform thì làm như thế nào, hôm nay mình sẽ hướng dẫn các bạn cách kết hợp hai control cơ bản là PictureBox và OpenFileDialog để làm một chương trình "Picture Viewer" trong C#

Đầu tiên các bạn tìm hiểu sơ lược về hai control này nhé.

PICTURE BOX TRONG C#

PictureBox là một control khá hữu dụng của C# .NET. Nó cung cấp một vùng hình chữ nhật để chèn ảnh bất kỳ và kích cỡ có thể tùy chỉnh bằng nhiều cách khác nhau.

Picturebox hỗ trợ nhiều định dạng ảnh: BMP, GIF, JPEG, EXIF, PNG và TIFF, ICO... (các định dạng được GDI+ hỗ trợ)

PictureBox có thể lấy ảnh từ ổ cứng của bạn hoặc từ Internet

Đầu tiên mình sẽ hướng dẫn các bạn chèn ảnh từ ổ cứng:

Mình sẽ dùng ảnh PNG trong ví dụ bên dưới, các định dạng khác cũng làm tương tự.

	private void Form1_Load(object sender, EventArgs e)
	{
	// Lấy file ảnh từ ổ cứng
	// File ảnh phải có trong thư mục debug của solution
	// Nếu không chương trình sẽ bị crash vì không tìm thấy file
	// Có thể để đường dẫn tuyệt đối đến file ảnh
	//(bao gồm cả ổ đĩa, thư mục,...)
	Image image = Image.FromFile("BeigeMonitor1.png");
	// Thiết lập thuộc tính của PictureBox
	// Gán ảnh đã lấy vào PictureBox
	pictureBox1.Image = image;
	pictureBox1.Height = image.Height;
	pictureBox1.Width = image.Width;
	}

view raw show_image.cs hosted with ❤ by GitHub

Tại sao chúng ta lại phải thiết lập thuộc tính Width và Height? Vì ảnh của chúng ta và kích cỡ của PictureBox có thể khác nhau rất nhiều, nếu như không thiết lập thì ảnh có thể sẽ bị crop. Ngược lại muốn crop ảnh theo kích cỡ mong muốn thì cứ thiết lập thuộc tính Width, Height của PictureBox

Picturebox cũng có các thuộc tính tương tự như các control cơ bản khác, tuy nhiên có một số thuộc tính mới cần nói như SizeMode.
Thay vì thiết lập thuộc tính Width và Height của PictureBox, hoặc hình ảnh. Chúng ta có thể thiết lập nhanh bằng một số tùy chọn .NET cung cấp sẵn:

	private void Form1_Load(object sender, EventArgs e)
	{
	// Chèn ảnh từ ổ cứng trực tiếp bằng thuộc tính ImageLocation
	// Thiết lập thuộc tính Size một cách tự động
	pictureBox1.ImageLocation = "BeigeMonitor1.png";
	pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
	}

view raw show_image_2.cs hosted with ❤ by GitHub

Chúng ta còn các SizeMode khác như (Normal, Zoom: căng ảnh nhưng duy trì tỉ lệ aspect ratio, AutoSize: tự thiết lập size của pictureBox bằng với size của ảnh, CenterImage: Center ảnh vào trung tâm PictureBox, StretchImage: căng ảnh lên theo 2 chiều cho vừa với khung pictureBox)

Tiếp theo là chèn ảnh từ Internet. Ví dụ trên mình đã dùng thuộc tính ImageLocation để chèn ảnh bằng địa chỉ của nó. Vậy thì địa chỉ hình ảnh trên Internet thì sao nhỉ?
Chúng ta thử gán nhanh cho thuộc tính ImageLocation trong cửa sổ properties với giá trị: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_4AjKZmor_E-j353JRuB0l1GGX47HwNwZLHCzfjmwP9QpvTLE80Z-c9D5nmhcmaRP3O1Z_dNYmEyC2DY8Zw3VUZ8yFtrs50LGOG1lgLXnSugYDxLeKlb3Mt0h0s4YD7EKGmgH3Rr9mpg/s1600/cooltext125983511023412.png. Sau đó chạy thử chương trình lên và kết quả sẽ là:

Về phần sự kiện của PictureBox thì chúng ta cũng có các sự kiện cơ bản như các control khác (Click, Mouse Hover,...). Vậy là xong phần PictureBox, chúng ta cùng sang control thứ hai cần thiết để hoàn thành chương trình này.

OPEN FILE DIALOG TRONG C#

OpenFileDialog (OFD) cho phép người dùng browse một thư mục hoặc tệp tin. Là control thường thấy trong rất nhiều ứng dụng. Nhất là các gói cài đặt thường cho bạn chọn thư mục để cài.

Để cài đặt một OFD các bạn kéo nó ra từ thanh Toolbox, nhóm Dialogs.
Thường thì chúng ta sẽ thiết lập các thuộc tính cho OFD ở ngay trong khung Properties. OFD cũng có thuộc tính Name, Title, Tag,.. như các control khác. Tuy nhiên một số thuộc tính mới như:
- FileName: Tên mặc định của File. Nếu các bạn gõ vào đây "fileName1" thì khi mở hộp thoại "fileName1" sẽ đặt mặc định trong ô FileName. Vậy nên các bạn nên xóa và để trống thuộc tính này
- Filter: Bộ lọc file. Thông thường ta chỉ cần một số loại file nhất định, nhưng nếu thư mục có quá nhiều file khác nhau thì việc tìm kiếm sẽ mất nhiều thời gian. Nên chúng ta có thể thiết lập thuộc tính Filter để lọc ra các loại file mong muốn.
Ví dụ: ofd.Filter = "Windows Bitmaps|*.bmp|JPEG Files|*.jpg"
Cứ theo định dạng mô tả | *.đuôi tệp tin. Giữa những loại tệp tin với nhau cũng là một dấu gạch đứng |.
- CheckFileExist, CheckPathExist: Các bạn để mặc định là true để OFD kiểm tra file và đường dẫn có hợp lệ, tồn tại không.
- InitialDirectory: Thư mục mặc định mà khi OFD được show ra sẽ nằm ở đó.
- MultiSelect: Nếu các bạn muốn chọn nhiều file một lúc thì cho bằng true.
- ...

Để mở hộp thoại OFD, chúng ta cần một button và thiết lập cho nó sự kiện Click để chạy code show OFD.

	private void button1_Click(object sender, EventArgs e)
	{
	// Show hộp thoại open file ra
	// Nhận kết quả trả về qua biến kiểu DialogResult
	DialogResult result = openFileDialog1.ShowDialog();
	//Kiểm tra xem người dùng đã chọn file chưa
	if(result == DialogResult.OK)
	{
	// Gán ....
	// Xử lý...
	}
	}

view raw show_image_3.cs hosted with ❤ by GitHub

DIALOG RESULT

DialogResult là một biến kiểu Enum, dùng để nhận giá trị trả về của var.ShowDialog(). Để kiểm tra xem người dùng vừa click nút nào, dự định làm gì.
DialogResult chứa các giá trị như: OK, Cancle, Ignore, Try, Yes, No,...

Vậy thì tiếp theo làm sao để ta lấy được hình ảnh từ OFD? Chung ta sẽ lấy đường dẫn của ảnh vừa chọn bằng thuộc tính FileName của OFD.

 Image img = Image.FromFile(openFileDialog1.FileName); 

Vậy là chúng ta đã học xong được tất cả các chức năng chính của PictureBox và OpenFileDialog rồi. Giờ chỉ còn kết hợp nó để làm chương trình xem ảnh thôi :D

Mình sẽ cung cấp code mẫu ở đây luôn. Ai có gì không hiểu thì bình luận hoặc pm trực tiếp mình qua facebook/email nhé

	namespace Picture_Viewer
	{
	public partial class Form1 : Form
	{
	public Form1()
	{
	InitializeComponent();
	// Cài đặt thuộc tính pictureBox
	pictureBox1.ImageLocation = "http://1.bp.blogspot.com/-ZskeiTa6Rig/VZwjEuEQPqI/AAAAAAAAAM0/VK5Im7Cfu3s/s1600/cooltext125983511023412.png";
	pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
	// Cài đặt thuộc tính OFD
	openFileDialog1.Title = "Select Picture";
	openFileDialog1.Filter = "Windows Bitmap|*.bmp|JPEG Image|*.jpg|All Files|*.*";
	}
	private void button1_Click(object sender, EventArgs e)
	{
	// Show hộp thoại open file ra
	// Nhận kết quả trả về qua biến kiểu DialogResult
	DialogResult result = openFileDialog1.ShowDialog();
	//Kiểm tra xem người dùng đã chọn file chưa
	if(result == DialogResult.OK)
	{
	// Lấy hình ảnh
	Image img = Image.FromFile(openFileDialog1.FileName);
	// Gán ảnh
	pictureBox1.Image = img;
	}
	}
	}
	}

view raw show_image_4.cs hosted with ❤ by GitHub

Chúc các bạn học tốt! Chào và hẹn gặp lại