Microsoft PowerPoint - BaiGiang_ChuyenDePhatTrienPhanMem_Week2

8/7/2019 Microsoft PowerPoint - BaiGiang_ChuyenDePhatTrienPhanMem_Week2

http://slidepdf.com/reader/full/microsoft-powerpoint-baigiangchuyendephattrienphanmemweek2 1/27

9/19/2010

1

Topic 2: WPF

• Windows Presentation Foundation

• Benefits

• Tools

• Discussion of WPF applicability

What is WPF?

The goal of Windows Presentation Foundation (WPF) is to provide these advancesfor Windows. Included in version 3.0 of the Microsoft .NET Framework, WPF allows

building interfaces that incorporate documents, media, two- and three-dimensional

graphics, animations, Web-like characteristics, and much more.

Goal

∗ WPF is a new API for building Windows applications



9/19/2010

2

The Vision!

Addressing the Problem: What Windows

Presentation Foundation Provides

• Three aspects of what WPF provides stand

out as most important. They are:

– a unified platform for modern user interfaces,

– the ability for developers and designers to work

together,

– and a common technology for Windows and

Web browser user interfaces.



9/19/2010

3

What is WPF good for?

• To enable designers and developers to work together

• To allow an easy way to customize the look of controls withoutchanging its behaviour

• To allow 3D graphics more easily in Windows applications

• To allow an easy way to do animations in Windows applications

• To enable the creation of applications which scale nicely to

high resolution screens

Which of these have you worked

with?• GDI (20 years), GDI+, WinForms

• DirectX (11 years), Direct3D

• Quartz, DirectShow (8 years)

– Problems:

– Showing their age

– Each API is different

– Mixing APIs is challenging



9/19/2010

4

Next Gen

• WPF – replaces GDI

• Direct3D – large games, used by WPF

• Media Foundation – ultimately will replaceDirectShow

• MCML –markup language for Media CenterEdition applications

• XNA – small games

WPF• Compositing

– UI, Documents, Media, 3D, Browser, …

• Declarative programming with XAML markup

• For Designers and Developers

• Rewritten from scratch– Built on top of Direct3D

– Hardware accelerated

– Vector based

–

Resolution independent (1/96 inch)– Retained graphics



9/19/2010

5

Overview of WPF Architecture

• Most of WPF is written in

managed code

• milcore is the only unmanaged

component of WPF

XAML• Declarative object instantiation

• Not exclusive to WPF

• Separates UI and logic

– Common language for Designers and Developers

– Parallel development

– Localization, Branding

– Targeted UI (devices, users, …)

•

Tool support• Supports C# and VB.NET



9/19/2010

6

Benefits

• Markup/code-behind model (like ASP.NET)

• Excellent layout options and text flow

features

• Access to powerful graphics hardware

• Certain otherwise-impossible effects are

made easy (skewing and rotating textboxes,

etc.)

Tools• Cider

• XAML Pad

• 3D tools such as Lightwave can generate

XAML.– Electric Rain Zam 3D

– Mobiform Aurora

• Microsoft Expression– Graphics Designer

– Interactive Designer



9/19/2010

7

Comparisons: WPF vs. DirectX and GDI+

WPF Build Pipeline



9/19/2010

8

OUTLINE :

• XAML, Application, Navigation, Layout,

Content, Data Binding, Dependency Property,

Styles, Templates, Controls, Events, Shapes,

Documents, Imaging, BitmapEffects,

Animation, Media, Brushes, 3D

Basic topics in WPF• WPF code and XAML

• Property in XAML

• Layout

• Basic control

• Basic property

•

WPF Concepts



9/19/2010

9

1. WPF code and XAML: first app

• WPF code

– New consolse project

– Reffence: PresentationCore,

PresentationFramework, and WindowsBase

using System.Windows;

[STAThread]

static void Main(string[] args)

{

Window w = new Window();

w.Content = "hello"; (WindowsStyle,

ForeGround,BackGround..)

Application A = new Application();

A.Run(w);

}


From VS template



9/19/2010

10


From VS template

2. Basic Window properties• Titile

• WindowStyle

• Content

• Foreground

• Background

Text

Control (ex: replay by button)

Brush

SolidColorBrush GradientBrush TileBrush

LinearGradientBrush RadialGradientBrush



9/19/2010

11

SolidColorBrush

System.Windows.Media.Brushes

Color cr=new Color();

cr.B = cr.R = cr.G = 122;

cr.A = 255;

SolidColorBrush br = new SolidColorBrush(cr);

btn.Background = br;

GradientBrush



9/19/2010

12

LinearGradientBrush

• Button btn = new Button();

• btn.Content = "button";

• Point p1 = new Point(1, 1);

• Point p2 = new Point(0, 0);

• LinearGradientBrush br = newLinearGradientBrush(Colors.Blue,Colors.White, p1, p2);

• btn.Background =br;

RadialGradientBrush

RadialGradientBrush br = new

RadialGradientBrush(Colors.Blue, Colors.White);



9/19/2010

13

Config Brush from VS design

2. Handling Application Events• From Code

• From XAML



9/19/2010

14

2.Code-Behind and Object Names

• classes have a Name property

– <Button Name="myButton">Click Me</Button>

• Classes don’t have a Name property

– <Button x:Name="myButton">Click Me</Button>

2.Logical Trees and Visual Trees• logical tree comprises the elements as they

are listed in the XAML. These include panels

and controls you will generally use.

• visual tree includes the parts that make up

the controls and panels.

Example:



9/19/2010

15

2.Top-Level Elements• Three classes are used by WPF programs as

top-level elements

– Window

– Application

– Page



9/19/2010

16

3. Syntax: Object

One element

Nested- Multi elements

Empty element tag

3. Syntax: Attribute syntax• Object element syntax

• Attribute syntax

• Property Element Syntax

• Attached Property Syntax



9/19/2010

17

3. Syntax: Attribute syntax


• Property Element Syntax

– Some properties are too complex to be set

with a simple string

– Does not produce an object, sets a property

on an object



9/19/2010

18


• Attached Property Syntax

– Attached properties are a special type of

property that is defined in one class but used in

another

3. Syntax: Attribute syntax• Reviewing the XAML Syntax Forms



9/19/2010

19

5. XAML Namespace

• To create objects of these types, the XAML

parser must know where to find their

definitions

5. XAML Namespace: Classes from

Other Namespaces



9/19/2010

20

5. Markup Extension

• hook to a class outside the XAML

• class designed to be used by a markup extension is called an extension

class

– xmlns:local="clr-namespace:WpfApplication1“

– <TextBox Name="txt" Text="{local:MyMarkupExtension}">

</TextBox>

6. Layout: Layout in WPF• Before WPF, user interfaces generally

consisted of windows with statically placed

controls.

• WPF: layout system

• consist of one or more panels that contain

visual elements



9/19/2010

21

6. Layout Basic Principle

• Layout in Windows From

– Control have fix coordinates: Y,Y

– Dock, Anchor

– Using FlowLayoutPanel to arrange controls in a

flow panel

– Using TableLaoutPanel to arrange controls in

table format

6. Layout Basic Principle• XAML Layout

– Flow-based layout

• Support cootdinate

– Contain is organizaed into containers

– Resolution and size independent interfaces

– Automatically adjust if screen resolution changes



9/19/2010

22

6. XAML Layout Basic Principle

• Alignment describes how child elements

should be posisioned within parent’s space

– HorizontalAlignment: Left, Center, Right, or

Stretch

– VerticalAlignment: Top, Center, Bottom, or

Stretch

6. XAML Layout Basic Principle• Margin

– Distance between an elenment and its child or

peers

– Left, top, right, bottom, or uniform (Margin=“5”)

• Padding

– Enlarges a child element by specified thickness



9/19/2010

23

6. XAML Layout Basic Principle

6. Layout (containers)• Layout in WPF

– Alignment

– Padding and Margins

• Panels

• StackPanel

• WrapPanel

• DockPanel

• Grid

• Canvas• UniformGrid



9/19/2010

24

6. Layout Panels

• Canvas

– for specific (X,Y) positioning

6. StackPanel• StackPanel

– arranges content either horizontally or vertically



9/19/2010

25

6. WrapPanel

• WrapPanel

– arranges item sequentially

6. DockPanel• DockPanel

– anchor elements to the edges of the container



9/19/2010

26

• Grid

– table-style layout of rows and columns

6. Grid

6. UniformGrid• UniformGrid

– all rows and columns are the same size

– contains two properties, Rows and Columns



9/19/2010

7. Basic controls

• Types of containers

• Simplest controls

– Border

– CheckBox

– Button

– RadioButton

• Moe controls

4. Types of Containers

Microsoft PowerPoint - BaiGiang_ChuyenDePhatTrienPhanMem_Week2

Documents

Transcript of Microsoft PowerPoint - BaiGiang_ChuyenDePhatTrienPhanMem_Week2