Lê Quý Lộchttp://loclq.wordpress.com

28/09/2008

Nội Dung

• Trở ngại của hệ thống giao diện hiện tại• WPF là gì ?• WPF giải quyết các vấn đề này như thế nào ?• XAML là gì ?• Layouts, controls, templates, styles & resources• Content controls • Thuộc tính phụ thuộc (dependency properties)• Routed events• Data binding• Animation và multimedia• Đồ họa 2D, 3D và hình ảnh• Documents• Tham Khảo

• Nhiều công nghệ được sử dụng để tạo ra một ứng dụng– Windows Forms– PDF– GDI+– Windows Media Player– DirectX– Flash

• Lập trình viên và đồ họa viên không thể làm việc chung với nhau

• Không dùng cùng một công nghệ trong việc phát triển ứng dụng Windows và Web

Trở Ngại Của Hệ Thống Giao Diện Hiện Tại

WPF Là Gì ?

Là một công nghệ hợp nhất và mạnh mẽ để xây dựng

UI, media và documents

Sử dụng toàn bộ .NET Framework để xây dựng

hệ thống giao diện

Giao diện không phục thuộc vào độ phân giải của

màn hình

WPF Là Gì ?

Application Services

Deployment Services

Databinding

USER INTERFACE SERVICES

XAML

Accessibility

Property System

Input & Eventing

BASE SERVICES

DOCUMENT SERVICES

Packaging Services

XPS Documents

Animation

2D

3D

AudioImaging

Text

VideoEffects

Composition Engine

MEDIA INTEGRATION LAYER

Controls

Layout

Win

dow

s Pre

senta

tion F

oundati

on

XP

S V

iew

er

WPF Là Gì ?

• Hợp nhất các APIs của các công nghệ khác nhau– Audio và video – Vẽ– Animation– Tài liệu

• Cho phép lập trình viên và đồ họa viên làm việc được với nhau

• Sử dụng cùng một công nghệ để xây dựng ứng dụng Windows và Web

WPF Giải Quyết Các Vấn Đề Này Như Thế Nào ?

WPF Giải Quyết Các Vấn Đề Này Như Thế Nào ?

Unified WPF API

Documents User Interface Media

DirectX

GDIGDI+

Media Player

HTMLHTMLWordPDF

Win FormsWeb FormsMFCVB Forms

XAML Là Gì ?

<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>

XAML

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;

C#

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush(Colors.LightBlue)b1.Width = 100

VB.NET

XAML = Extensible Application Markup Language

• Trông giống như XML hoặc HTML• Cho phép UI được thiết kế bằng ngôn ngữ dựa trên ngôn ngữ đánh dấu• XAML và mã cùng tồn tại• Vẽ được cả trong browser và Windows

• Layouts: canvas, dockpanel, stackpanel, grid, wrappanel

• Controls: Button, Checkbox, ComboBox, ContextMenu, GridView, GroupBox, Image, Label, ListView, ListBox, Menu, Panel, Popup, DocumentViewer,…

• Styles và Resources: khai báo một lần và dùng trong toàn bộ chương trình

• Templates

Layouts, Controls, Templates, Styles & Resources

Layouts

, C

on

trols

, Te

mp

late

s,

Sty

les

& R

eso

urc

es

Content Controls

Content Controls

• Là những controls có thể chứa các elements khác

• Ứng dụng: để tạo ra button hoặc label đẹp hơn, …

• Nhiều thuộc tính cho mỗi control, không thể nào chỉnh giá trị của các tất cả thuộc tính cho tất cả controls

• Chúng ta muốn đặt giá trị thuộc tính một lần, và dùng cho tất cả lần sau

• Đặc điểm– Có thể thực thi một tác vụ nào đó khi thuộc tính

đổi giá trị– Thừa kế giá trị thuộc tính

Thuộc Tính Phụ Thuộc

Routed Events

• Sự kiện không chỉ xảy ra trực tiếp trên object nhận sự kiện, mà còn truyền đến những object là cha của nó

Canvas

StackPanel

Label ListBox StackPanel StatusPanel

String ListBoxItemListBoxItem

String String

StringString

Data Binding

Binding Target

Binding Source

Dependency Dependency ObjectObject

ObjectObject

Dependency Property PropertyTwoW

ay

OneWay

OneWayToSource

<StackPanel><Label>Select A Customer</Label><ListBox

Name="myListBox"

Background="HoneyDew"

ItemsSource="{Binding

{StaticResource myDataSource}}" </ListBox>

</StackPanel>

• OneWay: thay đổi ở source tự động cập nhật ở target, nhưng ngược lại thì không

• TwoWay: thay đổi ở source tự động cập nhật ở target, và ngược lại

• OneWayToSource: ngược với OneWay

• Transform: – Thay đổi hình dạng, vị trí của các elements– Thường được dùng trong animation

• Animation– Cơ chế hoạt hình dựa trên thời gian

Animation và Multimedia

<EventTrigger RoutedEvent="Canvas.Loaded"><BeginStoryboard><Storyboard x:Name="Ski"><DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Canvas3"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"><SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.2"/><SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.3"/><SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.4"/><SplineDoubleKeyFrame KeyTime="00:00:05" Value="0.4"/><SplineDoubleKeyFrame KeyTime="00:00:06" Value="0.5"/><SplineDoubleKeyFrame KeyTime="00:00:07" Value="0.6"/><SplineDoubleKeyFrame KeyTime="00:00:08" Value="0.7"/><SplineDoubleKeyFrame KeyTime="00:00:08.3000000" Value="-0.7"/><SplineDoubleKeyFrame KeyTime="00:00:09" Value="-0.8"/><SplineDoubleKeyFrame KeyTime="00:00:10" Value="-1"/><SplineDoubleKeyFrame KeyTime="00:00:11" Value="-2"/><SplineDoubleKeyFrame KeyTime="00:00:12" Value="-3"/>

</DoubleAnimationUsingKeyFrames>

Animation và Multimedia<Border Width="400" BorderBrush="Green" BorderThickness="9"> <StackPanel> <MediaElement Source="aero.wmv" /> <Button>Hello</Button> </StackPanel></Border>

• Formats: WMV, MPEG, Some AVIs• Có thể thêm animations vào trong audio hoặc video

• Những thành phần liên quan đến đồ họa trong WPF– Brushes: dùng lớp Brush để tô các vùng theo màu,

patterns, hoặc hình ảnh– Shapes: dùng lớp Shape để vẽ các hình dạng 2-D– Imaging: dùng lớp Imaging để đọc, xử lý và hiển

thị hình ảnh– Geometries: cũng để thao tác trên hình dạng 2-D,

nhưng cho phép vẽ được nhiều loại hình dạng hơn Shape

Đồ Họa 2D, 3D Và Hình Ảnh

• Transformations: dùng lớp Transform to để xoay, thay đổi vị trí, kích thước của geometries, visuals, brushes, framework elements, và controls.

• Animations: dùng API của lớp Animation và Timing để làm cho đối tượng thay đổi màu sắc, vị trí, kích thước, …

• Visuals: chính là hệ thống đồ họa của Windows Presentation Foundation. Tất cả những đối tượng WPF sử dụng Visuals để vẽ ra màn hình

• Đồ họa 3-D: namespace System.Windows.Media.Media3D defines định nghĩa các thao tác trên đồ họa 3D

Đồ Họa 2D, 3D Và Hình Ảnh

• FlowDocumentReader: là class để thao tác trên các document động: xem document trên máy tính

• XpsDocument: là class để thao tác trên document tỉnh, để in ra bằng máy in

Documents

• MSDN• www.windowsclient.net• Pro WPF in C# 2008 - Matthew MacDonald• www.thewpfblog.com• Microsoft Expression Blend:

www.microsoft.com/expression

Tham Khảo