wp f controls

8/14/2019 Wp f Controls

1/59

WPF - Controls

Prashanth Vijayaraghavan


2/59

Introduction

Top parts of UI are built out of smallercomponents , Controls.

The two core concepts for the entire controlmodel.

- Content model.- Templates.


3/59

Control principles

Element composition.

Rich content.

Simple programming model.


4/59

Content Model(Cont..)


5/59

Content Model(Cont..)

Uses CLR type system.

Button chrome element displays background. Text block used to display text content.

Content presenter is the workhorse if the contentmodel.


6/59

Content presenter


7/59

Content presenter(Cont..)


8/59

Content property naming pattern


9/59

Items


10/59

Children and child

Content controls eg: Button

Layout controls eg: StackPanel

Render controls, eg: Ellipse


11/59

Templates

A template can be overridden to completelychange its visual appearance.

Types:

- Data Template.

- Control Template.


12/59

Templates(Cont.)

My Button


13/59

Templates(Cont..)


14/59

Templates(Cont..)


15/59

Template Binding


16/59

Control Library Buttons

Lists

Menus and toolbars Containers

Ranges

Editors Document Viewers

Frame

Building Blocks

ToolTip

Thumb

Border

Popup

Scroll Viewer Viewbox


17/59

Buttons IsChecked and IsThreeState for CheckBox and

RadioButton.

If IsThreeState is true, the

user can toggle from checked

to unchecked to Indeterminate


18/59

Buttons (Cont..)


19/59

List Four standard list controls- ListBox, ComboBox,

ListView, TreeView.

List controls can be filled from one of the twosources.

1. Items Property

2. ItemsSource Property.


20/59

ListBox and ComboBox We can change the look of the control using

templates.

Combo Box is list box with dropdown.

The two basic list types: ListBox and

ComboBox


21/59

ListBox - ItemsPanel ItemsPanel property can be used to change the

layout of list Box.

Example is default view if control panel inwindows XP.

Templates can also be used to change the layoutwithout using the ItemsPanel property.


22/59

Windows Xp control panel


23/59

List box with a grid item layout


24/59

List View

List view derives from listBox

It has ability to separate view properties fromcontrol properties.

View property must be changed to grid view adset properties on that object.


25/59

List View-View property


26/59

Tree view


27/59

New Lists using Templates


28/59

Menus and Toolbars

Its logically similar to TreeView. Both derivefrom base type: HeaderedItemsControl.

All features of content model apply to menusand toolbars.

Toolbars consume lots of space and occupies

more space, but allow easy user access.


29/59

Menus

An alternative presentation for a menu


30/59

Menus (Cont..)


31/59

ToolBars


32/59

ToolBars(Cont..)


33/59

ToolBars(Cont..)

ToolBar.OverflowMode property allow us to setoverflow properties if the size of window is

small.


34/59

Containers


35/59

Ranges

Types of range control

Slider.

Scroll Bar.

Progress Bar

- Minimum and maximum values are specifiedusing Maximum and Minimum property.

- We specify or determine the current value usingValue property


36/59

Ranges(Cont..)


37/59

Editors

PasswordBox

TextBox

RichTextBox

InkCanvas.


38/59

TextBox Streaming model and collection model.

Block elements occupy rectangular space. Eg.

Paragraph.

Inline Elements can span lines. Eg: Span, Runand Bold.

Text pointer and Text Range objects are used inthe case of streaming model.


39/59

Text model


40/59

Rich TextBox

Hello


41/59

Rich TextBox(Cont..)

TextOffset example, showing how the start

and end tokens of an element

occupy space in the text object model

Simplified markup for text, with the corresponding offsets of each item


42/59

Document Viewers

FlowDocumentScrollViewer

FlowDocumentPageViewer


43/59

Building Blocks

ToolTip:


44/59

ToolTip(Cont.)


45/59

ToolTip(Cont.)


46/59

Border


47/59

Popup


48/59

Story Board


49/59

Digital Ink


50/59

Digital Ink(Cont..)


51/59

DrawingAttributesclass (Ink)Name Description

ColorGets or sets the color of aStroke.

FitToCurve

Gets or sets a value thatindicates whether Beziersmoothing is used to renderthe Stroke.

HeightGets or sets the height of thestylus used to draw the Stroke.

IgnorePressure

Gets or sets a value thatindicates whether thethickness of a rendered Strokechanges according the amountof pressure applied.

IsHighlighterGets or sets a value thatindicates whether the Strokelooks like a highlighter.

StylusTipGets or sets the shape of thestylus used to draw the Stroke.

StylusTipTransformGets or sets the Matrix thatspecifies the transformation to

perform on the stylus' tip.


52/59

Editing with InkCanvas

Name Description

EraseByPointhIndicates that the pen erases partof a stroke when the pen intersectsthe stroke.

EraseByStrokeIndicates that the pen erases anentire stroke when the pen

intersects the stroke.

GestureOnlyIndicates that the InkCanvasresponds to gestures, and does notreceive ink.

InkIndicates that ink appears on theInkCanvas when the pen sendsdata to it.

InkAndGestureIndicates that the InkCanvasresponds to gestures, and receivesink.

NoneIndicates that no action is takenwhen the pen sends data to theInkCanvas.

Select

Indicates that the pen selects

strokes and elements on theInkCanvas.


53/59

Code snippets using the Attributes

// erase

private void Erase(object sender, RoutedEventArgs e)

{// set the EditingMode to EraseByPoint

myInkCanvas.EditingMode = InkCanvasEditingMode.EraseByPoint;

}

private void setInkBlue(object sender, RoutedEventArgs e)

{

// set the DefaultDrawingAttributes for a blue

pen. myInkCanvas.DefaultDrawingAttributes.Color = Colors.Blue;

myInkCanvas.DefaultDrawingAttributes.Height = 2;

myInkCanvas.DefaultDrawingAttributes.Width = 2;}


54/59

Ink Selection// selection

private void Select(object sender, RoutedEventArgs e)

{

// set the EditingMode to SelectmyInkCanvas.EditingMode = InkCanvasEditingMode.Select;

}


55/59

Reflection using visual Brush and

opacity mask

Seewww.xamlog.comfor source code
http://www.xamlog.com/http://www.xamlog.com/


56/59

Bitmap Effects

Bevel

Blur

Drop Shadow

Embossed

Outer Glow


57/59

Spell checking with text box

control

TextBox

If the user types in a mispelled word,

RichTextBox

the mispelled word is underlined with a wavy red line.


58/59

The NY times reader app


59/59

Thank you

Questions?

References:www.xamlog.com.

Essential windows presentation.
http://www.xamlog.com/http://www.xamlog.com/

wp f controls

Documents