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

2 Lecture Contents: §Evolution of SW Building Apps technologies §Intro to WPF programming model §Building a Win WPF application §Creating a Win WPF application l Design view l 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, 2001 §First 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 design §Technology for developing future windows applications §Reuse of existing code §Advanced Data-Binding §Supported 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 8 §Applications 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 § /michael-wallent-advent-and-evolution- of-wpfhttp://channel9.msdn.com/blogs/charles /michael-wallent-advent-and-evolution- of-wpf History of WPF development § – tutorials in various topics. Free for students DreamSpark registration required. § amples - Code sampleshttp://archive.msdn.microsoft.com/wpfs amples

Microsoft Visual Studio &.NET Framework 3.0 or higher and WPF technology for building applications

Building WPF applications §WPF 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: l The design view l The code view §Code and Text Editor window used to modify code and logic for a graphical app §Design View window used to layout UI §Easy to switch between the two views whenever user wants

Note §MS VS provides two templates for building graphical apps: l Windows Forms Application template l 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.

Assoc. Prof. Stoyan Bonev Building C# WPF applications.

Assoc. Prof. Stoyan Bonev Building C# WPF applications.

Assoc. Prof. Stoyan Bonev Building C# WPF applications.

20 Demo §One more comprehensive example

Windows Presentation Foundation Figure WPF design

22 My first WPF application §Write 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 l Click the Toolbox tab l Select/click Label, click visible part of the form l Reposition and resize the label, l On the View menu, click Properties window, change Content property. Another way to modify same property is through XAML pane tag, Content attribute

24 My first WPF application l Click the Toolbox tab l Select/click TextBox, click visible part of the form l Reposition and resize the textbox, l On the View menu, click Properties window, change Text property. Another way to modify same property is through XAML pane tag, Text attribute

25 My first WPF application l Click the Toolbox tab l Select/click Button, click visible part of the form l Reposition and resize the button, l On the View menu, click Properties window, change Content property. Another way to modify same property is through XAML pane tag, Content attribute

26 My first WPF application §Build Solution to verify the project builds successfully §Click Start without Debugging l Form gets displayed l You type your name in the text box displayed l Nothing happens §You managed a C# application without writing any line of C# source code

27 My first WPF application §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 My first WPF application §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 l Starting up an application l Displaying the form etc.

29 My first WPF application §In Solution explorer click ‘+’ beside the file MainWindow.xaml §The MainWindow.xaml.cs file appears. §Open the ….cs file... l You see a lot of using namespace stmts l You see definition of a class MainWindow : Window l You see a constructor that calls method InitializeComponent(); l 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 My first WPF application §Now you may be wondering l Where is the Main() method l How the form gets displayed when the app runs §In Solution explorer you can see one more XAML file, App.xaml

31 My first WPF application §In Solution explorer click ‘+’ beside the file App.xaml §The App.xaml.cs file appears. §Open the App.xaml.cs file l You see a lot of using namespace stmts. l You see not a lot else (there is a lot of hidden code l The Main() method is hidden as well. But its code is generated based on settings of the App.xaml file l Main() method will create and display the form by the StartupURI property.

32 My first WPF application §Now, it’s time to start writing C# source code, i.e. the EvH associated with the Button.

33 My first WPF application §Double click on the button control §Source code window opens §You have to fill the body of the EVHandler method MessageBox.Show(“Hello, “ + textBox1.Text); §Rebuild the solution §Click the button §The program works.

34 More details on building WPF apps

35 Creating a Win WPF application §A simple app §Concentrate on laying out the form §Make sure that app works l Create sbWPF1 project File > New > Project Proje ct template: Visual C#, Windows Project type: WPF application Project Name: sbWPF1 Project location: … §New project is created. Contains blank form called MainWindow

36 Creating a Win WPF application §XAML pane contains XAML definition of a form <Window x:Class="sbWPF1.MainWindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> 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 Creating a Win WPF application §Info in advance §Three ways to modify attribute values: l Changing them in XAML pane l Using the Properties window l Changing dynamically by writing C# code that executes when the form runs

38 Creating a Win WPF application §The XAML pane: §The Window element contains child element called Grid §In WPF app, controls placed in a panel on form. The panel manages the layout of controls §The default panel for WPF is Grid §Extra panels that provide other layout styles: l StackPanel l WrapPanel

39 Creating a Win WPF application §Click the form §Click the Toolbox tab §Click a Button control §Click 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 Creating a Win WPF application §Examine the code in XAML pane: §Build and run the application §Resize the window §Trace the button: location and size

41 Creating a Win WPF application §Return to IDE §Click the left anchor point to attach the button to left edge of the form §Examine the XAML pane and fix differences §Run the app. l 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 Creating a Win WPF application §Return to IDE §Click 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. l 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 Creating a Win WPF application §Return to IDE §Create a second Button control §Modify the Margin attribute to “0,0,0,0” §Button fills entire form if no width/height attr §Run the app. l 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!