WPF - Controls

1
WPF - Controls

• Prashanth Vijayaraghavan

2
Introduction

• Top parts of UI are built out of smaller
  components , Controls.
• The two core concepts for the entire control
  model.
• - Content model.
• - Templates.

3
Control principles

• Element composition.
• Rich content.
• Simple programming model.

4
Content Model(Cont..)
5
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 content
  model.

6
Content presenter
7
Content presenter(Cont..)
8
Content property naming pattern
9
Items
10
Children and child

• Content controls eg Button
• Layout controls eg StackPanel
• Render controls, eg Ellipse

11
Templates

• A template can be overridden to completely change
  its visual appearance.
• Types
• - Data Template.
• - Control Template.

12
Templates(Cont.)
ltButtongt ltButton.Templategt ltControlTemplate
TargetType'xType Button'gt ltRectangle
Fill'Red' Width'75' Height'23'
/gt lt/ControlTemplategt lt/Button.Templategt My
Button lt/Buttongt
13
Templates(Cont..)
14
Templates(Cont..)
15
Template Binding
16
Control Library

• Buttons
• Lists
• Menus and toolbars
• Containers
• Ranges
• Editors
• Document Viewers
• Frame

• Building Blocks
• ToolTip
• Thumb
• Border
• Popup
• Scroll Viewer
• Viewbox

17
Buttons

• IsChecked and IsThreeState for CheckBox and
  RadioButton.
• If IsThreeState is true, the
• user can toggle from checked
• to unchecked to Indeterminate

18
Buttons (Cont..)
19
List

• Four standard list controls- ListBox, ComboBox,
  ListView, TreeView.
• List controls can be filled from one of the two
  sources.
• 1. Items Property
• 2. ItemsSource Property.

20
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
ListBox - ItemsPanel

• ItemsPanel property can be used to change the
  layout of list Box.
• Example is default view if control panel in
  windows XP.
• Templates can also be used to change the layout
  without using the ItemsPanel property.

22
Windows Xp control panel
23
List box with a grid item layout
ltListBox ...gt ltListBox.ItemsPanelgt ltItemsPanelTemp
lategt ltUniformGrid Columns'2'/gt lt/ItemsPanelTempl
ategt lt/ListBox.ItemsPanelgt lt/ListBoxgt
24
List View

• List view derives from listBox
• It has ability to separate view properties from
  control properties.
• View property must be changed to grid view ad set
  properties on that object.

25
List View-View property
ltListViewgt ltListView.Viewgt ltGridViewgt ltGridView.Co
lumnsgt ltGridViewColumn Width'300' Header'Name' D
isplayMemberBinding'Binding PathName'
/gt ltGridViewColumn Width'100' Header'CanCode' Di
splayMemberBinding'Binding PathCanCode'
/gt lt/GridView.Columnsgt lt/GridViewgt lt/ListView.View
gt lt/ListViewgt
26
Tree view
ltTreeViewgt ltTreeViewItem Header'Coders'gt ltTreeVie
wItem Header'Don' /gt ltTreeViewItem
Header'Dharma' /gt lt/TreeViewItemgt ltTreeViewItem
Header'Noncoders'gt ltTreeViewItem Header'Chris'
/gt lt/TreeViewItemgt lt/TreeViewgt
27
New Lists using Templates
28
Menus and Toolbars

• Its logically similar to TreeView. Both derive
  from base type HeaderedItemsControl.
• All features of content model apply to menus and
  toolbars.
• Toolbars consume lots of space and occupies more
  space, but allow easy user access.

29
Menus
An alternative presentation for a menu
30
Menus (Cont..)
31
ToolBars
32
ToolBars(Cont..)
33
ToolBars(Cont..)

• ToolBar.OverflowMode property allow us to set
  overflow properties if the size of window is
  small.

34
Containers
35
Ranges

• Types of range control
• Slider.
• Scroll Bar.
• Progress Bar
• Minimum and maximum values are specified using
  Maximum and Minimum property.
• - We specify or determine the current value using
  Value property

36
Ranges(Cont..)
37
Editors

• PasswordBox
• TextBox
• RichTextBox
• InkCanvas.

38
TextBox

• Streaming model and collection model.
• Block elements occupy rectangular space. Eg.
  Paragraph.
• Inline Elements can span lines. Eg Span, Run and
  Bold.
• Text pointer and Text Range objects are used in
  the case of streaming model.

39
Text model
40
Rich TextBox
ltWindow ... Title'RichTextBox'gt ltRichTextBox
Name'_rtb'gt ltFlowDocument FontSize'24'gt ltParagra
phgtHellolt/Paragraphgt lt/FlowDocumentgt lt/RichTextBox
gt lt/Windowgt
41
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
Document Viewers

• FlowDocumentScrollViewer
• FlowDocumentPageViewer

43
Building BlocksToolTip
44
ToolTip(Cont.)
45
ToolTip(Cont.)
46
Border
47
Popup
48
Story Board
49
Digital Ink
ltGridgt       ltInkCanvas /gtlt/Gridgt
50
Digital Ink(Cont..)
ltGridgtltInkCanvasgt    ltImage Source"images/wood.
jpg" Opacity".4" Width"750" Height"550"
/gtlt/InkCanvasgtlt/Gridgt
51
DrawingAttributes class (Ink)
Name Description
Color Gets or sets the color of a Stroke.
FitToCurve Gets or sets a value that indicates whether Bezier smoothing is used to render the Stroke.
Height Gets or sets the height of the stylus used to draw the Stroke.
IgnorePressure Gets or sets a value that indicates whether the thickness of a rendered Stroke changes according the amount of pressure applied.
IsHighlighter Gets or sets a value that indicates whether the Stroke looks like a highlighter.
StylusTip Gets or sets the shape of the stylus used to draw the Stroke.
StylusTipTransform Gets or sets the Matrix that specifies the transformation to perform on the stylus' tip.
52
Editing with InkCanvas
Name Description
EraseByPointh Indicates that the pen erases part of a stroke when the pen intersects the stroke.
EraseByStroke Indicates that the pen erases an entire stroke when the pen intersects the stroke.
GestureOnly Indicates that the InkCanvas responds to gestures, and does not receive ink.
Ink Indicates that ink appears on the InkCanvas when the pen sends data to it.
InkAndGesture Indicates that the InkCanvas responds to gestures, and receives ink.
None Indicates that no action is taken when the pen sends data to the InkCanvas.
Select Indicates that the pen selects strokes and elements on the InkCanvas.
53
Code snippets using the Attributes
private void setInkBlue(object sender,
RoutedEventArgs e)      // set the
DefaultDrawingAttributes for a blue pen.      
myInkCanvas.DefaultDrawingAttributes.Color
Colors.Blue      myInkCanvas.DefaultDrawingAttri
butes.Height 2      myInkCanvas.DefaultDrawing
Attributes.Width 2
// eraseprivate void Erase(object sender,
RoutedEventArgs e)    // set the EditingMode
to EraseByPoint    myInkCanvas.EditingMode
InkCanvasEditingMode.EraseByPoint
54
Ink Selection
// selectionprivate void Select(object sender,
RoutedEventArgs e)   // set the EditingMode to
Select   myInkCanvas.EditingMode
InkCanvasEditingMode.Select
55
Reflection using visual Brush and opacity mask

• See www.xamlog.com for source code

56
Bitmap Effects

• Bevel
• Blur
• Drop Shadow
• Embossed
• Outer Glow

57
Spell checking with text box control
ltStackPanel Margin"20"gt    ltTextBlockgtTextBoxlt/T
extBlockgt    ltTextBox SpellCheck.IsEnabled"True"
gt        If the user types in a mispelled
word,    lt/TextBoxgt     ltTextBlock
Margin"0,10,0,0"gtRichTextBoxlt/TextBlockgt   
ltRichTextBox SpellCheck.IsEnabled"True"gt       
ltFlowDocumentgt            ltParagraphgt         
      the mispelled word is underlined with a
wavy red line.            lt/Paragraphgt       
lt/FlowDocumentgt    lt/RichTextBoxgtlt/StackPanelgt
58
The NY times reader app
59
Thank you

• Questions?
• References
• www.xamlog.com.
• Essential windows presentation.