WPF Advanced Controls

Learn More @ http://www.learnnowonline.comCopyright © by Application Developers Training Company

WPF: Advanced Controls

http://www.learnnowonline.com/


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



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



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

• Same selection properties as ListBox• Can contain text, images, other elements



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



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>



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



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>



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>



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



WPF Advanced Controls

Documents

Transcript of WPF Advanced Controls