More Related Content More from LearnNowOnline (20) Windows Presentation Foundation Advanced Controls1. WPF: Advanced Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
2. Objectives
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. Agenda
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
7. Agenda
• List Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
8. Agenda
• List Controls
• Menus
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
9. Agenda
• List Controls
• Menus
• Layout Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
10. ListBox
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. Populate a ListBox
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
16. Populate a ListBox
• In XAML
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. ListBox
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. 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. 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. 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. 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. ListBox
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. 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. DEMO
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
38. DEMO
• ListBox Examples
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
39. ComboBox
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. IsEditable and IsReadOnly
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. 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. DEMO
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
51. DEMO
• ComboBox Examples
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
52. TreeView
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. Populate a TreeView in XAML
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. TreeView
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. DEMO
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
79. DEMO
• TreeView Examples
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
80. Agenda
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
81. Agenda
• List Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
82. Agenda
• List Controls
• Menus
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
83. Agenda
• List Controls
• Menus
• Layout Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
84. Menu
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
85. Menu
• Modern look applications still use
menus
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. MenuItem
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
91. MenuItem
• Container control
• Header property contains menu item
text
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. Define a Menu in XAML
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. Context Menu
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. DEMO
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
105. DEMO
• Menu Example
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
106. Agenda
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
107. Agenda
• List Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
108. Agenda
• List Controls
• Menus
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
109. Agenda
• List Controls
• Menus
• Layout Controls
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
110. ScrollViewer
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. ScrollViewer
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
114. ScrollViewer
• VerticalScrollBar and HorizontalScrollBar
properties control visibility of scrollbars
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. 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. 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. TabControl and TabItem
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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. GroupBox
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
127. GroupBox
• Box with rounded corners and a title
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. Expander
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
131. Expander
• Header and collapsible content region
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. Expander
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. DEMO
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
138. DEMO
• Headered Content Controls Example
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
139. Learn More!
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
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. 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. 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. 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