Windows Presentation Foundation Advanced Controls

WPF: Advanced Controls

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

Objectives


Objectives
• Learn how to use controls that enable
users to select an item from a list


Objectives
• See how to add menus to applications


Objectives
• See how to add menus to applications
• Explore controls that enable you to
better organize windows


Agenda


Agenda
• List Controls


Agenda
• List Controls
• Menus


Agenda
• List Controls
• Menus
• Layout Controls


ListBox


ListBox
• Enables user to select one or more
items from a list of available choices


ListBox
• If list cannot display all items at once,
a vertical scroll bar appears
automatically


ListBox
automatically
• Can add and remove items at design
time and at runtime


ListBox
automatically
• Can add and remove items at design
time and at runtime
• SelectionChanged event occurs when
you select an item

Populate a ListBox


Populate a ListBox
• In XAML


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>


Populate a ListBox
• In XAML
SelectionChanged=
…
</ListBox>
• In code


Populate a ListBox
• In XAML
SelectionChanged=
…
</ListBox>
• In code
expertsListBox.Items.Add("Robert Green")


Populate a ListBox
• In XAML
SelectionChanged=
…
</ListBox>
• In code
expertsListBox.Items.Add("Robert Green")
• Collection Editor: Items dialog box


ListBox
• Familiar properties


ListBox
• SelectedIndex returns index of ﬁrst item in
current selection or -1 if selection is empty


ListBox
• SelectedItem returns ﬁrst item in current selection
or null if selection is empty


ListBox
• SelectedValue returns value of SelectedItem


ListBox
• SelectedItem returns element type


ListBox
• ListBoxItem


ListBox
• ListBoxItem
• Image


ListBox
• ListBoxItem
• Image
• StackPanel


ListBox
• ListBoxItem
• Image
• StackPanel
• String


ListBox
• Selection Mode determines whether users
can select more than one item


ListBox
• Single – Can select one item at a time
(default)


ListBox
(default)
• Multiple – Can select more than one item at a
time


ListBox
(default)
time
• Extended – Can select more than one
consecutive or non-consecutive item at a time


ListBox
(default)
time
• Extended – Can select more than one
consecutive or non-consecutive item at a time
• ListBox and ListBoxItem are container


DEMO


DEMO
• ListBox Examples


ComboBox


ComboBox
• Enables users to select from a drop-down
list of available choices


ComboBox
• Consists of selection box that displays
currently selected value and drop-down
list that contains values that users can
select


ComboBox
select
• Populate same way as ListBox


ComboBox
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 IsEditable to enable text box
• Turn on IsReadOnly to enable typing in


DEMO
• ComboBox Examples


TreeView


TreeView
• Display information in a hierarchical
manner using nodes that can expand
and collapse


TreeView
and collapse
• Populate using XAML, Collection Editor:
Items dialog box, code


TreeView
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>


</TreeViewItem>
<TreeViewItem Header="H-R" Tag="Group">


</TreeViewItem>
<TreeViewItem Header="Don Kiely"/>


</TreeViewItem>
</TreeViewItem>


</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="S-Z" Tag="Group">


</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Dan Wahlin"/>


</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Doug Ware"/>


</TreeViewItem>
</TreeViewItem>
</TreeViewItem>


</TreeViewItem>
</TreeViewItem>
</TreeViewItem>
</TreeView>


TreeView
• SelectedItemChanged event occurs
when you select a node


TreeView
• Can check in code to see if user selected a
grouping node or an item node


TreeView
• 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


Menu


Menu
• Modern look applications still use
menus


Menu
menus
• Can place menu where you want, but
traditionally in upper left


Menu
menus
• Can use Grid or DockPanel


Menu
menus
• Can use Grid or DockPanel
• Set IsMainMenu property to true to
indicate top-level menu


MenuItem


MenuItem
• Container control


MenuItem
• Header property contains menu item
text


MenuItem
text
• InputGestureText property deﬁnes
keyboard shortcut


MenuItem
text
keyboard shortcut
• Icon property deﬁnes image


MenuItem
text
keyboard shortcut
• Icon property deﬁnes image
• Click event occurs when user selects
menu item

Deﬁne a Menu in XAML


<MenuItem Header="File">
<MenuItem Header="New" Name="newMenuItem"
InputGestureText="Ctrl+N"
Click="newMenuItem_Click">
<MenuItem.Icon>
<Image Source=


<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=


<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


Context Menu
• Popup menu that exposes functionality
speciﬁc to a control


Context Menu
• Use ContextMenu property of control


Context Menu
• 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


ScrollViewer


ScrollViewer
• Content control with both horizontal
and vertical scroll bars built-in


ScrollViewer
• Content control with both horizontal
and vertical scroll bars built-in
• Use it when content may not ﬁt in a
window and you want to enable
scrolling


ScrollViewer
• VerticalScrollBar and HorizontalScrollBar
properties control visibility of scrollbars


ScrollViewer
• Auto – Scroll bar appears if needed and
disappears when not needed


ScrollViewer
• Default for horizontal scroll bar


ScrollViewer
• Visible – Scroll bar always appears and is disabled
if not needed


ScrollViewer
if not needed
• Default for vertical scroll bar


ScrollViewer
if not needed
• Disabled – Scroll bar never appears and scrolling
in code is disabled


ScrollViewer
if not needed
• 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 deﬁnes tabs


• TabItem control deﬁnes 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


GroupBox
• Box with rounded corners and a title


GroupBox
• Often surround radio buttons or check
boxes


GroupBox
• 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


Expander
• Header and collapsible content region


Expander
• Expanded and Collapsed events occur
when region expands and collapses


Expander
• ExpandDirection property speciﬁes
which way region expands


Expander
• ExpandDirection property speciﬁes
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!

• Learn more about WPF on SlideShare:


Learn More!

• Learn more about WPF on SlideShare:
 Intro to Windows Presentation Foundation
(WPF)


Windows Presentation Foundation Advanced Controls

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (10)

Mais de LearnNowOnline

Mais de LearnNowOnline (20)

Último

Último (20)

Windows Presentation Foundation Advanced Controls

Notas do Editor