10/24/2018

Lập trình Ứng dụng quản lý
C#.NET
WinForm (tt)

Nội dung
 XML cơ bản

 GDI+
 Custom Controls

1


10/24/2018

Nội dung
 XML cơ bản
 GDI+
 Custom Controls

Cấu trúc file xml
 Dựa trên ngôn ngữ đánh dấu (Markup Language)

 Chỉ chứa duy nhất 1 nút (node) bao quát tất cả

gọi là nút gốc (node root)

2

10/24/2018

Cách thức lưu trữ thông tin
 Mỗi node chứa thông tin dựa vào thuộc tính

(attribute) hoặc text con (inner text)
 Thường sử dụng attribute để lưu các thông tin
ngắn gọn, đặc trưng,… cịn inner text lưu các
thơng tin dài

Phân tích dữ liệu XML
 Dữ liệu trong XML có thể được phân tích dựa trên

nhiều mơ hình khác nhau
 Mơ hình tún tính (Linear): theo mơ hình này dữ liệu

được duyệt theo dạng đường thẳng, mơ hình chỉ phù
hợp với các dạng dữ liệu tĩnh khơng có sự thay đởi. Ví
dụ như ta muốn tìm thơng tin trong 1 cuốn sách trong
thư viện chúng ta bắt đầu từ chủ đề của sách, đến tên
sách, đến trang thứ mấy của sách và dòng thứ mấy. Tuy
nhiên nếu cuốn sách đó được tái bản hay chuyển sang
dạng khác thì mơ hình này khơng cịn thích hợp.
 Mơ hình cây (Tree Model): như chúng ta đã biết XML
có dạng cấu trúc phân cấp vì thế chúng ta có thể biểu
diễn dữ liệu trong XML theo cấu trúc cây. Cấu trúc này
có ưu điểm là chúng ta có thể xác định được các mối
quan hệ giữa các phần tử với nhau.


3


10/24/2018

Mơ hình đối tượng XML
 Mơ hình đới tượng: Mơ hình đối tượng XML là tập hợp các

đối tượng dùng để truy xuất và thao tác với các dữ liệu trong
XML. Trong mơ hình này dữ liệu cũng được tở chức thành
dạng cấu trúc cây cùng với các nút. Các đối tượng có nhiều
thuộc tính và phương thức để chúng ta có thể quét cấu trúc
cây XML và các phần tử trong cây.

Đọc ghi xml
 .NET hỗ trợ nhiều cách đọc ghi xml (DOM,

XmlReader, XmlWriter,…)
 Sử dụng cách đọc ghi theo xml DOM dễ dàng
duyệt ngẫu nhiên một node bất kỳ
 Trong cấu trúc DOM thì: root là document node,
các thẻ là element node, thuộc tính là attribute
node, inner text là text node,…

4


10/24/2018

Ví dụ DOM


Các thao tác
 Bắt đầu với đối tượng XmlDocument (lấy ngun

nội dung xml và parse sang mơ hình xml DOM
lưu trong bộ nhớ).

 Lấy node root

XmlNode nodeRoot = doc.DocumentElement;

5


10/24/2018

Các node con

Phương thức cơ bản
 Lưu ý XmlNode là lớp cơ sở của các dẫn xuất:

XmlElement, XmlAttribute, XmlText,…
 Các phương thức cơ bản

6


10/24/2018

Minh họa


Ví dụ lấy giá trị thuộc tính của 1 node

7


10/24/2018

Nội dung
 XML cơ bản
 GDI+
 Custom Controls

GDI+
 GDI: Graphical Device Interface

 GDI+ là API (Application programming interface)

cung cấp các lớp cho phép
 Tạo những đồ họa 2D vector
 Thao tác trên font, chuỗi ký tự
 Hiển thị các đường, hình và ảnh…

 Thư viện FCL chứa các lớp thao tác vẽ trong

namespace System.Drawing
 Tất cả các thao tác tô vẽ trên GUI đều thực hiện
bởi chức năng GDI+

8



10/24/2018

Kiến trúc
System.Drawing
Font

Graphics

Color
Point
Rectangle

Icon

class

structure

Size

Pen
Region
HatchBrush
Image
Brush

LinearGradientBrush
PathGradientBrush


SolidBrush
TextureBrush

Graphics
 Class Graphics thể hiện
 “Abstract” drawing surface
 Tập hợp những “tool” cho phép thao tác trên

surface đó
 Để lấy đối tượng Graphics
 Sử dụng thuộc tính Graphics được truyền cho

OnPaint()
 Sử dụng phương thức CreateGraphics() của control
 Lấy từ đối tượng dẫn xuất từ Bitmap
 Gọi hàm Invalidate() thay vì OnPaint()

9


10/24/2018

Lấy đối tượng Graphics từ tham số
protected override void
OnPaint(PaintEventArgs paintevent)
{
Graphics graf=paintevent.Graphics;
}
Từ tham số

PaintEventAtgs
private void mainForm_Paint(object sender,
PaintEventArgs paintevent)
{
Graphics graf=paintevent.Graphics;
}

Lấy đối tượng Graphics từ control, image
private void PaintMe(Control testcontrol)
{
Graphics graf=testcontrol.CreateGraphics();
...
}
Lấy từ control
protected override void
OnPaint(PaintEventArgs paintevent)
{
Bitmap bmpimage=new Bitmap(1024,768);
Graphics graf = Graphics.FromImage
(bmpimage);
...
Lấy từ ảnh
}

10


10/24/2018

Pen

 Pen
 Xác định width, style, fill style
 Không cho kế thừa, nhưng tạo thể hiện được
 Trong namespace System.Drawing
 Pen p1 = new Pen(Color.Green);
Pen p2 = new Pen(Color.blue, 10);
 Sử dụng lớp Pens có 141 pen được định nghĩa

trước.
 Pen p3 = Pens.Violet;

Brush
 Brush
 Dùng để tô vùng bên trong của hình
 Class Brush là class abstract nên khơng tạo thể

hiện
 Sử dụng các lớp kế thừa sau để tạo brush
 SolidBrush
 LinearGradientBrush
 TextureBrush
 HatchBrush

 Sử dụng lớp Brushes định nghĩa trước các brush.

11


10/24/2018


Vẽ, tô cơ bản
 Các phương thức vẽ cơ bản
 DrawString
 DrawLine
 DrawRectangle

 DrawEllipse
 DrawImage
…

 Các phương thức tô cơ bản
 FillRectangle
 FillEllipse
…

Tọa độ
 Tọa độ hệ thống

Gốc tọa độ

(0,0)

(w,0)
(0,0)

Form,
Panel,
GroupBox,
File Bitmap
….


(0,h1)

(0,h)

(w1,0)

Control
(w1,h1)

(w,h)

12


10/24/2018

Ví dụ
 Ví dụ cơ bản
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
protected override void OnPaint(PaintEventArgs e)
{
Graphics g = e.Graphics;
g.DrawString("Hello GDI!", Font, Brushes.Red, 20, 20);
}

}

Ví dụ (tt)
 Ví dụ cơ bản

13


10/24/2018

Ví dụ (tt)
 Ví dụ cơ bản

Ví dụ (tt)
 Ví dụ cơ bản

14


10/24/2018

Ví dụ (tt)
 Ví dụ cơ bản
Solid

Hatch

LinearGradient

Texture


Ví dụ (tt)
 Ví dụ cơ bản

15


10/24/2018

Ví dụ (tt)
 Ví dụ cơ bản

Ellipse được vẽ lên ảnh, rồi sau
đó với vẽ ảnh lên Form

Nội dung
 XML cơ bản

 GDI+
 Custom Controls

16


10/24/2018

Custom Controls
 User Controls (Composite)
 ProgressBar có status


 Derived Controls
 TextBox chỉ cho nhập số

 ListBox cuộn đến cuối

 Owner-Drawn Controls
 ListBox, ComboBox
 ListView, TreeView
 ToolTip
 MenuItem

 New Control
 Dẫn xuất trực tiếp từ Control

Bài tập
 Tạo custom TextBox cho phép nhập số thực.

 Tạo custom ProgressBar có hiển thị trạng thái.
 Tạo custom ListBox cho phép hiển thị màu tùy

chỉnh.

17