Bui 2 Thit k giao din bng XAML

Buổi 2 Thiết kế giao diện bằng XAML P 1 Trần Minh Thái 1

Mục tiêu 1. Giới thiệu về giao diện trong WPF 2. Tạo Poject WPF dùng Visual Studio 3. Ví dụ Control dùng XAML trong WPF 4. Layout Control a) b) c) d) e) Stack. Panel Wrap. Panel Dock. Panel Canvas Grid 2 2

Giới thiệu giao diện trong WPF

Thiết kế giao diện • Thiết giao diện trong lập trình Web, Windows thường sử dụng các khái niệm Layout và Control. Các công nghệ lập trình khác nhau có tên gọi khác nhau, nhưng ý nghĩa đều tương tự như nhau • Layout là bộ khung chứa cấu trúc giao diện ứng dụng • Control là các điều khiển, ví dụ như nút nhấn (button), lựa chọn (checkbox), . . . Các control được đặt trong layout 4

Giao diện trên Windows • Giao diện trên Windows dư a tre n nguye n tă c bô tri theo vi tri tuyệt đô i (xa c đi nh gia tri to a đọ go c tre n be n tra i cu a mọ t control) • Điê u na y cho phe p lạ p tri nh vie n điê u khiê n vi tri cu a control kha dê da ng, nhu ng la i thu ơ ng đo i ho i mọ t lu ơ ng lơ n code khi câ n thay đô i ki ch thu ơ c form • Không tư đọ ng ke o gia n đê phu hơ p vơ i ki ch thu ơ c phâ n nọ i dung chư a trong no 5

Giao diện trên Web • Các thành phần giao diẹ n Web đu ơ c să p xê p theo phu o ng thư c declarative. Không đo i ho i code đê thay đô i ki ch thu ơ c ca c vu ng chư a (containner) • HTML cho phe p ta đi nh ra mọ t chuô i ca c vu ng chư a (<div>, <table>, <tr>, <td>, …) đê bô tri ca c phâ n tư UI kha c trong đo mọ t ca ch linh đọ ng be n pha i hoạ c be n tra i mọ t đô i tu ơ ng; hay cu ng co thê să p xê p chu ng theo vi tri tuyẹ t đô i tre n trang Web 6

Vấn đề thiết kế giao diện • Ca hai ca ch tiê p cạ n ne u tre n đê u kho co thê đa t đu ơ c ca ch bô tri nhu y , mạ c du ca ch bô tri tre n tri nh duyẹ t co gia m lu ơ ng code xư ly. • Windows Forms đu a the m như ng kha i niẹ m nhu Docking hay Anchoring, bô sung mọ t ca ch tiê p cạ n kiê u khai ba o linh hoa t ho n đê pha t triê n ca c ư ng du ng • WPF tiê p bu ơ c xu hu ơ ng na y vơ i viẹ c bô tri giao diẹ n dư a tre n kha i niẹ m vê panel 7

Thiết kế giao diện • Win. Form dùng C# (hoặc VB. Net) để định nghĩa giao diện, WPF dùng XAML để định nghĩa giao diện. • Tuy nhiên khi lập trình runtime trong WPF ta có thể dùng C# để định nghĩa giao diện trong code behind 8

Giao diện trong WPF • WPF sư du ng ca c da ng panel kha c nhau đê bô tri ca c thành phâ n tư trên giao diẹ n ngu ơ i du ng • Kê t hơ p co ng nghẹ giao diẹ n ma nh nhu Windows Forms, vơ i ca c ky thuạ t să p đạ t (layout) cu a tri nh duyẹ t nhă m na ng cao ti nh linh hoa t trong viẹ c bô tri ca c thành phâ n tre n giao diẹ n • Phâ n lơ n ca c thành phâ n UI trong ư ng du ng WPF chi co thê chư a duy nhâ t mọ t thành phâ n con Sử dụng panel lồng nhau có thể bố trí giao diện bất kỳ 9

Tạo Project WPF trên Visual Studio 2017

Tạo mới Project - Layout. Example 11

12

13

Tạo mới 1 giao diện (Window) 14

15

Mở file Example. Window. xaml Bổ sung 1 nút nhấn vào cửa sổ Example. Window (bổ sung code tại dòng 10: <Button Content=“Nút nhấn/>) 16

17

Thực thi cửa sổ Example. Window • Mở file App. xaml • Thay đổi dòng 5 Startup. Uri="Main. Window. xaml" thành Startup. Uri="Example. Window. xaml" 18

Sắp đặt thành phần trên giao diện

Các panel thông dụng 1. Stack. Panel 2. Wrap. Panel 3. Dock. Panel 4. Canvas 5. Grid 20

Stack. Panel • Bô tri ca c thành phâ n con nă m trong no bă ng ca ch să p xê p chu ng theo thư tư tru ơ c sau • Ca c phâ n tư se xuâ t hiẹ n theo thư tư ma chu ng đu ơ c khai ba o trong file XAML theo chiê u do c (ngâ m đi nh) hoạ c theo chiê u ngang (Orientation = "Horizontal”) 21

Ví dụ Stack. Panel theo chiều dọc 1. Bổ sung thêm 1 thư mục Layout. View trong Project Example. Layout 2. Tạo mới 1 Window (Stack. Panel. View. xaml) trong thư mục Layout. View 22

Ví dụ Stack. Panel theo chiều dọc • Thực thi giao diện Stack. Panel. View. xaml (thay đổi Startup. Uri=“Layout. View/Stack. Panel. View. xaml” trong file App. xaml) 23

Ví dụ Stack. Panel theo chiều dọc Thay thế dòng 9 – 11 trong file Stack. Panel. View. xaml 24

Ví dụ Stack. Panel theo chiều ngang 25

Ví dụ Stack. Panel theo chiều ngang • Bổ sung Orientation=“Horizontal” (dòng 9) file Stack. Panel. View. xaml 26

Bài tập – Tạo giao diện 27

Wrap. Panel • Wrap. Panel cho phe p să p xê p ca c thành phâ n tư tra i sang pha i • Khi mọ t do ng đa điê n đâ y khoa ng kho ng gian cho phe p theo chiê u ngang, Wrap. Panel se cuô n phâ n tư tiê p theo xuô ng đâ u do ng tiê p theo 28

Ví dụ Wrap. Panel 29

Ví dụ Wrap. Panel • Thêm file Wrap. Panel. View. xaml trong thư mục Layout. View (thay dòng 9 – 10) 30

Dock. Panel • Dock. Panel cho phe p ca c thành phâ n ba m le n ca c ca nh cu a panel Dock. Panel bao chư a chu ng • Tu o ng tư như kha i niẹ m Docking trong Windows Forms. Nê u nhu co nhiê u phâ n tư cu ng ba m vê mọ t ca nh, chu ng se tua n theo thư tư ma chu ng đu ơ c khai ba o trong file XAML 31

Ví dụ Dock. Panel 32

Ví dụ Dock. Panel • Thêm file Dock. Panel. View. xaml vào thư mục Layout. View, thay dòng 9 - 11 33

Canvas • Să p xê p ca c thành phâ n UI theo vi tri tuyẹ t đô i bă ng ca ch dùng Top va Left (co thê đạ t thuọ c ti nh Bottom và Right) • Nê u đạ t đô ng thơ i thuọ c ti nh Left va Right, thuọ c ti nh Right se bi bo qua (Top ưu tiên hơn Bottom) • Phâ n tư UI se kho ng thay đô i ki ch thu ơ c đê tho a ma n 2 thuọ c ti nh tre n cu ng mọ t lu c • Ca c phâ n tư đu ơ c khai ba o trước trong file XAML se co thê bi che khuâ t phi a du ơ i ca c phâ n tư đu ơ c khai ba o sau nê u vi tri cu a chu ng xê p chô ng le n nhau 34

Ví dụ Canvas 35

Ví dụ Canvas • Thêm file Canvas. Panel. View. xaml vào thư mục Layout. View, thay dòng 9 - 11 36

Grid • Grid cho phe p ta pha n đi nh ca c do ng va cọ t theo da ng lu ơ i, va să p đạ t ca c thành phâ n UI va o ca c o tu y y • Grid se tư đọ ng chia đê u ca c do ng va cọ t (dư a tre n ki ch thu ơ c cu a phâ n nọ i dung) • Sư du ng dâ u sao (*) đê pha n đi nh ki ch thu ơ c theo ti lẹ hoạ c pha n đi nh gia tri tuyẹ t đô i vê chiê u cao hoạ c chiê u rọ ng cho ha ng va cọ t 37