1 / 59

WPF - Controls

WPF - Controls. Prashanth Vijayaraghavan. Introduction. Top parts of UI are built out of smaller components , Controls. The two core concepts for the entire control model. - Content model. - Templates. Control principles. Element composition. Rich content.

ruthcunningham
Download Presentation

WPF - Controls

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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>

More Related