Windows Presentation Foundation pot

HO CHI MINH UNIVERSITY OF INDUSTRYWPF Declarative programming with XAML markup For Designers and Developers Rewritten from scratch – Built on top of Direct3D – Hardware accelerated

Trang 1

What's New in WPF Version 4.5?

Trang 2

HO CHI MINH UNIVERSITY OF INDUSTRY

Windows Presentation Foundation

Trang 3

What is WPF?

WPF is a new API for building Windows applications

The goal of Windows Presentation Foundation (WPF) is to provide these advances for Windows Included in version 4.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

Trang 4

What Windows Presentation Foundation Provides?

Three most important:

 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

Trang 5

What is WPF good for?

To enable designers and developers to work together

To allow an easy way to customize the look of controls without changing its behavior

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

Trang 6

Which of these UI 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

Trang 7

Next Gen

 WPF – replaces GDI

 Direct3D – large games, used by WPF

 Media Foundation – ultimately will replace DirectShow

 MCML –markup language for Media Center Edition applications

 XNA – small games

Trang 8

WPF

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

Trang 10

Managed Code:

Code write in net framework environment is call Managed code, they will be executed direct from CLR(Common Language Runtime) CLR will manage memory, security problem, debugging…and other useful features

Trang 11

Unmanaged Code

Not in net framework, that is not controlled by CLR, Unmanaged Code will

bee execute with 2 wrapper class support:

CCW (COM Callable Wrapper)

and

RCW (Runtime Callable Wrapper)

Trang 12

CCW (COM Callable Wrapper)

Trang 13

RCW (Runtime Callable Wrapper)

Trang 14

 Declarative object instantiation

 Not exclusive to WPF

 Separates UI and logic

– Common language for Designers and Developers

• Demo: Blend and VS – Parallel development

Trang 15

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

Trang 16

Tools

• Cider

• XAML Pad

• 3D tools such as Light wave can generate XAML

– Electric Rain Zam 3D

Trang 17

Comparisons: WPF vs DirectX and GDI+

Trang 18

WPF Build Pipeline

Trang 19

Basic topics in WPF

 WPF code and XAML

 Property & object in XAML: syntax

 Layout

 Basic control

 Basic property

 WPF Concepts

Trang 20

1 WPF code and XAML: first app

– New consoles project (or Windows Apps)

– Reference: PresentationCore, PresentationFramework, and WindowsBase

How to create this window?

Trang 21

[ STAThread ]//Must insert before Main

public static void Main( string [] aargs){

Window w = new Window ();

btn.Width = btn.Height = 100;

w.Content = btn;

A.Run(w);}

}

Trang 22

1 WPF code and XAML: first app

From VS template

App is inherited from Application

Window1 is inherited from Window

Trang 24

From VS template Write 2 example: code and Xaml

Trang 25

From VS template Write 2 example: code and Xaml

Trang 26

2 Basic Window properties

Trang 30

SolidColorBrush

XAML

Trang 31

GradientBrush

Trang 32

LinearGradientBrush

LinearGradientBrush

rect1.Fill = br;

Trang 34

LinearGradientBrush

XAML

Trang 35

RadialGradientBrush br = new

RadialGradientBrush(Colors.Blue,Colors.White);

Trang 36

RadialGradientBrush

RadialGradientBrush br = new RadialGradientBrush ( Colors Blue, Colors Yellow);

rect1.Fill = br;

Trang 37

RadialGradientBrush br = new RadialGradientBrush ();

Trang 38

XAML

RadialGradientBrush

Trang 39

ImageBrush myBrush = new ImageBrush ();

myBrush.ImageSource = new BitmapImage (

new Uri ( @"E:\Pictures\IC151762.jpg" , UriKind Relative));

rect1.Fill = myBrush;

ImageBrush

Trang 40

Config Brush from VS design

Trang 41

2 Handling Application Events

From Code

Trang 42

2 Handling Application Events

From XAML

Trang 43

2.Code-Behind and Object Names

<Button Name="myButton">Hello</Button>

 Classes have a Name property

 Classes don’t have a Name property

< Button x : Name ="myButton"> Hello </ Button >

Trang 44

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.

Trang 46

2.Top-Level Elements

 Three classes are used by WPF programs as top-level

elements

– Application – Page

– Window

• Only one Content

Trang 47

3 Syntax for Object

One element

Empty element tag

Trang 48

3 Syntax for Object

Nested- Multi elements

Logical tree with four WFP

objects

XAML Tree With Four Elements

Trang 49

3 Syntax for Attribute

Object element syntax

– Like object syntax

• <button> FIT HUI </button>

Attribute syntax

Property Element Syntax

Attached Property Syntax

Trang 50

Trang 51

– Some properties are too complex to be set with a simple string

– Does not produce an object, sets a property on an object

Trang 52

< Button >

< Button.Background >

< LinearGradientBrush StartPoint ="0,0" EndPoint ="1,1">

< GradientStop Color ="Red" Offset ="0.0"/>

< GradientStop Color ="Blue" Offset ="1.0"/>

</ LinearGradientBrush >

</ Button.Background >

Click me

</ Button >

Trang 53

Attached Property Syntax

– Attached properties are a special type of property that is defined in one class but used in another

Trang 54

Reviewing the XAML Syntax

Trang 55

< StackPanel >

< StackPanel.Background >

< RadialGradientBrush >

< GradientStop Color="Black" Offset="0" />

< GradientStop Color="#FF56933A" Offset="1" />

< GradientStop Color="#FF2B2B2B" Offset="0.169" />

< TextBlock Grid.RowSpan="2" Height="23" />

< Button Content="Button" Grid.Row="1">

< Button.BorderBrush >

< LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

< GradientStop Color="Black" Offset="0" />

< GradientStop Color="#FFB44E4E" Offset="1" />

Trang 56

5 XAML Namespace

To create objects of these types, the XAML parser must know where to find their definitions

Trang 57

5 XAML Namespace

Trang 58

5 XAML Namespace: Classes from Other Namespaces

Trang 59

Background = new LinearGradientBrush ( Colors Yellow, Colors Blue,

new Point (0,0), new Point (1,1));

}

} Create MyButton extend from class Button

Trang 60

xmlns : local ="clr-namespace:StudyWPFApplication"

Declare prefix:

In XAML

< local : MyButton Content ="Hello" ></ local : MyButton >

Instantiate the button:

Trang 61

5 Markup Extension

Trang 62

Trang 63

 Layout in Windows From

 Control have fix coordinates: X,Y

 Dock, Anchor

 Using FlowLayoutPanel to arrange controls in a flow panel

 Using TableLaoutPanel to arrange controls in table format

6 Layout Basic Principle

Trang 64

6 Layout Basic Principle

Flow-based layout

• Support coordinate

Contain is organizaed into containers

Resolution and size independent interfaces

Automatically adjust if screen resolution changes

Trang 66

6 XAML Layout: Align & Padding

Alignment describes how child elements should be posisioned within

parent’s space

HorizontalAlignment: Left, Center, Right, or Stretch

VerticalAlignment: Top, Center, Bottom, or Stretch

Trang 67

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

Trang 68

Trang 69

6 Layout Panels

 Canvas

for specific (X,Y) positioning

Trang 70

6 Layout Panels

 StackPanel

Arranges content either horizontally or vertically

Trang 71

6 Layout Panels

 WrapPanel

Arranges item sequentially

Trang 72

6 Layout Panels

 DockPanel

Anchor elements to the edges of the container

Trang 73

6 Layout Panels

 Grid

Table-style layout of rows and columns

Trang 74

6 Layout Panels

 UniformGrid

All rows and columns are the same size

Contains two properties, Rows and Columns

Trang 76

 Types of Containers

Trang 77

 Types of Containers : Example

Trang 78

Trang 79

7.1 Border control

Container control can contains controls

Without border  using Border control

Accept single child control

Display border around child control

Trang 80

< Border Margin ="20,20,20,20" BorderBrush ="Blue" BorderThickness ="1,1,2,2"

Trang 81

< RadioButton GroupName ="Office"

Content ="Microsoft Office 2010"

IsChecked ="True"/>

< RadioButton GroupName ="Office"

Content ="Open Office"/>

</ StackPanel >

 RadioButton Properties

GroupName

IsChecked

Trang 82

< CheckBox IsChecked ="True" Content ="Rất Hài

Lòng" Height ="21" Width ="145"></ CheckBox >

< CheckBox Content ="Hài Lòng" Height ="21" Width ="145"></ CheckBox >

< CheckBox Content ="Tạm Chấp Nhận" Height ="21" Width ="145"></ CheckBox >

< CheckBox Content ="Không Chấp Nhận" Height ="21" Width ="145"></ CheckBox >

</ StackPanel >

</ Border >

Trang 83

7.1 Basic Controls: Text, date, misc

TextBlock, Label, Textbox, PasswordBox

• View – edit text

TextBlock: Static text, standard font properties: FontFamily, FontSize, FontStyle,

FontWeight: for using simple static text

• <LineBreak/> to inject line break

• Using <Run> : each run have its own formatting

< TextBlock > FIT < LineBreak/ > HUI

< Run Background ="Blue" FontSize ="20"

Foreground ="red"> Hello </ Run > H.a.you?

</ TextBlock >

Trang 84

7.1 Basic Controls: Text, date, misc

How to fill background for result text???

And How to change font style when mouse down???

Trang 85

7.1 Basic Controls: Label

When you want to display text by itself use the TextBlock The benefit is a

light, performant way to display text

When you want to associate text with another control like a TextBox use

the Label control The benefits are access keys and references to target

control

Trang 86

7.1 Basic Controls: Label

<Label Target ="{Binding

ElementName =txtb, Mode =Default}">

Nhập _b</Label>

</StackPanel>

Trang 87

7.1 Basic Controls: Textbox control

Trang 88

7.1 Basic Controls: Textbox control

Trang 89

7.1 Basic Controls: Passwordbox

Like Textbox

Property: PasswordChar

No Text property, rereive Password

Do not support clipboard

<PasswordBox Name="txtPassword" ToolTip="Password"

PasswordChar="*" Height="30" Width="224" />

Trang 90

7.1 Date control: Calendar control

Tag <Calendar>

SelectionMode: select single day, range date

DiplayMode: Month, Year, Decade

BlackOutDates : set black out dates

DisplayDateStart, DisplayDateEnd: range of available dates

Trang 91

7.1 Date control: Calendar control

Trang 92

7.1 Date control: DatePicker control

Allow to select a single date using dropdown calendar

IsDropDownOpen

SelectedDateFormat, BlackOutDates, DisplayDateStart, DisplayDateEnd

SelectedDateChanged event

Trang 93

7.1 Date control: DatePicker control

Trang 94

Change Value, or using IsInDeterminate property

Check out System.Windows.Threading.DispatcherTimer to run code at regular intervals

• Demo

Image

Source

Stretch

Trang 95

7.1 Miscellaneous control

StackPanel >

< ProgressBar Minimum ="0" Maximum ="100" Name ="prb"

< Image Source ="E:\Pictures\a.jpg" Height ="120.83"

< Button Click ="btn_Click" > Demo progressbar </ Button >

< Button Click ="btn1_Click" > Demo gressbar –

IsInDetermine </ Button >

</ StackPanel >

XAML

Trang 96

System.Windows.Threading DispatcherTimer timer;

private void btn_Click( object sender, RoutedEventArgs e)

{

timer= new System.Windows.Threading DispatcherTimer ();

timer.Tick += new EventHandler (my_tick);

timer.Interval = new TimeSpan (0, 0, 1);

Trang 97

Example code 2

private void btn_Click

( object sender, RoutedEventArgs e) {

Trang 98

Display media

Souce property: URI

LoadedBehavior="Manual“ for using control methods

IsMuted

Position, Volume

Call Play, Pause, Stop methods

Invisible until playing video file

Trang 100

<Button Click ="Pause_Click" Margin ="3" Padding ="6,3">Pause</Button>

</StackPanel>

Example 2 - XAML

Tiêu đề	Windows Presentation Foundation pot
Trường học	Ho Chi Minh University of Industry
Thể loại	Thiết án
Thành phố	Ho Chi Minh City

Định dạng
Số trang	164
Dung lượng	6,71 MB