1. Prashanth Vijayaraghavan
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.) <Button> <Button.Template>
<ControlTemplate TargetType='{x:Type Button}'>
<Rectangle Fill='Red' Width='75' Height='23' />
</ControlTemplate>
</Button.Template>
My Button
</Button>

13. Templates(Cont..)

14. Templates(Cont..)

15. Template Binding

16. Control Library Buttons Building Blocks Lists ToolTip
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
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns='2'/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

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
<GridView>
<GridView.Columns>
<GridViewColumn
Width='300'
Header='Name'
DisplayMemberBinding='{Binding Path=Name}' />
Width='100'
Header='CanCode'
DisplayMemberBinding='{Binding Path=CanCode}' />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>

26. Tree view <TreeView> <TreeViewItem Header='Coders'>
<TreeViewItem Header='Don' />
<TreeViewItem Header='Dharma' />
</TreeViewItem>
<TreeViewItem Header='Noncoders'>
<TreeViewItem Header='Chris' />
</TreeView>

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 <Window ... Title='RichTextBox'>
<RichTextBox Name='_rtb'>
<FlowDocument FontSize='24'>
<Paragraph>Hello</Paragraph>
</FlowDocument>
</RichTextBox>
</Window>

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 Blocks ToolTip:

44. ToolTip(Cont.)

45. ToolTip(Cont.)

46. Border

47. Popup

48. Story Board

49. Digital Ink
<Grid>        <InkCanvas /> </Grid>

50. Digital Ink(Cont..)
<Grid> <InkCanvas>     <Image Source="images/wood.jpg" Opacity=".4" Width="750" Height="550" /> </InkCanvas> </Grid>

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.DefaultDrawingAttributes.Height = 2;       myInkCanvas.DefaultDrawingAttributes.Width = 2; }
// erase private void Erase(object sender, RoutedEventArgs e) {     // set the EditingMode to EraseByPoint     myInkCanvas.EditingMode = InkCanvasEditingMode.EraseByPoint; }

54. Ink Selection
// selection private void Select(object sender, RoutedEventArgs e) {    // set the EditingMode to Select    myInkCanvas.EditingMode = InkCanvasEditingMode.Select; }

55. Reflection using visual Brush and opacity mask
See for source code

56. Bitmap Effects
Bevel
Blur
Drop Shadow
Embossed
Outer Glow

57. Spell checking with text box control
<StackPanel Margin="20">     <TextBlock>TextBox</TextBlock>     <TextBox SpellCheck.IsEnabled="True">         If the user types in a mispelled word,     </TextBox>     <TextBlock Margin="0,10,0,0">RichTextBox</TextBlock>     <RichTextBox SpellCheck.IsEnabled="True">         <FlowDocument>             <Paragraph>                 the mispelled word is underlined with a wavy red line.             </Paragraph>         </FlowDocument>     </RichTextBox> </StackPanel>

58. The NY times reader app

59. Thank you
Questions? References: Essential windows presentation.