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

1. 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

2. Content • WPF là gì ? • XAML • ElementBinding • Đồ họa trong WPF • Một số control trong WPF • Effect

3. 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

4. WPF là gì ?

5. WPF là gì ?

6. 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>

7. 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.

8. ElementBinding

9. Đồ 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

10. Đồ 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>

11. Đồ 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).

12. Đồ họa trong WPF • Tạo một circle button

13. Một số control trong WPF • Button, Text Selection, Multiple lines, Password Box, ListBox, Combobox, Menu ... • Layout : Grid , Dock, Stack ... • Keyboard & Mouse • Effects : BlurEffect, DropShadowEffect & ShaderEffect.

14. 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>

15. 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.

16. 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

17. 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

18. 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>

19. Menu

20. 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>

21. 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.

22. 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ử đó

23. 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>

24. 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 đó .

25. 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 .

26. Keyboard and Mouse • Mouse: • Mouse Clicks • Drag-and-Drop

27. Keyboard and Mouse • Mouse Clicks

28. Keyboard and Mouse • Drag-and-Drop: • Source – Target • DoDragDrop() • Xác định Source • Xác định hiệu ứng (copy, move,…)

29. Keyboard and Mouse • Drag-and-Drop:

30. 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 ...

31. 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>

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

33. 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>

34. Thank You !