Windows Presentation Foundation Advanced Controls

553 views

Published on

Learn how to use Windows Presentation Foundation controls that enable users to select an item from a list, how to add menus to applications and controls that enable you to better organize windows.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
553
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • Windows Presentation Foundation Advanced Controls

    1. 1. WPF: Advanced Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    2. 2. Objectives Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    3. 3. Objectives• Learn how to use controls that enable users to select an item from a list Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    4. 4. Objectives• Learn how to use controls that enable users to select an item from a list• See how to add menus to applications Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    5. 5. Objectives• Learn how to use controls that enable users to select an item from a list• See how to add menus to applications• Explore controls that enable you to better organize windows Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    6. 6. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    7. 7. Agenda• List Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    8. 8. Agenda• List Controls• Menus Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    9. 9. Agenda• List Controls• Menus• Layout Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    10. 10. ListBox Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    11. 11. ListBox• Enables user to select one or more items from a list of available choices Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    12. 12. ListBox• Enables user to select one or more items from a list of available choices• If list cannot display all items at once, a vertical scroll bar appears automatically Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    13. 13. ListBox• Enables user to select one or more items from a list of available choices• If list cannot display all items at once, a vertical scroll bar appears automatically• Can add and remove items at design time and at runtime Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    14. 14. ListBox• Enables user to select one or more items from a list of available choices• If list cannot display all items at once, a vertical scroll bar appears automatically• Can add and remove items at design time and at runtime• SelectionChanged event occurs when you select an item Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    15. 15. Populate a ListBox Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    16. 16. Populate a ListBox• In XAML Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    17. 17. Populate a ListBox• In XAML <ListBox Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsListBox" SelectionChanged= "expertsListBox_SelectionChanged"> <ListBoxItem Content="Robert Green" /> <ListBoxItem Content="Ken Getz" /> … </ListBox> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    18. 18. Populate a ListBox• In XAML <ListBox Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsListBox" SelectionChanged= "expertsListBox_SelectionChanged"> <ListBoxItem Content="Robert Green" /> <ListBoxItem Content="Ken Getz" /> … </ListBox>• In code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    19. 19. Populate a ListBox• In XAML <ListBox Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsListBox" SelectionChanged= "expertsListBox_SelectionChanged"> <ListBoxItem Content="Robert Green" /> <ListBoxItem Content="Ken Getz" /> … </ListBox>• In code expertsListBox.Items.Add("Robert Green") Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    20. 20. Populate a ListBox• In XAML <ListBox Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsListBox" SelectionChanged= "expertsListBox_SelectionChanged"> <ListBoxItem Content="Robert Green" /> <ListBoxItem Content="Ken Getz" /> … </ListBox>• In code expertsListBox.Items.Add("Robert Green")• Collection Editor: Items dialog box Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    21. 21. ListBox Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    22. 22. ListBox• Familiar properties Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    23. 23. ListBox• Familiar properties • SelectedIndex returns index of first item in current selection or -1 if selection is empty Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    24. 24. ListBox• Familiar properties • SelectedIndex returns index of first item in current selection or -1 if selection is empty • SelectedItem returns first item in current selection or null if selection is empty Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    25. 25. ListBox• Familiar properties • SelectedIndex returns index of first item in current selection or -1 if selection is empty • SelectedItem returns first item in current selection or null if selection is empty • SelectedValue returns value of SelectedItem Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    26. 26. ListBox• Familiar properties • SelectedIndex returns index of first item in current selection or -1 if selection is empty • SelectedItem returns first item in current selection or null if selection is empty • SelectedValue returns value of SelectedItem• SelectedItem returns element type Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    27. 27. ListBox• Familiar properties • SelectedIndex returns index of first item in current selection or -1 if selection is empty • SelectedItem returns first item in current selection or null if selection is empty • SelectedValue returns value of SelectedItem• SelectedItem returns element type • ListBoxItem Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    28. 28. ListBox• Familiar properties • SelectedIndex returns index of first item in current selection or -1 if selection is empty • SelectedItem returns first item in current selection or null if selection is empty • SelectedValue returns value of SelectedItem• SelectedItem returns element type • ListBoxItem • Image Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    29. 29. ListBox• Familiar properties • SelectedIndex returns index of first item in current selection or -1 if selection is empty • SelectedItem returns first item in current selection or null if selection is empty • SelectedValue returns value of SelectedItem• SelectedItem returns element type • ListBoxItem • Image • StackPanel Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    30. 30. ListBox• Familiar properties • SelectedIndex returns index of first item in current selection or -1 if selection is empty • SelectedItem returns first item in current selection or null if selection is empty • SelectedValue returns value of SelectedItem• SelectedItem returns element type • ListBoxItem • Image • StackPanel • String Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    31. 31. ListBox Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    32. 32. ListBox• Selection Mode determines whether users can select more than one item Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    33. 33. ListBox• Selection Mode determines whether users can select more than one item • Single – Can select one item at a time (default) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    34. 34. ListBox• Selection Mode determines whether users can select more than one item • Single – Can select one item at a time (default) • Multiple – Can select more than one item at a time Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    35. 35. ListBox• Selection Mode determines whether users can select more than one item • Single – Can select one item at a time (default) • Multiple – Can select more than one item at a time • Extended – Can select more than one consecutive or non-consecutive item at a time Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    36. 36. ListBox• Selection Mode determines whether users can select more than one item • Single – Can select one item at a time (default) • Multiple – Can select more than one item at a time • Extended – Can select more than one consecutive or non-consecutive item at a time• ListBox and ListBoxItem are container Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    37. 37. DEMO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    38. 38. DEMO• ListBox Examples Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    39. 39. ComboBox Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    40. 40. ComboBox• Enables users to select from a drop-down list of available choices Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    41. 41. ComboBox• Enables users to select from a drop-down list of available choices• Consists of selection box that displays currently selected value and drop-down list that contains values that users can select Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    42. 42. ComboBox• Enables users to select from a drop-down list of available choices• Consists of selection box that displays currently selected value and drop-down list that contains values that users can select• Populate same way as ListBox Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    43. 43. ComboBox• Enables users to select from a drop-down list of available choices• Consists of selection box that displays currently selected value and drop-down list that contains values that users can select• Populate same way as ListBox • XAML, Collection Editor: Items dialog box, code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    44. 44. IsEditable and IsReadOnly Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    45. 45. IsEditable and IsReadOnly• IsEditable enables or disables editing of text in text box portion of ComboBox Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    46. 46. IsEditable and IsReadOnly• IsEditable enables or disables editing of text in text box portion of ComboBox• IsReadOnly enables or disables selection- only mode, in which contents of text box are selectable but not editable Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    47. 47. IsEditable and IsReadOnly• IsEditable enables or disables editing of text in text box portion of ComboBox• IsReadOnly enables or disables selection- only mode, in which contents of text box are selectable but not editable• Both are false by default, so you can’t enter or select text Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    48. 48. IsEditable and IsReadOnly• IsEditable enables or disables editing of text in text box portion of ComboBox• IsReadOnly enables or disables selection- only mode, in which contents of text box are selectable but not editable• Both are false by default, so you can’t enter or select text• Turn on IsEditable to enable text box Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    49. 49. IsEditable and IsReadOnly• IsEditable enables or disables editing of text in text box portion of ComboBox• IsReadOnly enables or disables selection- only mode, in which contents of text box are selectable but not editable• Both are false by default, so you can’t enter or select text• Turn on IsEditable to enable text box• Turn on IsReadOnly to enable typing in Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    50. 50. DEMO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    51. 51. DEMO• ComboBox Examples Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    52. 52. TreeView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    53. 53. TreeView• Display information in a hierarchical manner using nodes that can expand and collapse Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    54. 54. TreeView• Display information in a hierarchical manner using nodes that can expand and collapse• Populate using XAML, Collection Editor: Items dialog box, code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    55. 55. TreeView• Display information in a hierarchical manner using nodes that can expand and collapse• Populate using XAML, Collection Editor: Items dialog box, code• TreeView contains TreeViewItems, which contain header and collection of items Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    56. 56. Populate a TreeView in XAML Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    57. 57. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    58. 58. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    59. 59. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    60. 60. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    61. 61. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    62. 62. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    63. 63. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    64. 64. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    65. 65. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> <TreeViewItem Header="H-R" Tag="Group"> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    66. 66. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> <TreeViewItem Header="H-R" Tag="Group"> <TreeViewItem Header="Don Kiely"/> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    67. 67. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> <TreeViewItem Header="H-R" Tag="Group"> <TreeViewItem Header="Don Kiely"/> </TreeViewItem> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    68. 68. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> <TreeViewItem Header="H-R" Tag="Group"> <TreeViewItem Header="Don Kiely"/> </TreeViewItem> <TreeViewItem Header="S-Z" Tag="Group"> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    69. 69. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> <TreeViewItem Header="H-R" Tag="Group"> <TreeViewItem Header="Don Kiely"/> </TreeViewItem> <TreeViewItem Header="S-Z" Tag="Group"> <TreeViewItem Header="Dan Wahlin"/> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    70. 70. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> <TreeViewItem Header="H-R" Tag="Group"> <TreeViewItem Header="Don Kiely"/> </TreeViewItem> <TreeViewItem Header="S-Z" Tag="Group"> <TreeViewItem Header="Dan Wahlin"/> <TreeViewItem Header="Doug Ware"/> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    71. 71. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> <TreeViewItem Header="H-R" Tag="Group"> <TreeViewItem Header="Don Kiely"/> </TreeViewItem> <TreeViewItem Header="S-Z" Tag="Group"> <TreeViewItem Header="Dan Wahlin"/> <TreeViewItem Header="Doug Ware"/> </TreeViewItem> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    72. 72. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> <TreeViewItem Header="H-R" Tag="Group"> <TreeViewItem Header="Don Kiely"/> </TreeViewItem> <TreeViewItem Header="S-Z" Tag="Group"> <TreeViewItem Header="Dan Wahlin"/> <TreeViewItem Header="Doug Ware"/> </TreeViewItem> </TreeView> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    73. 73. Populate a TreeView in XAML<TreeView Margin="5" Grid.Row="1" Grid.Column="0" Name="expertsTreeView" SelectedItemChanged= "expertsTreeView_SelectedItemChanged"> <TreeViewItem Header="A-G" Tag="Group"> <TreeViewItem Header="Ken Getz"/> <TreeViewItem Header="Robert Green"/> </TreeViewItem> <TreeViewItem Header="H-R" Tag="Group"> <TreeViewItem Header="Don Kiely"/> </TreeViewItem> <TreeViewItem Header="S-Z" Tag="Group"> <TreeViewItem Header="Dan Wahlin"/> <TreeViewItem Header="Doug Ware"/> </TreeViewItem> </TreeView> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    74. 74. TreeView Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    75. 75. TreeView• SelectedItemChanged event occurs when you select a node Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    76. 76. TreeView• SelectedItemChanged event occurs when you select a node • Can check in code to see if user selected a grouping node or an item node Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    77. 77. TreeView• SelectedItemChanged event occurs when you select a node • Can check in code to see if user selected a grouping node or an item node• Can contain text, images, other elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    78. 78. DEMO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    79. 79. DEMO• TreeView Examples Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    80. 80. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    81. 81. Agenda• List Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    82. 82. Agenda• List Controls• Menus Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    83. 83. Agenda• List Controls• Menus• Layout Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    84. 84. Menu Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    85. 85. Menu• Modern look applications still use menus Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    86. 86. Menu• Modern look applications still use menus• Can place menu where you want, but traditionally in upper left Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    87. 87. Menu• Modern look applications still use menus• Can place menu where you want, but traditionally in upper left • Can use Grid or DockPanel Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    88. 88. Menu• Modern look applications still use menus• Can place menu where you want, but traditionally in upper left • Can use Grid or DockPanel• Set IsMainMenu property to true to indicate top-level menu Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    89. 89. MenuItem Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    90. 90. MenuItem• Container control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    91. 91. MenuItem• Container control• Header property contains menu item text Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    92. 92. MenuItem• Container control• Header property contains menu item text• InputGestureText property defines keyboard shortcut Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    93. 93. MenuItem• Container control• Header property contains menu item text• InputGestureText property defines keyboard shortcut• Icon property defines image Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    94. 94. MenuItem• Container control• Header property contains menu item text• InputGestureText property defines keyboard shortcut• Icon property defines image• Click event occurs when user selects menu item Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    95. 95. Define a Menu in XAML Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    96. 96. Define a Menu in XAML<MenuItem Header="File"> <MenuItem Header="New" Name="newMenuItem" InputGestureText="Ctrl+N" Click="newMenuItem_Click"> <MenuItem.Icon> <Image Source= Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    97. 97. Define a Menu in XAML<MenuItem Header="File"> <MenuItem Header="New" Name="newMenuItem" InputGestureText="Ctrl+N" Click="newMenuItem_Click"> <MenuItem.Icon> <Image Source= "/Images/NewDocumentHS.png" /> </MenuItem.Icon> </MenuItem> <MenuItem Header="Open" Name="openMenuItem" InputGestureText="Ctrl+O" Click="openMenuItem_Click"> <MenuItem.Icon> <Image Source= Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    98. 98. Define a Menu in XAML<MenuItem Header="File"> <MenuItem Header="New" Name="newMenuItem" InputGestureText="Ctrl+N" Click="newMenuItem_Click"> <MenuItem.Icon> <Image Source= "/Images/NewDocumentHS.png" /> </MenuItem.Icon> </MenuItem> <MenuItem Header="Open" Name="openMenuItem" InputGestureText="Ctrl+O" Click="openMenuItem_Click"> <MenuItem.Icon> <Image Source= "/Images/OpenSelectedItemHS.png" /> </MenuItem.Icon> </MenuItem> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    99. 99. Context Menu Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    100. 100. Context Menu• Popup menu that exposes functionality specific to a control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    101. 101. Context Menu• Popup menu that exposes functionality specific to a control• Use ContextMenu property of control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    102. 102. Context Menu• Popup menu that exposes functionality specific to a control• Use ContextMenu property of control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    103. 103. Context Menu• Popup menu that exposes functionality specific to a control• Use ContextMenu property of control<TextBox Name="textBox1" AcceptsReturn="True" DockPanel.Dock="Bottom" TextWrapping="Wrap"> <TextBox.ContextMenu> <ContextMenu> <MenuItem Header="Cut" Click="cutMenuItem_Click"> <MenuItem.Icon> <Image Source="/Images/CutHS.png" /> </MenuItem.Icon> </MenuItem> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    104. 104. DEMO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    105. 105. DEMO• Menu Example Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    106. 106. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    107. 107. Agenda• List Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    108. 108. Agenda• List Controls• Menus Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    109. 109. Agenda• List Controls• Menus• Layout Controls Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    110. 110. ScrollViewer Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    111. 111. ScrollViewer• Content control with both horizontal and vertical scroll bars built-in Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    112. 112. ScrollViewer• Content control with both horizontal and vertical scroll bars built-in• Use it when content may not fit in a window and you want to enable scrolling Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    113. 113. ScrollViewer Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    114. 114. ScrollViewer• VerticalScrollBar and HorizontalScrollBar properties control visibility of scrollbars Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    115. 115. ScrollViewer• VerticalScrollBar and HorizontalScrollBar properties control visibility of scrollbars • Auto – Scroll bar appears if needed and disappears when not needed Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    116. 116. ScrollViewer• VerticalScrollBar and HorizontalScrollBar properties control visibility of scrollbars • Auto – Scroll bar appears if needed and disappears when not needed • Default for horizontal scroll bar Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    117. 117. ScrollViewer• VerticalScrollBar and HorizontalScrollBar properties control visibility of scrollbars • Auto – Scroll bar appears if needed and disappears when not needed • Default for horizontal scroll bar • Visible – Scroll bar always appears and is disabled if not needed Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    118. 118. ScrollViewer• VerticalScrollBar and HorizontalScrollBar properties control visibility of scrollbars • Auto – Scroll bar appears if needed and disappears when not needed • Default for horizontal scroll bar • Visible – Scroll bar always appears and is disabled if not needed • Default for vertical scroll bar Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    119. 119. ScrollViewer• VerticalScrollBar and HorizontalScrollBar properties control visibility of scrollbars • Auto – Scroll bar appears if needed and disappears when not needed • Default for horizontal scroll bar • Visible – Scroll bar always appears and is disabled if not needed • Default for vertical scroll bar • Disabled – Scroll bar never appears and scrolling in code is disabled Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    120. 120. ScrollViewer• VerticalScrollBar and HorizontalScrollBar properties control visibility of scrollbars • Auto – Scroll bar appears if needed and disappears when not needed • Default for horizontal scroll bar • Visible – Scroll bar always appears and is disabled if not needed • Default for vertical scroll bar • Disabled – Scroll bar never appears and scrolling in code is disabled • Hidden – Scroll bar never appears but scrolling in code is enabled Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    121. 121. TabControl and TabItem Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    122. 122. TabControl and TabItem• TabControl control displays content on separate pages that users can view by selecting appropriate tab Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    123. 123. TabControl and TabItem• TabControl control displays content on separate pages that users can view by selecting appropriate tab• TabItem control defines tabs Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    124. 124. TabControl and TabItem• TabControl control displays content on separate pages that users can view by selecting appropriate tab• TabItem control defines tabs Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    125. 125. TabControl and TabItem• TabControl control displays content on separate pages that users can view by selecting appropriate tab• TabItem control defines tabs <TabControl Grid.Row="1" Margin="0,5,0,0" Name="tabControl1" SelectionChanged="tabControl1_SelectionChanged"> <TabItem Header="Subject" Name="subjectTabItem"> … <TabItem> <TabItem Header="Expert" Name="expertTabItem"> … </TabItem> </TabControl> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    126. 126. GroupBox Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    127. 127. GroupBox• Box with rounded corners and a title Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    128. 128. GroupBox• Box with rounded corners and a title• Often surround radio buttons or check boxes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    129. 129. GroupBox• Box with rounded corners and a title• Often surround radio buttons or check boxes <GroupBox Header="Pick a subject“ MinWidth="300" MaxHeight="350" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,20,0,0"> <StackPanel Margin="0,10,0,0"> <RadioButton Margin="15“ Name="visualBasicRadioButton" Content="Visual Basic" /> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    130. 130. Expander Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    131. 131. Expander• Header and collapsible content region Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    132. 132. Expander• Header and collapsible content region• Expanded and Collapsed events occur when region expands and collapses Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    133. 133. Expander• Header and collapsible content region• Expanded and Collapsed events occur when region expands and collapses• ExpandDirection property specifies which way region expands Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    134. 134. Expander• Header and collapsible content region• Expanded and Collapsed events occur when region expands and collapses• ExpandDirection property specifies which way region expands • Down, up, left, right Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    135. 135. Expander Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    136. 136. Expander<StackPanel> <Expander Margin="2" Padding="2" Header="Robert Green“ Name="rGreenExpander" Expanded="rGreenExpander_Expanded" Collapsed="rGreenExpander_Collapsed"> <StackPanel Margin="0,0,0,5" Orientation="Horizontal">… </StackPanel> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    137. 137. DEMO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    138. 138. DEMO• Headered Content Controls Example Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    139. 139. Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    140. 140. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    141. 141. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    142. 142. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details!• Learn more about WPF on SlideShare: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    143. 143. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details!• Learn more about WPF on SlideShare:  Intro to Windows Presentation Foundation (WPF) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

    ×