View
215
Download
0
Category
Tags:
Preview:
Citation preview
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
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
.
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 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
My first WPF application
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
My first WPF application
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
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 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
My first WPF application
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
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
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
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 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
Creating a Win WPF application
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
Creating a Win WPF application
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
Creating a Win WPF application
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
Creating a Win WPF application
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
Creating a Win WPF application
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
Creating a Win WPF application
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
Creating a Win WPF application
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
Creating a Win WPF application
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!
Recommended