Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
WPF: Advanced Controls
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
Agenda
• List Controls• Menus • Layout Controls
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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 codeexpertsListBox.Items.Add("Robert Green")
• Collection Editor: Items dialog box
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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 elements• Can contain text, images, StackPanels, etc.
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
DEMO
• ListBox Examples
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
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
• Same selection properties as ListBox• Can contain text, images, other elements
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
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 text box
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
DEMO
• ComboBox Examples
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
DEMO
• TreeView Examples
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
Agenda
• List Controls• Menus• Layout Controls
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
DEMO
• Menu Example
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
Agenda
• List Controls• Menus• Layout Controls
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
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.comCopyright © by Application Developers Training Company
DEMO
• Headered Content Controls Example
Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company
Learn More!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)
Top Related