Introducing WPF

1
Introducing WPFs controls

• - Santosh Singh

2
Introduction
Highlight on some of the major built in
controls. Content Controls Items Controls
Range Controls Text and Ink Controls Standard
themes Aero (the default Windows Vista theme)
Luna (the default Windows XP theme) Royale (the
theme from Windows XP Media Center Edition 2005
and Windows XP Tablet PC Edition 2005) Classic
(the theme available in Windows 2000 and later)
3
Content Controls

• Content controls are simply controls that are
  constrained to contain a single item.
• Content controls all derive from
  System.Windows.Controls.ContentControl
• The built-in content controls come in three major
  varieties
• Buttons
• Simple containers
• Containers with a header

4
Buttons

• Buttons are probably the most familiar and
  essential user interface element
• This behavior is actually captured by an abstract
  class called ButtonBase
• The most interesting feature of ButtonBase,
  however, is its ClickMode property
• This can be set to a value of a ClickMode
  enumeration to control exactly when the Click
  event gets raised.
• Its values are Release (the default), Press, and
  Hover

5
Button Types

• Button - Cancel button or a default button
• RepeatButton - RepeatButton acts just like Button
  except that it continually raises the Click event
  as long as the button is being pressed. The
  frequency of the raised Click events depends on
  the values of RepeatButton's Delay and Interval
  properties.
• ToggleButton - ToggleButton is a "sticky" button
  that holds its state when it is clicked.

6
Button Types

• CheckBox
• It has a single piece of externally supplied
  content (so this doesn't count the standard
  check box).
• It has a notion of being clicked by mouse or
  keyboard.
• It retains a state of being checked or
  unchecked when clicked.

7
Button Types

• RadioButton
• RadioButton is another control that derives from
  ToggleButton, but is unique because it has
  built-in support for mutual exclusion.
• Checking one RadioButton automatically unchecks
  all others in the same group.

8
Simple Containers

• Label
• Label is a classic control used to hold text.
• It can hold arbitrary content in its Content
  propertya Button, a Menu, and so on.
• ToolTip
• The ToolTip control holds its content in a
  floating box that appears when you hover over an
  associated control and disappears when you move
  the mouse away

9
Simple Containers

• WPF ToolTip can hold anything you want!

10
Simple Containers
ToolTip defines Open and Closed events in case
you want to act upon its appearance and
disappearance
ltCheckBoxgt CheckBox ltCheckBox.ToolTipgt ltStackPanel
gt ltLabel FontWeight"Bold" Background"Blue"
Foreground"White"gt The CheckBox lt/Labelgt ltTextBlo
ck Padding"10" TextWrapping"WrapWithOverflow"
Width"200"gt CheckBox is a familiar control. But
in WPF, it's not much more than a ToggleButton
styled differently! lt/TextBlockgt ltLine
Stroke"Black" StrokeThickness"1"
X2"200"/gt ltStackPanel Orientation"Horizontal"gt lt
Image Margin"2" Source"help.gif"/gt ltLabel
FontWeight"Bold"gtPress F1 for more
help.lt/Labelgt lt/StackPanelgt lt/StackPanelgt lt/CheckB
ox.ToolTipgt lt/CheckBoxgt
11
Simple Containers

• The Frame control holds arbitrary content, just
  like all other content controls, but it isolates
  the content from the rest of the UI.
• You can think of the Frame control as a more
  powerful version of the "Microsoft Web Browser
  ActiveX control or the Windows Forms WebBrowser
  control

12
Containers with a Header

• GroupBox
• GroupBox is a familiar control for organizing
  chunks of controls. The Header property can be
  set to an arbitrary object.
• Expander - Expander is very much like GroupBox,
  but contains a button that enables you to expand
  and collapse the inner content.

13
Selectors

• Selectors are items controls whose items can be
  indexed and selected.
• Selector also supports two attached properties
  that can be applied to individual items
• IsSelected A Boolean that can be used to
  select or unselect an item (or to retrieve its
  current selection state)
• IsSelectionActive A read-only Boolean that
  tells you if the selection has focus

14
Selectors

• There are four selector driven controls
• ComboBox

15
Selectors
ltComboBoxgt ltStackPanel Orientation"Horizontal"
Margin"5"gt ltImage Source"CurtainCall.bmp"/gt ltSta
ckPanel Width"200"gt ltTextBlock Margin"5,0"
FontSize"14" FontWeight"Bold" VerticalAlignment
"center"gtCurtain Calllt/TextBlockgt ltTextBlock
Margin"5" VerticalAlignment"center"
TextWrapping"Wrap"gt Whimsical, with a red
curtain background that represents a
stage. lt/TextBlockgtlt/StackPanelgtlt/StackPanelgt ltSta
ckPanel Orientation"Horizontal"
Margin"5"gt ltImage Source"Fireworks.bmp"/gt ltStack
Panel Width"200"gt ltTextBlock Margin"5,0"
FontSize"14" FontWeight"Bold" VerticalAlignment
"center"gtFireworkslt/TextBlockgt ltTextBlock
Margin"5" VerticalAlignment"center"
TextWrapping"Wrap"gtSleek, with a black sky
containing fireworks. When you need tocelebrate
PowerPoint-style, this design is for
you! lt/TextBlockgtlt/StackPanelgtlt/StackPanelgtlt/Combo
Boxgt
16
Selectors

• ListBox

17
Selectors

• ListView
• The ListView control, which derives from
  ListBox, looks and acts just like a ListBox,
  except that it uses the Extended SelectionMode by
  default. But ListView also adds a property called
  View that enables you to customize the view in a
  richer way than choosing a custom ItemsPanel

18
Selectors

• ltListViewgt
• ltListView.Viewgt
• ltGridViewgt
• ltGridViewColumn Header"Date"/gt
• ltGridViewColumn Header"Day of Week"
• DisplayMemberBinding"Binding DayOfWeek"/gt
• ltGridViewColumn Header"Year" DisplayMemberBinding
  "Binding Year"/gt
• lt/GridViewgt
• lt/ListView.Viewgt
• ltsysDateTimegt1/1/2007lt/sysDateTimegt
• ltsysDateTimegt1/2/2007lt/sysDateTimegt
• ltsysDateTimegt1/3/2007lt/sysDateTimegt
• lt/ListViewgt

19
Selectors

• TabControl

The final selectorTabControlis useful for
switching between multiple pages of content.
ltTabControlgt ltTextBlockgtContent for Tab
1.lt/TextBlockgt ltTextBlockgtContent for Tab
2.lt/TextBlockgt ltTextBlockgtContent for Tab
3.lt/TextBlockgt lt/TabControlgt
20
Menus

• Menu simply stacks its items horizontally with
  the characteristic gray bar (by default) as its
  background

ltMenugt ltMenuItem Header"_File"gt ltMenuItem
Header"_New..."/gt ltMenuItem Header"_Open..."/gt lt
Separator/gt ltMenuItem Header"Sen_d
To"gt ltMenuItem Header"Mail Recipient"/gt ltMenuItem
Header"My Documents"/gt lt/MenuItemgt lt/MenuItemgt lt
MenuItem Header"_Edit"gt lt/MenuItemgt ltMenuItem
Header"_View"gt lt/MenuItemgtlt/Menugt
21
Other Controls

• TreeView
• ToolBar

22
Other Controls

• Status Bar
• Progress Bar
• Slider

23
Text and Ink Controls

• WPF contains a handful of controls for displaying
  and editing text, whether typed with a keyboard
  or hand-written with a stylus.
• TextBox
• RichTextBox
• PasswordBox
• InkCanvas
• The amazing InkCanvas is a
• versatile element whose primary purpose is to
  capture handwriting

24
References

• Windows Presentation Foundation Unleashed
• Author Adam Nathan
• Publication - SAMS