Visual Programming

Dr. Irfana Memon

Department of CSE, QUEST
Dr. Irfana Memon
Department of CSE, QUEST

https://sites.google.com/a/quest.edu.pk/dr-irfana-memon/lecture-slides
 Course Content (1)
Part 1: Console Based Applications
Introduction to Microsoft Visual C# and Visual Studio
Working with variables, Data types, Operators, and Expressions
Visual C# Programming Language Constructs, Creating Methods
Invoking Methods, Handling Exceptions, Creating overloaded Methods
Using Decision Statements

Dr. Irfana Memon

Department of CSE, QUEST
Using Compound Assignment and Iteration Statements
Managing Errors and Exceptions
Implementing Type-safe Collections: Creating Classes, Organizing Data into
Collections, Handling Events, Defining and Implementing Interfaces
Developing the Code for a Graphical Application: Implementing Structs and Enums
Creating a Class Hierarchy by Using Inheritance, Extending .NET Framework Classes,
Creating Generic Types
Using Arrays and Collections and Understanding Parameter Arrays 2
Using Garbage Collection and Resource Management
 Course Content (2)
Part 2: Windows Based Applications
Introduction to WinForms and Controls
Advanced User Interface Enhancement
MDI Applications in WinForm
Drawing in Winform

Dr. Irfana Memon

Department of CSE, QUEST
WPF
Part3: ADO.NET
Introduction to ADO.Net Data Access Components
Part4:ASP.NET
Introduction to Web Applications and ASP.NET
Website Development cycle and HTTP

3
 Introduction
• WPF stands for Windows Presentation Foundation.
• It is a powerful framework for building Windows applications.
• WPF was first introduces in .NET framework 3.0 version, and
then so many other features were added in the subsequent

Dr. Irfana Memon

Department of CSE, QUEST
.NET framework versions.
• WPF can be considered as an evolution over WinForms. It
produces easy to operate graphical display system for
Windows. It offers easy separation between UI and business
logic.
• WPF applications can be deployed in your system as a
standalone desktop program or hosted as an embedded object
in a website. 4
 Dr. Irfana Memon
5

Department of CSE, QUEST

 Dr. Irfana Memon
7

Department of CSE, QUEST

 Dr. Irfana Memon
8

Department of CSE, QUEST

 Dr. Irfana Memon
9

Department of CSE, QUEST

 Dr. Irfana Memon
10

Department of CSE, QUEST

 Dr. Irfana Memon
11

Department of CSE, QUEST

 WPF Architecture
Before WPF, the other user interface frameworks offered by
Microsoft such as MFC and Windows forms.
✔It is a part of the .NET framework.
✔ It contains a mixture of managed and unmanaged code.
The major components of WPF architecture are as shown in the

Dr. Irfana Memon

Department of CSE, QUEST
figure below. The most important code part of WPF are:
✔Presentation Framework
✔ Presentation Core
✔ Milcore

12
 WPF Architecture
The presentation framework and
the presentation core have been
written in managed code.

Dr. Irfana Memon

Department of CSE, QUEST
Milcore is a part of unmanaged code
which allows tight integration with
DirectX (responsible for display and
rendering).

CLR makes the development process

more productive by offering many
features such as memory 13
management, error handling, etc.
 WPF Advantages
In the earlier GUI frameworks, there was no real separation
between how an application looks like and how it behaved.

Both GUI and behavior was created in the same language, e.g.
C# or VB.Net which would require more effort from the
developer to implement both UI and behavior associated with

Dr. Irfana Memon

Department of CSE, QUEST
it.
In WPF, UI elements are designed in XAML while behaviors
can be implemented in procedural languages such C# and
VB.Net. So it very easy to separate behavior from the designer
code.
With XAML, the programmers can work in parallel with the
designers.
The separation between a GUI and its behavior can allow us to 14
easily change the look of a control by using styles and
templates.
 WPF Features
WPF is a powerful framework to create Windows application.
It supports many great features, some of which have been
listed below:

Dr. Irfana Memon

Department of CSE, QUEST
15
 WPF Features

Dr. Irfana Memon

16

Department of CSE, QUEST

 WPF Environment

Microsoft provides two important tools for WPF application

development.
✔ Visual Studio
✔ Expression Blend

Dr. Irfana Memon

Department of CSE, QUEST
Both the tools can create WPF projects, but the fact is that
Visual Studio is used more by developers, while Blend is used
more often by designers.

17
 WPF – HELLO WORLD
We develop a simple Hello World WPF application.
So let’s start the simple implementation by following the steps
given below.

1. Click on File > New > Project menu option.

Dr. Irfana Memon

Department of CSE, QUEST
18
 WPF – HELLO WORLD
2. The following dialog box will be displayed.

Dr. Irfana Memon

Department of CSE, QUEST
19
 WPF – HELLO WORLD
3. Under Templates, select Visual C# and in the middle panel,
select WPF Application.

4. Give the project a name. Type HelloWorld in the name field

and click the OK button.

Dr. Irfana Memon

Department of CSE, QUEST
5. By default, two files are created, one is the XAML file
(mainwindow.xaml) and the other one is the CS file
(mainwindow.cs)

6. On mainwindow.xaml, you will see two sub-windows, one is

the design window and the other one is the source (XAML)
window. 20
 WPF – HELLO WORLD
7. In WPF application, there are two ways to design an UI for
your application.
a. One is to simply drag and drop UI elements from the
toolbox to the Design Window.
b. The second way is to design your UI by writing XAML

Dr. Irfana Memon

Department of CSE, QUEST
tags for UI elements. Visual Studio handles XAML
tags when drag and drop feature is used for UI
designing.

21
 WPF – HELLO WORLD
8. In mainwindow.xaml file, the following XAML tags are
written by default.

Dr. Irfana Memon

Department of CSE, QUEST
22
 WPF – HELLO WORLD
9. By default, a Grid is set as the first element after page.
10. Let’s go to the toolbox and drag a TextBlock to the design
window.

Dr. Irfana Memon

Department of CSE, QUEST
23
 WPF – HELLO WORLD
11. You will see the TextBlock on the design window.

Dr. Irfana Memon

Department of CSE, QUEST
24
 WPF – HELLO WORLD
12. When you look at the source window, you will see that
Visual Studio has generated the XAML code of the TextBlock for
you.
13. Let’s change the Text property of TextBlock in XAML code
from TextBlock to Hello World.

Dr. Irfana Memon

Department of CSE, QUEST
25
 WPF – HELLO WORLD

Dr. Irfana Memon

26

Department of CSE, QUEST

 WPF – HELLO WORLD
14. Now, you will see the change on the Design Window as
well.

Dr. Irfana Memon

Department of CSE, QUEST
27
 WPF – HELLO WORLD
When the above code is compiled and executed, you will see
the following window.

Dr. Irfana Memon

Department of CSE, QUEST
28
 WPF – XAML OVERVIEW
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

Dr. Irfana Memon

Department of CSE, QUEST
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.

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

Dr. Irfana Memon

Department of CSE, QUEST
30
 Basic SYNTAX

Dr. Irfana Memon

31

Department of CSE, QUEST

 Basic SYNTAX
The syntax rules for XAML is almost similar to XML.
If you look at an XAML document, then you will notice that it
is actually a valid XML file, but an XML file is not necessarily
an XAML file.
It is because in XML, the value of the attributes must be a

Dr. Irfana Memon

Department of CSE, QUEST
string while in XAML, it can be a different object which is
known as Property element syntax.
✔The syntax of an Object element starts with a left angle
bracket (<) followed by the name of an object, e.g. Button.
✔Define some Properties and attributes of that object
element.
✔The Object element must be closed by a forward slash (/)
followed immediately by a right angle bracket (>). 32
 Basic SYNTAX
Example of simple object with no child element:

Dr. Irfana Memon

Department of CSE, QUEST
Example of object element with some attributes:

33
 Basic SYNTAX
Example of an alternate syntax do define properties
(Property element syntax):

Dr. Irfana Memon

Department of CSE, QUEST
34
 Basic SYNTAX
Example of Object with Child Element: StackPanel contains
Textblock as child element

Dr. Irfana Memon

Department of CSE, QUEST
35
 WHY XAML in WPF
XAML is not only the most widely known feature of WPF, but
it's also one of the most misunderstood features.

If you have exposure to WPF, then you must have heard of

XAML; but take a note of the following two less known facts

Dr. Irfana Memon

Department of CSE, QUEST
about XAML:

✔ WPF doesn't need XAML

✔ XAML doesn't need WPF

They are in fact separable pieces of technology.
36
To understand how that can be, let's look at a simple example
in which a button is created with some properties in
XAML.
Simple example to create
button in XAML

Dr. Irfana Memon

Department of CSE, QUEST
37
 button in C#
Simple example to create

Dr. Irfana Memon

38

Department of CSE, QUEST

 Simple example to
create button in XAML
When you compile and execute either the XAML code or the
C# code, you will see the same output as shown below.

Dr. Irfana Memon

Department of CSE, QUEST
39
 Simple example to
create button in XAML
From the above example, it is clear that what you can do in
XAML to create, initialize, and set properties of objects, the
same tasks can also be done using code.
✔ XAML is just another simple and easy way to design UI

Dr. Irfana Memon

Department of CSE, QUEST
elements.
✔With XAML, it doesn’t mean that what you can do to design
UI elements is the only way. You can either declare the
objects in XAML or define them using code.
✔XAML is optional, but despite this, it is at the heart of WPF
design.
✔ The goal of XAML is to enable visual designers to create user
interface elements directly. 40
✔ WPF aims to make it possible to control all visual aspects of
the user interface from mark-up.
 Wish You Good Luck

Dr. Irfana Memon

41

Department of CSE, QUEST