1 COS240 O-O Languages AUBG, COS dept Lecture 33 Building Apps Technologies C# (WPF part 1)

1

COS240 O-O LanguagesAUBG, COS dept

Lecture 33

Building Apps TechnologiesC# (WPF part 1)

2

Lecture Contents:

Evolution of SW Building Apps technologiesIntro to WPF programming modelBuilding a Win WPF applicationCreating a Win WPF application

Design view XAML pane

What is WPF?

Windows Presentation Foundation (WPF) is a next-generation presentation system for building Windows client applications with visually stunning user experiences. – Official Microsoft Definition Based on: .NET platform Extensible Application Markup Language (XAML)

When and Why developed?All started with Avalon, 2001First version of WPF 3.0, 2006 as a part

of .NET framework 3.0. The main features of WPF 4.0/4.5:

Uses Direct3D for graphics rendering Separation between UI and business logic Animations Various Data-Binding methods Imaging

Advantages of WPF

Easy to create stunning designTechnology for developing future

windows applicationsReuse of existing codeAdvanced Data-BindingSupported by Microsoft

Disadvantages of WPF

Requires .NET Framework 3.0 or higher

Comparatively slower than Windows Forms

Requires DirectX9 compatible video card for graphics

To use or not to use WPF?

To use in : Applications with 2D-3D graphics.Applications for Windows 8Applications with UI design Application using various media types

Not to use in: Applications for older versions of Windows Applications that does not require fancy UI

Resources

http://channel9.msdn.com/blogs/charles/michael-wallent-advent-and-evolution-of-wpf

History of WPF development www.pluralsight-training.net – tutorials

in various topics. Free for students DreamSpark registration required.

http://archive.msdn.microsoft.com/wpfsamples - Code samples




http://www.pluralsight-training.net/

http://archive.msdn.microsoft.com/wpfsamples

http://archive.msdn.microsoft.com/wpfsamples

Microsoft Visual Studio &.NET Framework 3.0 or higher

and

WPF technology for building applications

Building WPF applicationsWPF approach may apply for C# and

VBasic.

UI is described using XAML /Extensible Application Markup Language/.

Resource definition language and .rc file(s) as well as resource compiler replaced with XAML.

Creating WPF graphical applications

You design the form-based UI of a Windows-based app interactively

IDE generates code to implement UI that you designed

IDE provides two views of a graphical app: The design view The code view

Code and Text Editor window used to modify code and logic for a graphical app

Design View window used to layout UIEasy to switch between the two views whenever

user wants

Note

MS VS provides two templates for building graphical apps: Windows Forms Application template WPF Application template

Win Forms Framework as a technology appeared first with .NET 1.0

WPF is enhanced technology, first appeared with .NET 3.0

Note

Interface for Visual Studio 2010 was built using WPF

Vector-based and resolution-independent graphics

As with WinForms, drag and drop controls from the Toolbox onto the window

Building C# WPF applications.

Creating WPF graphical applications

VS displays an empty WPF form in the Design View window, together with another window containing the XAML description of the form, as shown next slide

XAML is used by WPF applications to define the layout of a form and its contents.

Assoc. Prof. Stoyan Bonev

Building C# WPF applications

.



.



.



.

20

Demo

One more comprehensive example

Windows Presentation Foundation

Figure 10-19 WPF design

22

My first WPF applicationWrite a program to display an elementary

simple form containing 3 controls:a label a text box where you can enter your name

and a button that displays a personalized

greeting in a message box

Solve task using your skills from Win Forms technology

23

My first WPF application

Create you WPF project, named sbWPFHello.Create the UI

Click the Toolbox tab Select/click Label, click visible part of the form Reposition and resize the label, On the View menu, click Properties window,

change Content property. Another way to modify same property is through XAML pane <Label> tag, Content attribute

24


Click the Toolbox tab Select/click TextBox, click visible part of the

form Reposition and resize the textbox, On the View menu, click Properties window,

change Text property. Another way to modify same property is through XAML pane <TextBox> tag, Text attribute

25


Click the Toolbox tab Select/click Button, click visible part of the form Reposition and resize the button, On the View menu, click Properties window,

change Content property. Another way to modify same property is through XAML pane <Button> tag, Content attribute

26

My first WPF applicationBuild Solution to verify the project builds

successfullyClick Start without Debugging

Form gets displayed You type your name in the text box displayed Nothing happens

You managed a C# application without writing any line of C# source code

27


You managed a C# application without writing any line of C# source code

IDE generates a lot of code. Examine the .cs files attached to the project

You need to add the EvH code associated with the button control

28


Before we include EvH code, examine what IDE generated as C# source code:

The generated code handles routine tasks that all graphical apps must perform such as Starting up an application Displaying the form etc.

29

My first WPF applicationIn Solution explorer click ‘+’ beside the file

MainWindow.xamlThe MainWindow.xaml.cs file appears.Open the ….cs file. ..

You see a lot of using namespace stmts You see definition of a class MainWindow : Window You see a constructor that calls method InitializeComponent(); The purpose of code you see is that you can add your

own methods to handle the logic for your application, such as what happens when the user clicks a button

30


Now you may be wondering Where is the Main() method How the form gets displayed when the app runs

In Solution explorer you can see one more XAML file, App.xaml

31


In Solution explorer click ‘+’ beside the file App.xaml

The App.xaml.cs file appears.Open the App.xaml.cs file

You see a lot of using namespace stmts. You see not a lot else (there is a lot of hidden code The Main() method is hidden as well. But its code is

generated based on settings of the App.xaml file Main() method will create and display the form by

the StartupURI property.

32


Now, it’s time to start writing C# source code, i.e. the EvH associated with the Button.

33

My first WPF applicationDouble click on the button controlSource code window opensYou have to fill the body of the EVHandler method

MessageBox.Show(“Hello, “ + textBox1.Text);

Rebuild the solutionClick the buttonThe program works.

34

More details on building WPF apps

35

Creating a Win WPF application

A simple appConcentrate on laying out the formMake sure that app works

Create sbWPF1 project• File > New > Project

• Project template: Visual C#, Windows•Project type: WPF application•Project Name: sbWPF1•Project location: …

New project is created. Contains blank form called MainWindow

36


XAML pane contains XAML definition of a form<Window x:Class="sbWPF1.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>

Class attribute specifies full name of the class that implements the form.

Name of the appllication sbWPF1 is default namespace for forms.

Xmlns attributes specify XML namespaces that define schemas used by WPF

Title attribute …

Height and Width attributes …

37


Info in advance

Three ways to modify attribute values: Changing them in XAML pane Using the Properties window Changing dynamically by writing C# code that

executes when the form runs

38


The XAML pane: The Window element contains child element

called GridIn WPF app, controls placed in a panel on form.

The panel manages the layout of controlsThe default panel for WPF is GridExtra panels that provide other layout styles:

StackPanel WrapPanel

39


Click the formClick the Toolbox tabClick a Button controlClick the upper-right part of the form

A Button control with two connectors anchoring it to the top and right edges of the form is added to the form

Although you click the form, the Button control is added to the Grid control contained in the form. /XAML pane: Button located inside Grid/

40


Examine the code in XAML pane:<Grid> <Button Content="Button1" Height="23"

HorizontalAlignment=“Right" Margin="358,49,0,0" Name="button1" VerticalAlignment="Top" Width="75" />

</Grid>

Build and run the applicationResize the windowTrace the button: location and size

41


Return to IDEClick the left anchor point to attach the button to

left edge of the form

Examine the XAML pane and fix differences

Run the app. Resize the window. The button no more moves as it is

anchored to both /left & right/ edges of the form. Button gets resized horizontally.

42


Return to IDEClick the down side anchor point to attach the

button to bottom edge of the form

Examine the XAML pane and fix differences

Run the app. Resize the window. The button no more moves as it

is anchored to all /left & right, top and bottom/ edges of the form. Button gets resized horizontally and vertically.

43


Return to IDECreate a second Button controlModify the Margin attribute to “0,0,0,0”Button fills entire form if no width/height attr

<Button Content="Button" Margin="0,0,0,0" Name="button2“ />

Run the app. Resize the window. The new button relocates itself trying

to maintain its relative position with respect to all four sides of the form

44

Questions? And/Or

Thank You For

Your Attention!

Documents

1 COS240 O-O Languages AUBG, COS dept Lecture 33 Building Apps Technologies C# (WPF part 1)