Transcript Introduction to WPF - Develop-One

Introduction to WPF
Windows Presentation Foundation
codename “Avalon”
Mark Blomsma
Software architect
Develop-One
Agenda





1/27/2006
Introductions
Why WPF?
Demo’s : The Basics
Visual Studio “Orcas” with “Cider”
Expressions Interactive Designer
© 2006 Develop-One
2
Mark Blomsma
 Professional developer since 1992
 Microsoft Certified Professional
 Microsoft Most Valuable Professional
(MVP) for three years running
 Consultant at Develop-One
 Software Architect at Omnext.NET
1/27/2006
© 2006 Develop-One
3
Why WPF?
 Windows Presentation Foundation, part
of WinFx, is a completely new
presentation framework replacing User,
GDI, GDI+, Win32
 Competes with HTML, Macromedia
Flash, SVG
 Give developers the tools to make
Office quality applications, but also
Flash like websites.
1/27/2006
© 2006 Develop-One
4
Demo’s : The Basics





1/27/2006
Hello World
The Application Object
The content model
EventHandling
Databinding
© 2006 Develop-One
5
Hello World
 C# example
using System;
using System.Windows;
namespace AvalonExample {
class MyApp {
[STAThread]
static void Main(){
MessageBox.Show(“Hello World!”);
}
}
}
1/27/2006
© 2006 Develop-One
6
Hello World
 XAML example
<Page
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<TextBlock>Hello World!</TextBlock>
</Page>
1/27/2006
© 2006 Develop-One
7
Application Object
 Application object acts as container for
more
applications
public
classcomplex
MyApp : Application
{
[STAThread]
MainWindow
static void Main(string[] args)
{ Application events like
MyApp app = new MyApp();
app.Startup
app.OnApplicationStartup;

Startup &+=Shutdown
app.Run(args);
}
void OnApplicationStartup(object sender,
StartupEventArgs e)
{
Window w = new Window();
w.Title = "Mark says: Hello World!";
w.Show();
}
}
1/27/2006
© 2006 Develop-One
8
Content Model
 WPF offers strong separation of
behaviour (API) and presentation
 Behaviour (API) consists of
 Commands, Properties, Events & Methods
 Presentation of controls is controlled by
 Nested content
 Templates
1/27/2006
© 2006 Develop-One
9
StackPanel example
<Window x:Class="Demo4.Content.Window1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Title="Demo4.Content">
<StackPanel Orientation=“Vertical">
<Button Name="button1">Just text</Button>
<Button Name="button2">
<Image Source="banner.jpg" Name="image1" Width="100"/>
</Button>
<Button Name="button3">
<StackPanel Orientation="Vertical">
<TextBlock>Just text<LineBreak/>The next line</TextBlock>
<Image Source="banner.jpg" Name="image1" Width="100"/>
</StackPanel>
</Button>
</StackPanel>
</Window>
1/27/2006
© 2006 Develop-One
10
Grid example
<Window x:Class="Demo4.Content.Window1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Title="Demo4.Content">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">Top left</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1">Middle</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="2">LRight</TextBlock>
</Grid>
</Window>
1/27/2006
© 2006 Develop-One
11
Eventhandling
 Most significant feature is ‘Event
Bubbling’
called ‘EventRouting’
void
innerButton_Click(object
sender, RoutedEventArgs
{
e)
 RoutedEventArgs
MessageBox.Show("Hello SDN!");
 e.Handled
= true;
e.Handled = true;
}
1/27/2006
© 2006 Develop-One
12
Databinding
 New ways of databinding?
 Important features:




Window.DataContext
StaticResources
DataTemplates
ObservableCollection
 Tip: Use INotifyPropertyChanged
1/27/2006
© 2006 Develop-One
13
Databinding example
<StackPanel Name="pnlMain">
<TextBlock>Name: </TextBlock>
<TextBox Name="txtName"
Text="{Binding Path=Name}“/>
<TextBlock>City:</TextBlock>
<TextBox Name="txtCity"
Text="{Binding Path=City}“/>
<StackPanel Orientation="Horizontal">
<Button Name="btnPrevious“
Click="btnPrevious_Click">&lt;</Button>
<Button Name="btnNext“
Click="btnNext_Click">&gt;</Button>
</StackPanel>
<ListBox Name="lstCustomers“
IsSynchronizedWithCurrentItem="True“
ItemsSource="{Binding}"/>
</StackPanel>
1/27/2006
© 2006 Develop-One
14
Demo : “Orcas” with “Cider”
 Demo based on the March CTP
 Download from
http://msdn.microsoft.com/windowsvista
1/27/2006
© 2006 Develop-One
15
Demo :
Expressions Interactive Designer
 A.k.a. “Sparkle”
 Will this kill Macromedia Flash?
 Download from
http://msdn.microsoft.com

1/27/2006
(http://www.microsoft.com/downloads/details.aspx?FamilyId=D1336F3E-E677-426B-925C-C84A54654414&displaylang=en)
© 2006 Develop-One
16
Links
1/27/2006



http://www.microsoft.com/products/expression/en/default.mspx
http://blogs.infosupport.com/ernow/
http://channel9.msdn.com/wiki/default.aspx/Cider.HomePage

http://www.develop-one.com
© 2006 Develop-One
17