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)
52
Editing with 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.