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