Upload
oakley
View
87
Download
16
Embed Size (px)
DESCRIPTION
Công Nghệ .NET Đề tài : WPF. GVHD: ThS. Phạm Thi Vương. SV: Nguyễn Thanh Hoàng - 06520182 Đoàn Nhật Trực – 06520512. Content. WPF là gì ? XAML ElementBinding Đồ họa trong WPF Một số control trong WPF Effect. WPF là gì ?. WPF viết tắt của Windows Presentation Foundation. - PowerPoint PPT Presentation
Citation preview
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