LOGO

Công Nghệ .NETCông Nghệ .NETĐề tài : WPFĐề tài : WPF

GVHD: ThS. Phạm Thi Vương

SV: Nguyễn Thanh Hoàng - 06520182Đoàn Nhật Trực – 06520512

1

Content

WPF là gì ?XAMLElementBindingĐồ họa trong WPF Một số control trong WPFEffect

2

WPF là gì ?

WPF viết tắt của Windows Presentation Foundation.

Là hệ thống API mới hỗ trợ việc xây dựng giao diện đồ hoạ trên nền Windows.

Là một bộ phận của .NET Framework 3.0

3

WPF là gì ?

Windows

Forms

PDF Windows

Forms/ GDI+

Windows

Media Player

Direct3D WPF

Giao diện đồ

họa (form,

control)

x x

On-screen

văn bản

x x

Fixed-format

văn bản

x x

Hình ảnh x x

Video, âm

thanh

x x

2D x x

3D x x

4

WPF là gì ?

5

XAML

WPF đưa ra ngôn ngữ đặc tả eXtensible Application Markup Language (XAML).

XAML định ra một tập các phần tử XML như Button, TextBox, Label…, nhằm định nghĩa các đối tượng đồ họa tương ứng như nút bấm, hộp thoại, nhãn…

VD :<Button Background="Red">No</Button>

6

XAML

XAML mở ra một cách thức tốt hơn để lập trình viên và người thiết kế làm việc với nhau.

Người thiết kế có thể mô tả giao diện người dùng và tương tác với nó thông qua một công cụ, chẳng hạn như Microsoft Expression Interactive Designer. Chỉ tập trung vào việc định ra diện mạo và cảm quan cho giao diện đồ họa WPF.

7

ElementBinding

8

Đồ họa trong WPF

Các đối tượng đồ họa cơ bản như Line (đoạn thẳng) Ellipse (hình elip) Polygon (đa giác), Polyline (chuỗi đoạn thẳng) Rectangle (chữ nhật) Path (hình phức hợp)

Các đối tượng này thường được đặt trong thẻ Canvas

9

Đồ họa trong WPF

<Canvas> <Rectangle Width="100" Height="50" RadiusX="20" RadiusY="20" Stroke="Black" Fill="Aqua" Canvas.Left="151" Canvas.Top="29" /> <Ellipse Width="100" Height="50" Fill="Blue" Canvas.Left="26" Canvas.Top="29" /></Canvas>

10

Đồ họa trong WPF

Brush

Tô màu đồng nhất : Solid Color Tô màu tuyến tính : Linear Color : là kỹ

thuật tô một vùng bằng nhiều màu trộn với nhau dọc theo một trục định hướng (đối tượng LinearGradientBrush)

Tô màu dọc theo bán kính hình tròn: Radial Gradient Color

Tô bằng ảnh bitmap (đối tượng ImageBrush).

11

Đồ họa trong WPF

Tạo một circle button

12

Một số control trong WPF

Button, Text Selection, Multiple lines, Password Box, ListBox, Combobox, Menu ...

Layout : Grid , Dock, Stack ...Keyboard & MouseEffects : BlurEffect, DropShadowEffect& ShaderEffect.

13

Button

Lớp Button đại diện cho việc khai báo và sử dụng những nút nhấn trên giao diện Windows. Lớp này có thêm 2 thuộc tính là IsCancel và IsDefault.

<Button>Name button</Button>

14

Multiple lines

Thông thường Textbox control chỉ cho phép một dòng text.

Để có thể chưa nhiều nội dung hơn, ta đặt thuộc tính TextWrapping bằng Wrap hay WrapWithOverflow Wrap làm cho đoạn text xuống dòng khi tới rìa

của control, thậm chí nó còn tách những từ dài làm 2 dòng.

WrapWithOverflow cho phép một từ có thể căng ra tới rìa control nếu không thể tìm được chỗ để cắt thích hợp.

15

ListBox

Hiển thị danh sách các item để người sử dụng chọn 1 hoặc nhiều item trên đó.

Cho phép Multiple Selection nếu bạn đặt thuộc tính SelectionMode là Multiple hay Extended

16

ListBox

ListBox là một control đặc biệt linh hoạt. Nó không chỉ có thể giự các đối tượng ListBoxItem mà con có thể lưu trữ những phần tử tùy ý khác

17

Menu

WPF không đưa ra một điều lệ nào trong việc đặt menu ở đâu . Thông thường , ta gắn nó bên trên của màn hình window. Tuy nhiên , bạn có thể menu ở bất cứ đâu , thậm chí có thể bên cạnh những control khác .

<Menu><MenuItem Header="File"><MenuItem Header="New"></MenuItem><MenuItem Header="Open"></MenuItem><MenuItem Header="Save"></MenuItem><Separator></Separator><MenuItem Header="Exit"></MenuItem></Menu>

18

Menu

19

ContextMenu

ContextMenu chỉ khác với Menu ở chỗ là nó không được đặt trên màn hình window . Cách tạo một ContextMenu như sau :

<TextBox><TextBox.ContextMenu><MenuItem ... >...</MenuItem></TextBox.ContextMenu></TextBox>

20

ContextMenu

Thuộc tính Contextmenu được định nghĩa trong lớp FrameworkElement ,nó hỗ trợ hầu hết các phần tử WPF.

Nếu bạn khai báo một contextmenu cho một phần tử đã định nghĩa sẵn thì nó sẽ thay thế bằng contextmenu mới mà bạn định nghĩa.

21

Layout - Grid

Ý tưởng dựa trên việc chia cửa sổ khung chứa thành nhiều khu vực.

Grid mặc dù được thiết kế để người dùng không thể nhìn thấy , nhưng ta có thể thiết lập lại thuộc tính Grid.ShowGridLines.

Để thêm vào một phần tử cụ thể vào grid . ta chỉ cần chỉ định thuộc tính dòng và cột cho phần tử đó

22

Layout - Grid

<Grid ShowGridLines="True">...<Button Grid.Row="0" Grid.Column="0">Top Left</Button><Button Grid.Row="0" Grid.Column="1">Middle Left</Button><Button Grid.Row="1" Grid.Column="2">Bottom Right</Button><Button Grid.Row="1" Grid.Column="1">Bottom Middle</Button></Grid>

23

Keyboard and Mouse

Keyboard :Để khai báo cho một sự kiện , trước hết ta cần phải xác định sự kiện đó dành cho control nào , từ đó gọi sự kiện tương ứng trong thẻ của control đó .

24

Keyboard and Mouse

Một EventHandler sẽ tự động được tạo theo tên này và một hàm tương ứng sẽ được sinh ra .

25

Keyboard and Mouse

Mouse: Mouse Clicks Drag-and-Drop

26

Keyboard and Mouse

Mouse Clicks

27

Name Routing Type Description

PreviewMouseLeftButtonDown, PreviewMouseRightButtonDown

Tunneling Xuất hiện khi nút chuột được nhấn

MouseLeftButtonDown, MouseRightButtonDown

Bubbling Xuất hiện khi nút chuột được nhấn

PreviewMouseLeftButtonUp, PreviewMouseRightButtonUp

Tunneling Xuất hiện khi nút chuột được thả ra

MouseLeftButtonUp, MouseRightButtonUp

Bubbling Xuất hiện khi nút chuột được thả ra

Keyboard and Mouse

Drag-and-Drop: Source – Target DoDragDrop()

• Xác định Source• Xác định hiệu ứng (copy, move,…)

28

Keyboard and Mouse

Drag-and-Drop:

29

Effects

WPF cung cấp các hiệu ứng cho một phần tử bất kỳ, khai báo nhanh chóng trong các đối tượng image, button ...

30

Effects

BlurEffect : Nó làm mờ phần tử mà bạn đang nhìn tới thông qua ống kính tiêu điểm .

<Button Content="Blurred (Radius=2)" Padding="5" Margin="3"><Button.Effect><BlurEffect Radius="2"/></Button.Effect></Button>

31

Effects

DropShadowEffect : Hiệu ứng này tạo ra một bóng đằng sau phần tử .

32

Effects

DropShadowEffect :<TextBlock FontSize="20" Margin="5">

<TextBlock.Effect><DropShadowEffect></DropShadowEffect>

</TextBlock.Effect><TextBlock.Text>

Basic dropshadow</TextBlock.Text>

</TextBlock><TextBlock FontSize="20" Margin="5">

<TextBlock.Effect><DropShadowEffect Color="SlateBlue"></DropShadowEffect>

</TextBlock.Effect><TextBlock.Text>

Light blue dropshadow</TextBlock.Text>

</TextBlock>

33

LOGO

34