BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT

Department of MCA
Advanced Programming : 21MCA3041
Module 4: Graphical User Interface with Windows
Forms and WPF
Handling By
Nirupama K
Asst. Prof. Dept. of MCA
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
New Features of WPF
• WPF is a UI framework. Used to create interactive client appliacations
• It is used to develop various applications. WPF uses XAML language
Some new features for WPF
• New WPF control to develop business applications
• Support for development of touch enabled application
• Visual state manager (VSM)
• Selection and Caret brushes
• New WPF text rendering stack
• Improvement in XAML browser applications (XBAPs)

04/04/2024 2
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
New WPF Controls
• DataGrid:
• Calendar:
• DatePicker:
• Supports to develop touch enabled application

04/04/2024 3
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
WPF 4.0 architecture

04/04/2024 4
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT

04/04/2024 5
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Introduction to XAML
• One of the first things you will encounter while working with WPF is XAML. XAML stands for
Extensible Application Markup Language. It’s a simple and declarative language based on XML.
• In XAML, it very easy to create, initialize, and set properties of objects with hierarchical relations.
• It is mainly used for designing GUIs, however it can be used for other purposes as well, e.g., to
declare workflow in Workflow Foundation.
Basic Syntax
• When you create your new WPF project, you will encounter some of the XAML code by default in
MainWindow.xaml as shown below.
<Window x:Class = "Resources.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "MainWindow" Height = "350" Width = "525">
<Grid> </Grid> </Window>
04/04/2024 6
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Information Description

<Window It is the opening object element or container of the root.

x:Class = "Resources.MainWindow" It is a partial class declaration which connects the markup to the
partial class code defined behind.

xmlns = Maps the default XAML namespace for WPF client/framework

"http://schemas.microsoft.com/win fx/2006/xaml/presentation"

xmlns:x = "http://schemas.microsoft.com/w infx/2006/xaml" XAML namespace for XAML language which maps it to x: prefix

> End of object element of the root

<Grid> It is starting and closing tags of an empty grid object.

</Grid>

</Window> Closing the object element

04/04/2024 7
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Namespaces and XAML
• A XAML namespace is really an extension of the concept of an XML namespace.
• The primary concept that is added to the XAML definition of the XML namespace is that a XAML
namespace implies both a scope of uniqueness for the markup usages, and also influences how
markup entities are potentially backed by specific CLR namespaces and referenced assemblies
• You can define XAML namespace using xmlns attribute
• xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
• The second declaration maps a separate XAML namespace, mapping it (typically) to the x: prefix.
• xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
• You can also create your own namespaces and use it in XAML file by adding an XAML adding root
elements of these files

04/04/2024 8
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
• xmlns:custom="clr-namespace:SDKSample;assembly=SDKSampleLibrary“
• Xmlns: custom_prefix=“clr-namespace:namespace_name; assembly= assembly_name”

XAML Property Syntax

<element_name.property_name [attribute_name=“value1” attribute_name=“value2” ….
[attribute_name=“valueN” ]> property_name</ element_name.property_name>
• element_name- specifies the name element to which the property belongs
• Property-name- specifies the property name
• attribute1_name, attribute2_name… attributeN_name- specifies the name of any attribute that
the property may contain
• Value1, Value2, Value3… ValueN – specifies the value of the attributes
• Property_value- specifies the value of the property

04/04/2024 9
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT

Tool box
controls

04/04/2024 10
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Panel
• The Panel Control is a container control to host a group of similar child controls. One of the major
uses I have found for a Panel Control is when you need to show and hide a group of controls.
• We can create a Panel Control using the Forms designer at design-time or using the Panel class in
code at run-time.

• Hkhjk

04/04/2024 11
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Checkbox
• Check Box control allows us to select single or multiple elements from the given list or it can
provide us options like yes or no, true or false, etc.
•K

04/04/2024 12
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Radio
Button
• Radio Button control is used to select a single option among the group of the options.

04/04/2024 13
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Link label

• Hyperlinks are sometimes useful in Windows Forms programs. LinkLabel control provides
hyperlinks similar to those on Web Pages. This control has some complexities and must be
initialized in C# code.
private void linkLabel1_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
{
System.Diagnostics.Process.Start("IExplore", "http://www.google.com");
}

04/04/2024 14
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Listbox control
• ListBox control is used to show multiple elements in a list, from which a user can select one or
more elements and the elements are generally displayed in multiple columns

04/04/2024 15
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Listview
• string[] arr = new string[4];
• ListViewItem itm;
• //add items to ListView
• arr[0] = "product_1";
• arr[1] = "100";
• arr[2] = "10";
• itm = new ListViewItem(arr);
• listView1.Items.Add(itm);

04/04/2024 16
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
Treeview Control
• The TreeView control contains a hierarchy of TreeViewItem controls. It provides a way to display
information in a hierarchical structure by using collapsible nodes .
• The top level in a tree view are root nodes that can be expanded or collapsed if the nodes have
child nodes.

04/04/2024 17
 BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT
DateTimePicker Control
• The DateTimePicker control allows you to display and collect date and time from the user with a
specified format.

04/04/2024 18