Controls Use in Windows Presentation Foundation (WPF)

iFour ConsultancyControls
https://www.ifourtechnolab.com/wpf-software-development

 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

Control Library
 Grid Layout
 Label
 Buttons
 Editors
 Lists
 Menus and toolbars
 Scroll Viewer
Building Blocks
 ToolTip
 Thumb
 Border
 Popup
 Document Viewers
 Frame
 Ranges
 Containers

 Grid
 Column Definition
 Row Definition
 Grid Lines
Grid Layout

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

Buttons

 PasswordBox
 TextBox
 RichTextBox
 InkCanvas
Editors

 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

 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

Tree view
<TreeView>
<TreeViewItem Header='Coders'>
<TreeViewItem Header='Don' />
<TreeViewItem Header='Dharma' />
</TreeViewItem>
<TreeViewItem Header='Noncoders'>
<TreeViewItem Header='Chris' />
</TreeViewItem>
</TreeView>

New Lists using Templates

Menus & ToolBars

 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

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Width="250"
Height="180">
<Grid>
<Grid.RowDefinitions>
<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

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

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

 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

 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

 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);

// 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..)

 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.

 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
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentatio
n"
Width="250"
Height="180">
<Grid>
<Grid.RowDefinitions>
</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>

 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

 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

⚫ 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

Cont.….

⚫ 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

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.

⚫ 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

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)

⚫ 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

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)

⚫ 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

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.

⚫ A ScrollViewer is a control that provides a scrollable area that can contain other
visible elements.
Scroll Viewer

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

⚫ A Toggle Button is a control that can switch states, such as CheckBox and
RadioButton. .
Toggle Button

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
IsThreeStateProperty Identifies the IsThreeState dependency property.

⚫ A tooltip is a control that creates a pop-up window that displays information for
an element in the GUI.
tooltip

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.

Controls Use in Windows Presentation Foundation (WPF)

Recommended

More Related Content

What's hot (20)

Similar to Controls Use in Windows Presentation Foundation (WPF) (20)

More from iFour Technolab Pvt. Ltd. (20)

Recently uploaded (20)

Controls Use in Windows Presentation Foundation (WPF)

Editor's Notes