Unit 1-Visual Programming-WPF--Part2.pdf

Main features of 4.5WPF , WPF 4.5architecture, WPF 4.5class hierarchy, types
of WPF applications, WPF 4.5 designer interface, Using XAML in WPF 4.5
applications, WPF properties, WPF events, working with dialog boxes in WPF
application, compiling and running WPF 4.5 applications, WPF 4.5 controls,
resources, styles, templates, commands.

What is WPF?
WPF (Windows Presentation Foundation) is a UI (User Interface) framework used to create Windows
desktop applications.
It helps developers build applications with:
● Beautiful graphics
● Flexible layouts
● Powerful data binding
● Reusable controls
● Secure and modern interfaces

1. Beautiful Graphics
○ WPF supports advanced graphics using 2D and 3D drawing, animations, and media integration.
○ You can easily create visually appealing UIs with smooth transitions and special effects.
2. Flexible Layouts
○ WPF provides layout panels like Grid, StackPanel, WrapPanel, etc., to arrange controls in a structured way.
○ Layouts adjust automatically to different screen sizes and resolutions.
3. Powerful Data Binding
○ WPF allows easy connection between UI elements and data (e.g., from databases or objects).
○ Changes in the data reflect instantly in the UI and vice versa — no manual updates required.
4. Reusable Controls
○ WPF supports creating custom user controls and styles that can be reused across different parts of the application.
○ This helps reduce code duplication and ensures consistency in the look and feel.
5. Secure and Modern Interfaces
○ WPF applications are built on the .NET platform, offering built-in security features.
○ It supports modern UI features, making the application look up-to-date and user-friendly.

Feature Description
Application Model Structure for building and managing apps.
Resources Allows reuse of styles, templates, and data.
Controls Buttons, labels, text boxes, etc.
Graphics Support for 2D, 3D, and animations.
Layout Arranging UI elements using panels like
Grid, StackPanel.
Data Binding Connects UI elements to data sources.
Documents Flow documents and fixed documents for
rich content.
Security Protects data and application access.

XAML (Extensible Application Markup Language) is used in WPF to design the UI.
It is a declarative language – you describe what the UI should look like, and WPF builds it.
Example of XAML:
<Button Content="Click Me" Width="100" Height="30"/>
This creates a button with the text "Click Me".

WPF is built in layers. Each layer handles a part of how the app
looks and works. The architecture can be divided into the following
parts:
1. Application Layer
This is your code – where you write logic and design UI using:
● XAML (for UI layout/design)
● VB.NET or C# (for logic and events)

2. Presentation Framework
This is a part of the .NET Framework that provides:
● Controls (Button, TextBox, etc.)
● Data Binding
● Resources and Styles
● Layout panels (StackPanel, Grid)

3. Presentation Core
It handles visual elements like:
● Drawing shapes
● Transformations
● Animations
● Events (Mouse, Keyboard, Touch)

4. Media Integration Layer (MIL)
Also called MILCore, this connects to DirectX (a graphics engine) and:
● Draws graphics (2D and 3D)
● Renders videos and animations
● Makes UI smooth and high quality
MILCore is the engine behind WPF visuals. It connects to DirectX to deliver fast, smooth, and beautiful user interfaces, including
graphics, animations, and videos.

5. Windows Kernel / OS Layer
This is the Windows operating system itself, which talks to:
● Hardware (keyboard, screen, mouse)
● Graphics card
● Touch screen

Flow of Control
Your Code (XAML + VB.NET)
↓
Presentation Framework
↓
Presentation Core
↓
Media Integration Layer (MILCore)
↓
DirectX (Graphics Engine)
↓
Windows OS
↓
Display on Screen

Layer What it Does
Application Your code and UI design
Presentation Framework Provides controls, layouts, styles
Presentation Core Handles drawing, events, animations
MILCore Connects to graphics (DirectX)
Windows OS Displays everything on screen

WPF classes are built in a layered hierarchy – each class adds more features and functionality.
1. Object (Base class of everything in .NET)
● Every class in .NET inherits from this.
2. DispatcherObject
● Ensures that WPF objects are accessed only from the UI thread.
● Base for all WPF UI elements.
3. DependencyObject
● Adds support for Dependency Properties (used in data binding, animation, styling).

4. Visual
● Supports drawing, hit testing, and rendering on screen.
5. UIElement
● Adds support for input events (mouse, keyboard), layout, and focus.
6. FrameworkElement
● Supports data binding, styles, resources, and layout properties (like
width, height, margin).

7. Control
● Base class for all controls like Button, TextBox, Label, etc.
● Adds support for templates, themes, and user interaction.
8. ContentControl and ItemsControl
● ContentControl: Can hold a single piece of content (e.g.,
Button, Label)
● ItemsControl: Can hold multiple items (e.g., ListBox,
ComboBox)

WPF (Windows Presentation Foundation) is built on a hierarchy of classes.
The base class for all WPF UI elements is System.Windows.DependencyObject, which
supports WPF’s property system.
classes:
● UIElement: Base for most visual elements (handles input, rendering)
● FrameworkElement: Adds layout, data binding, and styles
● Control: Adds templating, focus, and user interaction features
● Specific controls like Button, TextBox, ListBox inherit from Control.

Types of WPF Applications
WPF applications are of two types:
1. Standalone Application
● Runs directly on your computer like other desktop software.
● Has full access to files, printer, internet, etc.
● Installed and opened using an icon or shortcut.
Example:
A library management system made in WPF that you install and run on your PC.
Created as:
WPF App (.NET Framework) in Visual Studio.

2. Browser-based Application (XBAP)
(XAML Browser Application)
● Runs inside a web browser like Internet Explorer.
● Looks like a web page, but made using WPF.
● Has limited access to the system (for safety).
● Not installed like regular apps.
Example:
An online WPF-based quiz app that runs in Internet Explorer.
Created as:
WPF Browser Application in Visual Studio.

WPF 4.5 Designer Interface
The Designer Interface in WPF 4.5 (inside Visual Studio) is where you design and build your
WPF application UI (user interface).
It is made up of different parts that help you see, drag, and arrange controls like buttons,
textboxes, images, etc.
1. Design View (Visual Designer)
● Shows a visual preview of your WPF window or page.
● You can drag and drop controls like buttons or labels onto it.
Like drawing on a canvas.

2. XAML View
● Shows the XAML code (markup) for the UI.
● Any change in the design view will update the XAML code — and vice
versa.
<Button Content="Click Me" Width="100" Height="30"/>

3. Toolbox
● A panel with ready-to-use controls (like Button,
TextBox, Grid).
● Drag controls from here to the design surface.
Example: Drag a Button from toolbox to the window.

4. Properties Window
● Lets you change properties of a selected control (like
name, size, color).
● You can set values without typing in XAML.
Example: Change a button’s background color to Blue.

5. Document Outline
● Shows a tree view of all controls on the screen.
● Helps you select and arrange nested elements.
Like a folder structure for your controls.

6. Solution Explorer
● Lists all files in your project (XAML files,
VB.NET code, resources).
● Use this to open different windows or pages.

Workflow
1. Drag a Button from Toolbox to Design View
2. Set its Name and Content using the Properties window
3. Switch to XAML View to see the code
4. Write VB.NET code in MainWindow.xaml.vb for button click

Using XAML in WPF 4.5 applications
XAML (Extensible Application Markup Language) is a special language used in
WPF to design the user interface (UI) using XML-style tags.
You don’t need to write full code to design buttons, labels, etc.
Why Use XAML in WPF?
Easier to design UI without writing a lot of code
Clean and readable layout for windows and controls
Allows separation of design (XAML) and logic (VB.NET/C# code)
Works with Visual Studio Designer for drag-and-drop design

WPF Events
Definition:
An event is something that happens in the application (like a mouse click, key press, or window load)
that you can respond to with code.
Event Types in WPF:
1. Direct Events
○ Happen only on the control that triggers them.
○ Example: A TextBox.TextChanged event is handled only by that textbox.
2. Bubbling Events
○ Start from the control that raised the event and move upward through its parent elements.
○ Example: A Button.Click event will first be handled by the button, then can be handled by its parent StackPanel, then
by the Window.
3. Tunneling Events (Preview Events)
○ Start from the root element and travel down to the control that triggered them.
○ Name usually starts with “Preview” (like PreviewMouseDown).

Working with dialog boxes in WPF application
A small pop-up window that interacts with the user to:
● Show information
● Ask for confirmation
Types of Dialog Boxes in WPF
1. MessageBox – Displays messages, warnings, or confirmations
2. OpenFileDialog – Lets user choose a file to open
3. SaveFileDialog – Lets user choose where to save a file
4. Custom Dialog – Your own WPF window for input

Save File dialog box
The save file dialog box is used by file saving functionality to retrieve the name of a file to save.

Message boxes
A message box is a dialog box that can be used to display textual information and to allow users to make decisions with
buttons. The following figure shows a message box that asks a question and provides the user with three buttons to answer
the question.

Open Folder dialog box
The Open Folder dialog box is used by the user to select one or more folders, and return them to the program. For
example, if your program displayed information about a folder, such as the amount of files and the file names in the folder,
you can use the Open Folder dialog to let the user choose the folder.

Print dialog box
The print dialog box is used by printing functionality to choose and configure the printer that a user wants to print data to.

Open File dialog box
The open file dialog box is used by file opening functionality to retrieve the name of a file to open.

Steps to Compile and Run WPF 4.5 Applications
1. Create the Application
1. Open Visual Studio.
2. Go to File → New → Project.
3. Select WPF Application (.NET Framework) (make sure the framework version is 4.5).
4. Give a name to your project and click OK.
2. Write/Design Your Application
● Design your UI using the Designer view (drag-and-drop controls) or XAML view (write markup
manually).
● Write code in the .xaml.cs file for event handling (e.g., button clicks).

3. Compile the Application
● Compilation means converting your XAML code into an executable (.exe) and other files.
● In Visual Studio, click:
○ Build → Build Solution
or press Ctrl + Shift + B.
● If there are no errors, the output appears in the Output Window saying “Build succeeded”.
4. Run the Application
● Click the Start button (green triangle)
or press F5 (to run with debugging)
or press Ctrl + F5 (to run without debugging).
● Visual Studio will:
1. Compile your code.
2. Launch the .exe file inside the binDebug or binRelease folder of your project.

5. Output
● The WPF window you designed will open as a desktop application.
● You can interact with buttons, text boxes, etc., just like a normal Windows app.

WPF 4.5 Controls
Controls are the UI elements that users interact with in a WPF application.
They are placed inside windows or other containers.
Examples:
● Content Controls – Button, Label, TextBlock, CheckBox
● Text Controls – TextBox, PasswordBox, RichTextBox
● List Controls – ListBox, ComboBox, ListView
● Layout Controls – Grid, StackPanel, DockPanel, WrapPanel
● Menu & Toolbar Controls – Menu, ToolBar
● Date & Time – DatePicker, Calendar

WPF Resources
Resources are reusable objects (like colors, brushes, styles) that you define once and use many times.
Types of Resources:
● StaticResource – Loaded once at the start.
● DynamicResource – Loaded at runtime and can change.
Example:
<Window.Resources>
<SolidColorBrush x:Key="MyBrush" Color="LightBlue"/>
</Window.Resources>
<Button Background="{StaticResource MyBrush}" Content="Hello"/>

WPF Styles
Styles define a set of property values for controls, so you don’t repeat the same settings.
Example:
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="LightGreen"/>
<Setter Property="FontSize" Value="16"/>
</Style>
</Window.Resources>
<Button Content="Submit"/>
<Button Content="Cancel"/>
(Both buttons will have the same background and font size)

4. WPF Templates
Templates decide how a control looks.
Types:
● ControlTemplate – Changes the whole appearance of a control.
● DataTemplate – Changes how data is displayed in items controls.
Example (ControlTemplate):
<Window.Resources>
<ControlTemplate TargetType="Button">
<Border Background="Orange" CornerRadius="10" Padding="5">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Window.Resources>
<Button Content="Styled Button"/>

5. WPF Commands
Commands represent an action (like Copy, Save, Delete) that can be executed from multiple sources (button, menu, keyboard
shortcut).
Built-in Commands Examples:
● ApplicationCommands.Copy
● ApplicationCommands.Paste
● NavigationCommands.BrowseBack

Unit 1-Visual Programming-WPF--Part2.pdf

More Related Content

Similar to Unit 1-Visual Programming-WPF--Part2.pdf

More from SonaShaiju1

Recently uploaded

Unit 1-Visual Programming-WPF--Part2.pdf