WPF: Advanced Controls
Learn More @ http://www.learnnowonline.com
Copyright 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.com
Copyright by Application Developers Training Company
Agenda
List Controls Menus Layout Controls
Learn More @ http://www.learnnowonline.com
Copyright 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.com
Copyright 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 code
expertsListBox.Items.Add("Robert Green")
Collection Editor: Items dialog box
Learn More @ http://www.learnnowonline.com
Copyright 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.com
Copyright 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.com
Copyright by Application Developers Training Company
DEMO
ListBox Examples
Learn More @ http://www.learnnowonline.com
Copyright 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.com
Copyright 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 cant 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.com
Copyright by Application Developers Training Company
DEMO
ComboBox Examples
Learn More @ http://www.learnnowonline.com
Copyright 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.com
Copyright 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.com
Copyright 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.com
Copyright by Application Developers Training Company
DEMO
TreeView Examples
Learn More @ http://www.learnnowonline.com
Copyright by Application Developers Training Company
Agenda
List Controls Menus Layout Controls
Learn More @ http://www.learnnowonline.com
Copyright 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.com
Copyright 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.com
Copyright 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.com
Copyright 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.com
Copyright by Application Developers Training Company
DEMO
Menu Example
Learn More @ http://www.learnnowonline.com
Copyright by Application Developers Training Company
Agenda
List Controls Menus Layout Controls
Learn More @ http://www.learnnowonline.com
Copyright 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.com
Copyright 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.com
Copyright 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.com
Copyright 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.com
Copyright 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.com
Copyright 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.com
Copyright by Application Developers Training Company
DEMO
Headered Content Controls Example
Learn More @ http://www.learnnowonline.com
Copyright by Application Developers Training Company
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
