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.) <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 • Building Blocks • ToolTip • Thumb • Border • Popup • Scroll Viewer • Viewbox • Buttons • Lists • Menus and toolbars • Containers • Ranges • Editors • Document Viewers • Frame

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

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>