The document discusses various controls available in Windows Presentation Foundation (WPF) for building user interfaces. It describes standard controls like grids, labels, buttons, editors, lists, menus and toolbars. It also covers other controls like tooltips, borders, popups, frames and ranges. Specific controls like grid, label, buttons, editors, lists, menus and toolbars are discussed in more detail. The document also discusses dialog boxes, third-party controls and some other controls like calendar, date picker, image and popup.
2. Windows Presentation Foundation (WPF) allows developers to easily build and create
visually enriched UI based applications.
The classical UI elements or controls in other UI frameworks are also enhanced in
WPF applications.
All of the standard WPF controls can be found in the Toolbox which is a part of the
System.Windows.Controls.
These controls can also be created in XAML markup language.
Controls
https://www.ifourtechnolab.com/wpf-software-development
5. The Label control, in its most simple form, will look very much like the TextBlock which
we used in another article. You will quickly notice though that instead of a Text property,
the Label has a Content property. The reason for that is that the Label can host any kind
of control directly inside of it, instead of just text.
Labels
<Label Content="This is a Label control." />
https://www.ifourtechnolab.com/wpf-software-development
8. Four standard list controls- ListBox, ComboBox, ListView, TreeView.
List controls can be filled from one of the two sources.
1. Items Property
2. ItemsSource Property.
List
https://www.ifourtechnolab.com/wpf-software-development
9. List view derives from listBox
It has ability to separate view properties from control properties.
View property must be changed to grid view ad set properties on that object.
List View
https://www.ifourtechnolab.com/wpf-software-development
13. Expander is a layout in which we can add
control and expand it when we need. When
have less space in our application then we
can use expander layout.
We can assign the expand direction either
down, up, left or right.
At the time of expander creation we can
assign IsExpanded property true or false. It
has the same drawback as GroupBox that it
can contain only one control.
<Window x:Class="GroupBoxDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/present
ation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GroupBox Demo"
Width="250"
Height="180">
<Grid>
<Expander Header=“Description"
HorizontalAlignment="Left"
Margin="10,10,0,0"
VerticalAlignment="Top"
IsExpanded="False"
Height="299"
Width="497">
<TextBlock TextWrapping="Wrap"
Text="This is some text content."
Margin="5"/>
</Expander>
</Grid>
</Window>
Expander
https://www.ifourtechnolab.com/wpf-software-development
14. <Window x:Class="GroupBoxDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GroupBox Demo"
Width="250"
Height="180">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GroupBox Header="Mouse Handedness">
<StackPanel>
<RadioButton Content="Left-Handed" Margin="5"/>
<RadioButton Content="Right-Handed" Margin="5"
IsChecked="True"/>
</StackPanel>
</GroupBox>
<GroupBox Grid.Row="1" Header="Double Click Speed">
<Slider Margin="5" />
</GroupBox>
</Grid>
</Window>
The GroupBox control allows you to visually
group content and provide a title for grouped
elements.
When you use the default styling for a
GroupBox, the child controls are surrounded by
a border that includes a caption. There is no
need to explicitly define a Border.
Configuring a GroupBox is similar to setting up
an Expander. Both controls inherit from the
same base class and include the same
properties for controlling the header area and
content. The key difference is that a GroupBox
does not add the user interaction that permits
the content to be expanded and collapsed.
Group Box
https://www.ifourtechnolab.com/wpf-software-development
15. The Separator Control is used to separate items
in items controls.
The intention is to divide the items on the menu
or toolbar into logical groups.
It uses borders and rectangles.
Separator
<ListBox>
<ListBoxItem>Sports Car</ListBoxItem>
<ListBoxItem>Compact Car</ListBoxItem>
<ListBoxItem>Family Car</ListBoxItem>
<ListBoxItem>Off-Road Car</ListBoxItem>
<Separator/>
<ListBoxItem>Supersports Bike</ListBoxItem>
<ListBoxItem>Sports Tourer</ListBoxItem>
<ListBoxItem>Cruiser</ListBoxItem>
</ListBox>
https://www.ifourtechnolab.com/wpf-software-development
16. The WPF TabControl allows you to split your
interface up into different areas, each accessible
by clicking on the tab header, usually positioned
at the top of the control.
TabControl
<Window x:Class="WpfTutorialSamples.Misc_controls.TabControlSample“
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TabControlSample" Height="200" Width="250">
<Grid>
<TabControl>
<TabItem Header="General">
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Security" />
<TabItem Header="Details" />
</TabControl>
</Grid>
</Window>
https://www.ifourtechnolab.com/wpf-software-development
17. Standalone applications typically have a main window that both displays the main data over which the application operates and
exposes the functionality to process that data through user interface (UI) mechanisms like menu bars, tool bars, and status bars. A
non-trivial application may also display additional windows to do the following:
Display specific information to users.
Gather information from users.
Both display and gather information.
These types of windows are known as dialog boxes, and there are two types: modal and modeless.
Dialog
https://www.ifourtechnolab.com/wpf-software-development
18. A modeless dialog box, on the other hand, does not prevent
a user from activating other windows while it is open.
For example, if a user wants to find occurrences of a
particular word in a document, a main window will often
open a dialog box to ask a user what word they are looking
for.
Since finding a word doesn't prevent a user from editing the
document, however, the dialog box doesn't need to be
modal.
A modeless dialog box at least provides a Close button to
close the dialog box.
A modal dialog box is displayed by a function when the
function needs additional data from a user to continue.
Because the function depends on the modal dialog box to
gather data
the modal dialog box also prevents a user from activating
other windows in the application while it remains open.
In most cases, a modal dialog box allows a user to signal
when they have finished with the modal dialog box by
pressing either an OK or Cancel button.
Pressing the OK button indicates that a user has entered
data and wants the function to continue processing with
that data.
Pressing the Cancel button indicates that a user wants to
stop the function from executing altogether
https://www.ifourtechnolab.com/wpf-software-development
19. A message box is a dialog box that can be used to display textual information and to allow users to make
decisions with buttons.
To create a message box, you use the MessageBox class. MessageBox lets you configure the message box
text, title, icon, and buttons, using code like the following.
The following figure shows a message box that displays textual information, asks a question, and provides
the user with three buttons to answer the question.
Dialog-Message box
string messageBoxText = "Do you want to save changes?";
string caption = "Word Processor";
MessageBoxButton button = MessageBoxButton.YesNoCancel;
MessageBoxImage icon = MessageBoxImage.Warning;
// Display message box
MessageBox.Show(messageBoxText, caption, button, icon);
https://www.ifourtechnolab.com/wpf-software-development
20. // Display message box
MessageBoxResult result = MessageBox.Show(messageBoxText, caption, button, icon);
// Process message box results
switch (result)
{
case MessageBoxResult.Yes:
// User pressed Yes button
break;
case MessageBoxResult.No:
// User pressed No button
// ...
break;
case MessageBoxResult.Cancel:
// User pressed Cancel button
// ...
break;
}
Message box(cont..)
https://www.ifourtechnolab.com/wpf-software-development
21. Other Common Dialog Boxes are
Open File Dialog
Save File Dialog Box
Print Dialog Box
A modeless dialog box, such as the Find Dialog
Box shown in the following figure, has the same
fundamental appearance as the modal dialog
box.
Screenshot that shows a Find dialog box.
However, the behavior is slightly different, as
described in the following sections.
A modeless dialog box is opened by calling
the Show method.
Unlike ShowDialog, Show returns immediately.
Consequently, the calling window cannot tell when the
modeless dialog box is closed and, therefore, does not
know when to check for a dialog box result or get data
from the dialog box for further processing.
Instead, the dialog box needs to create an alternative
way to return data to the calling window for
processing.
https://www.ifourtechnolab.com/wpf-software-development
22. Window is the root window of XAML applications
which provides minimize/maximize option, title bar,
border, and close button.
It also provides the ability to create, configure, show,
and manage the lifetime of windows and dialog
boxes.
When you create a new WPF project, then by default,
the Window control is present.
Window
<Window x:Class="GroupBoxDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentatio
n"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GroupBox Demo"
Width="250"
Height="180">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GroupBox Header="Mouse Handedness">
<StackPanel>
<RadioButton Content="Left-Handed" Margin="5"/>
<RadioButton Content="Right-Handed" Margin="5"
IsChecked="True"/>
</StackPanel>
</GroupBox>
<GroupBox Grid.Row="1" Header="Double Click Speed">
<Slider Margin="5" />
</GroupBox>
</Grid>
</Window>
https://www.ifourtechnolab.com/wpf-software-development
23. A context menu, often referred to as a popup or pop-up menu, is a menu which is shown upon certain user actions,
usually a right-click with the mouse on a specific control or window.
Contextual menus are often used to offer functionality that's relevant within a single control.
Context Menu
https://www.ifourtechnolab.com/wpf-software-development
25. Third-party controls are those which are not created
by Microsoft but are created by some individual or
company by using WPF User Control or Custom
Control. Telerik and DevExpress are the most popular
companies for creating third-party controls.
Third-party controls
https://www.ifourtechnolab.com/wpf-software-development
27. ⚫ Calendar is a control that enables a user to select a date by using a visual calendar
display.
⚫ It provides some basic navigation using either the mouse or keyboard
Calendar
https://www.ifourtechnolab.com/wpf-software-development
29. ⚫ A Date Picker is a control that allows a user to pick a date value.
⚫ The user picks the date by using Combo Box selection for month, day, and year
values
Date picker
https://www.ifourtechnolab.com/wpf-software-development
30. Cont.….
Properties
Date Gets or sets the date currently set in the date
picker.
DayFormat Gets or sets the display format for the day value.
DayFormatProperty Gets the identifier for the DayFormat dependency
property.
Orientation Gets or sets a value that indicates whether the
day, month, and year selectors are stacked
horizontally or vertically.
YearFormat Gets or sets the display format for the year value.
MonthFormat Gets or sets the display format for the month
value.
https://www.ifourtechnolab.com/wpf-software-development
31. ⚫ A control that displays an image, you can use either the Image object or the
Image Brush object.
⚫ An Image object display an image, while an Image Brush object paints another
object with an image.
Image
https://www.ifourtechnolab.com/wpf-software-development
32. Cont.….
Properties
wSource Gets or sets the source for the image.
Width Gets or sets the width of a FrameworkElement.
(Inherited from FrameworkElement)
StretchProperty Identifies the Stretch dependency property.
Opacity Gets or sets the degree of the object's opacity.
(Inherited from UIElement)
Name Gets or sets the identifying name of the object.
CanDrag Gets or sets a value that indicates whether the
element can be dragged as data in a drag-and-
drop operation. (Inherited from UIElement)
https://www.ifourtechnolab.com/wpf-software-development
33. ⚫ Popup is a control that displays content on top of existing content, within the
bounds of the application window.
⚫ It is a temporary display on other content.
Popup
https://www.ifourtechnolab.com/wpf-software-development
34. Cont.….
Properties
Child Gets or sets the content to be hosted in the
popup.
ChildProperty Gets the identifier for the Child dependency
property.
IsOpen Gets or sets whether the popup is currently
displayed on the screen.
Opacity Gets or sets the degree of the object's opacity.
(Inherited from UIElement)
Name Gets or sets the identifying name of the object.
https://www.ifourtechnolab.com/wpf-software-development
35. ⚫ Progress Bar is a control that indicates the progress of an operation, where the
typical visual appearance is a bar that animates a filled area as the progress
continues.
It can show the progress in one of the two following styles −
⚫ A bar that displays a repeating pattern, or
⚫ A bar that fills based on a value.
Progress Bar
https://www.ifourtechnolab.com/wpf-software-development
36. Cont.….
Properties
IsIndeterminate Gets or sets a value that indicates whether the
progress bar reports generic progress with a
repeating pattern or reports progress based on
the Value property.
ShowError Gets or sets a value that indicates whether the
progress bar should use visual states that
communicate an Error state to the user.
ShowPaused Gets or sets a value that indicates whether the
progress bar should use visual states that
communicate a Paused state to the user.
Name Gets or sets the identifying name of the object.
https://www.ifourtechnolab.com/wpf-software-development
37. ⚫ A ScrollViewer is a control that provides a scrollable area that can contain other
visible elements.
Scroll Viewer
https://www.ifourtechnolab.com/wpf-software-development
38. Cont.….
Properties
ComputedHorizontalScrollBarVisibility Gets a value that indicates whether the
horizontal ScrollBar is visible.
ComputedHorizontalScrollBarVisibilityProper
ty
Identifies the
ComputedHorizontalScrollBarVisibility
dependency property.
ScrollableHeight Gets a value that represents the vertical size of
the area that can be scrolled; the difference
between the width of the extent and the width of
the viewport.
Name Gets or sets the identifying name of the object.
ScrollableWidth Gets a value that represents the horizontal size
of the area that can be scrolled; the difference
between the width of the extent and the width of
the viewport.
https://www.ifourtechnolab.com/wpf-software-development
39. ⚫ A Toggle Button is a control that can switch states, such as CheckBox and
RadioButton. .
Toggle Button
https://www.ifourtechnolab.com/wpf-software-development
40. Cont.….
Properties
IsChecked Gets or sets whether the ToggleButton is
checked.
IsCheckedProperty Identifies the IsChecked dependency property.
IsThreeState Gets or sets a value that indicates whether the
control supports three states
Name Gets or sets the identifying name of the object.
IsThreeStateProperty Identifies the IsThreeState dependency property.
https://www.ifourtechnolab.com/wpf-software-development
41. ⚫ A tooltip is a control that creates a pop-up window that displays information for
an element in the GUI.
tooltip
https://www.ifourtechnolab.com/wpf-software-development
42. Cont.….
Properties
IsOpen Gets or sets a value that indicates whether the
ToolTip is visible.
Placement Gets or sets how a ToolTip is positioned in
relation to the placement target element.
PlacementTarget Gets or sets the visual element or control that the
tool tip should be positioned in relation to when
opened by the ToolTipService.
Name Gets or sets the identifying name of the object.
https://www.ifourtechnolab.com/wpf-software-development
Editor's Notes
Software Outsourcing Company India - http://www.ifourtechnolab.com/