Windows Presentation Foundation

LOGO

Windows Presentation FoundationLive Club OU

Phạm Phương NguyênMicrosoft Student Partner

[email protected]

mailto:[email protected]

LOGO

Agenda

Overview WPF1

WPF4 - Lots of Good Stuff2

Controls in WPF3

Question ????4

LOGO

.Net Framework

.NET Framework 4

WebData Presentation

Common Language Runtime

Base Class Library

CommunicationsWorkflow

LOGO

Why ??????

?

?

??

?Over View

Problem ?????

what ?????

http://www.sidfaiwu.com/blog/wp-content/uploads/2007/09/question_mark_3d.png

http://upload.wikimedia.org/wikipedia/commons/f/f3/Question_mark_alternate.png

LOGO

Resolve the problem

1• Cung Cấp Một Nền Tảng Thống Nhất

Để Xây Dựng Giao Diện Hiện Đại .

2

• Cho Phép Người Lập Trình và Người Thiết Kế Làm Việc Cùng Nhau Một Cách Dễ Dàng

3

• Cung Cấp Một Công Nghệ Chung Để Xây Dựng Giao Diện Trên Cả Windows và Trình Duyệt Web

LOGO

Wikipedia Exlorer

demo

LOGO

What is WPF?

WPF – Windows Presentation FoundationMột thư viện thống nhất dành cho việc xây dựng các ứng dụng trên nền Windows (kể cả trên nền Web).

UI Documents Media Graphics….

Declarative programming

LOGO

What is WPF?

WPF

Appl

icati

on

Win

dow

-bas

ed

Apps

Brow

ser-

Hos

ted

Apps

Cont

rols

Inpu

t And

Com

man

ding

Layo

uts

Dat

a Bi

ndin

g

Gra

phic

s

2D 3DEff

ects

Anim

ation

Med

iaIm

ages

Vide

os a

nd

Audi

o

Text

and

Typ

ogra

phy

Doc

umen

ts

LOGO

Why WPF?

MFC ALT

GDI+ DirectX

OpenGL MPlayer

HTML Flash

? WPF

LOGO

Why WPF?

DesignerLook, behavior, brand,and emotional connection

DeveloperFunction, deployment, data,

security, operational integrity

LOGO

How WPF?

DesignerLook, behavior, brand,and emotional connection

DeveloperFunction, deployment, data,

security, operational integrity

XAML

LOGO

How WPF?

XAML là gì? XAML == “Extensible Application Markup

Language” Ngôn ngữ đánh dấu có cấu trúc XML để xây dựng

ứng dụng, các thành phần của ứng dụng. Mã XAML và source code hoàn toàn “độc lập” nhau

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

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

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

LOGO

How WPF?

Tối thiểu .NET Framework 3.0Visual Studio 2008 hoặc cao hơnExpression Blend

LOGO

Các thành phần UI trong WPF

Layouts

Layouts

Grid Canvas Panel

StackPanel WrapPanel DockPanel

ControlsLabel, TextBox, Buttons, ComboBox, ProgressBar, …

LOGO



[email protected]

WPF 4.0 - Lots of Good Stuff


LOGOwww.themegallery.com

Lots of Good Stuff

Cached compositions Text clarity Layout Rounding ClickOnce improvements Multitouch Win7 Taskbar Win7 Ribbon Focus mgt improvements Support for UIAccessible2 VSM integration Full Trust XBaps PS 3

Client Profile Data controls Accessibility Improvements Chart Controls Control Themes Hundreds of good bug fixes… Plus all the goodness of .NET4!

Dynamic Language Support MEF Globalization and NLS

improvements Managed / Native Code

interop More…

LOGO

WPF4

Windows 7FundamentalsFeatures for larger apps (like VS…)Tooling and workflow

LOGO

WPF for Windows 7

Multi-TouchTaskbarRibbonCommon dialogsFile Explorer presence and customizationMore…Use these with .NET and via XAML in WPF

LOGO

Multi-Touch in WPF

UIElement changes Thao tác các sự kiện (theo dõi và thông dịch viên)

hệ thống cảm ứng cử chỉ các sự kiện (double-tap và rollover)Raw touch input events (for going to the metal)

Multi-touch support in controls ScrollViewer cập nhật để chấp nhận những cử chỉ pan

Cập nhật cơ sở kiểm soát được cảm ứng đa nhận thứcMulti-capture support (for more than one contact point at time)

New multi-touch specific controls (e.g. ScatterView) Compatible with Surface SDK 2.0

LOGO

Surface Hardware

Windows 7

Surface Hardware

Windows VistaWindows 7

NativeWin32

Application

Touch Development Roadmap

WPF 3.5

Surface SDK1.0

Managed Wrapper and

Interop

Managed Wrapper and Interop

WinFormsApplication

Windows 7 ReleaseNET 4.0 / Surface 2.0 Release

WPF 3.5 SP1

WPF 4.0

Surface SDK 2.0

WPF Application

Surface Application

Multi-Touch Controls

Multi-Touch API

Surface Multi-Touch

Controls & API

Multi-Touch API

Multi-Touch API and Controls

LOGO

Multi-Touch Demo

demo

LOGO

WPF Taskbar Integration

Thumbnails toolbars

Icon overlays Progress bars Jumplists

With XAML Support

LOGO

WPF Ribbon

Features Fulfills office fluent UI licensing requirements Ribbon with resizing and layout behavior Ribbontabs Ribbongroups Ribbonapplicationmenu (Pearl) Quickaccesstoolbar Keytips Design time support

LOGO

WPF Tooling Improvements

RAD databindingEasier autolayoutMarkup extension

intellisenseMore property

editors

Visual Studio Designer

Blend3

Improvements to XAML authoring and workflowVSMBehaviorsTransition animationsPrototyping tools

LOGO

Fundamentals

Framework deploymentApplication deploymentImproved interopText clarityLayout rounding/snappingMedia improvementsUIA – for accessibility and TFSGraphics performanceLocalization

LOGO

Graphics

Composition API - give application authors fine grained control over caching rendered elements in video memory An input to a shader effect An image brush to fill any arbitrary 2D shape A texture on a 3D model

LOGO

Layout Rounding

Rounds an object’s coordinates on whole pixels

UseLayoutRounding="True"

LOGO

Client Profile Configurator Tool

Configurator tool http://www.codeplex.com/wpf/Release/ProjectReleases.aspx?ReleaseId=14962

Client profile Configuration designer “How To” series

http://windowsclient.net/wpf/wpf35/wpf-35sp1-start-here.aspx

LOGO

Controls

WPF4 DataGrid DatePicker VSM

Future Chart Controls More…

LOGO

WPF4 and VS10

Best way to take advantage of Windows 7Solid fundamentals: Deployment and

ubiquity, text clarity, interop, performance, controls, and completeness

Much improved tooling and designers with VS10 and Blend3

Do Download the beta, demos

and give us feedback

LOGO



[email protected]

Controls in WPF


LOGO

Kiến trúc của WPF

Application Services

Deployment Services

Data Binding

User Interface Services

XAML

Accessibility

Property System

Input & Eventing

Base Services

Document Services

Packaging Services

XPS Documents

Animation

2D

3D

AudioImagingText

VideoEffects

Visual Primitives

Core Presentation

Controls

Layout

Win

dow

s P

rese

ntat

ion

Fou

ndat

ion

XPS

View

er

LOGO

Agenda

Layout ControlsSome Controls in WPFStyle và TemplateAnimationDataBindingEventOther Demo

LOGOwww.themegallery.com

Layout controls

StackPanel

GridDockPanel

Canvas

WrapPanel

WPF Layout

Can use

LOGO

Layout Roundind

<Grid Height="100" Width="200"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Rectangle Grid.Row="0" Fill="DarkBlue"/> <Rectangle Grid.Row="1" Fill="DarkBlue"/> <Rectangle Grid.Row="2" Fill="DarkBlue"/></Grid>

http://blogs.msdn.com/blogfiles/text/WindowsLiveWriter/LayoutRounding_996/grid%20banding_2.png

LOGO

Layout

demo

LOGO

Controls TextBox

Button

ListBox

Radio Button

Label

<TextBox />

<Button/>

<ListBox />

< RadioButton />

<Label/>

LOGO

Ribbon Control

Quick Access Toolbar

Help

Office Button

Tab Contextual Tab Set

Contextual Tab

Group (aka “Chunk”)

Dialog Box Launcher

Ribbon SDK

LOGO

Windows Ribbon Controls

Categorized menus

Tabs and groups

Color pickers

Mini toolbar andcontextual menu

Dropdown galleries Tooltips

Check boxes

Spinners

Help buttonFont control

Group dialog launchers“In-Ribbon” galleries

Combo boxes

Buttons & split buttons

LOGO

Ribbon Demo

demo

LOGO

Style và Template

Style Tập giá trị các thuộc tính hiển thị của nhiều

controls khác nhau Là một dạng tài nguyên (resources) Các thuộc tính quan trọng của Style bao gồm

• BaseOn• TargetType• Setters• Triggers

LOGO

Style và Template

<Style TargetType="{x:Type Button}"> <Style.Triggers> <Trigger Property="IsPressed" Value="true"> <Setter Property="Foreground" Value="Blue"/> </Trigger> </Style.Triggers> <Setter Property="Background" Value="White"/> </Style>

LOGO

Style Demo

demo

LOGO

Style và Template

Template Button có màu sắc thay đổi -> Style Button có hình dạng thay đổi (hình tròn,

ellipse) ???Template

Cho phép thay đổi cách hiện thị vốn có của control

Thay đổi cấu trúc hay các thành phần cấu tạo của control.

LOGO

Style và Template

Template ControlTemplate

• Định nghĩa, thay đổi thể hiện của control

DataTemplate• Định nghĩa cách thức hiển thị của các đối tượng dữ

liệu

LOGO

Template Demo

demo

LOGO

Events và RoutedEvents

Visual Tree: cấu trúc phân lớp dạng hình cây của các phần tử trên giao diện

<Grid> <WrapPanel Background=“Pink”> <Button Name=“Button1”>Button1</Button> <Button Name=“Button2”>Button2</Button> </WrapPanel> <TextBlock Text=“Pink”/></Grid>

Grid

WrapPanel

Button Button

TextBlock

LOGO

Events và RoutedEvents

WPF mở rộng mô hình sự kiện chuẩn của .NET bằng việc đưa ra RoutedEvent

Window

StackPanel

Grid

CheckBox

Button

Canvas

Image

Image

TunnelPreview<Event>

Bubble<Event>

LOGO

Data Binding

Dependency Property DP là các thuộc tính có thể mang giá trị phụ

thuộc vào thuộc tính của đối tượng khác. Đặc điểm:

• Khi có sự thay đổi giá trị thì sẽ có các sự kiện tương ứng được kích hoạt

• Kế thừa giá trị thuộc tính

LOGO

Data

Logic

UI

Data Binding

SetMove

Load

Register Events

Register Events

Get Data

Set Data

Data Changed

GetData

Data Arrived

Update Collection

Create ListBoxItem

Add to ListBox

Data Binding

LOGO

Data Binding

One Way

Two Way

One Time

One Way To Source

Data BindingUpdate Target

Update Source

Validate Errors

Initialize Target

Convert Data

LOGO

Data Binding Demo

demo

LOGO

Animation

Animation on computer

Init Timer

Check timer intervals

Calculate next state

Render state

LOGO

Animation

Animation in WPF Handles all, manage timing system, calculate state,

redraw Can work with both C# / VB.NET or XAML

Which can animate in WPF? Animate objects by apply animation to theirs

properties. Properties must be DP Animated object must be inherited from

DependencyObject and implemented IAnimatable Objs have compatible with animation type.

LOGO

Animation

Animation in WPF [TypeName]Animation (17)

• From/To/By Animation

[TypeName]AnimationUsingKeyFrame (22)• KeyFrames

[TypeName]AnimationUsingPath (3)

LOGO

Animation Demo

demo

LOGO

Your Questions

?

?

?

??

?

http://www.sidfaiwu.com/blog/wp-content/uploads/2007/09/question_mark_3d.png

http://upload.wikimedia.org/wikipedia/commons/f/f3/Question_mark_alternate.png

LOGO

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Windows Presentation Foundation

Technology

Transcript of Windows Presentation Foundation