Windows Presentation Foundation Advanced Controls by LearnNowOnline

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

Agenda • List Controls • Menus • Layout Controls

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")

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

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.

DEMO • ListBox Examples

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

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.com Copyright © by Application Developers Training Company

DEMO • ComboBox Examples

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

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

DEMO • TreeView Examples

Agenda • List Controls • Menus • Layout Controls

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

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

Agenda • List Controls • Menus • Layout Controls

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

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

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>

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" />

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

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>

DEMO • Headered Content Controls Example

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)