The Connected Generation - B# .NET Technical Community

Transcript The Connected Generation - B# .NET Technical Community

WinFX – A Lap Around the
Windows Presentation
Foundation
Bart J.F. De Smet
MVP Visual C#
[email protected]
http://blogs.bartdesmet.net/bart
Agenda
WPF – What’s in a name?
Introducing XAML
Taming the tools
Getting started
Controls
Layout
Databinding
Graphics
Text and Documents
Conclusion + Q&A
WPF – What’s in a name?
Roadblocks
WPF – What’s in a name?
Technology Islands
WPF – What’s in a name?
No Design Protocol
WPF – What’s in a name?
Your “Dear” Powerful GPU
WPF – What’s in a name?
True Smart Client Not Possible
Everyone has part of
the picture, but no
one has it together
seamless deploy
rich user experience
navigation
connectivity & offline
WPF – What’s in a name?
Windows Presentation Foundation Vision
Unified approach to UI,
Documents, and Media
Integration as part of
development and experience
Integrated, vector-based
composition engine
Utilizing the power of the PC
throughout the graphics stack
Declarative programming
Bringing designers directly
into application development
Ease of deployment
Allowing administrators to
deploy and manage
applications securely
Agenda
WPF – What’s in a name?
Introducing XAML
Taming the tools
Getting started
Controls
Layout
Databinding
Graphics
Text and Documents
Conclusion
Introducing XAML
The Art of Declarative Programming
History goes on
Visual Basic Forms Designer (remember .frm & .frx?)
The “Windows Form Designer generated code”
Partial classes
.NET declarative programming model
“eXtensible Application Markup Language”
Namespace, Classes, Properties and Events mapping
XAML is not WPF only
WPF in XAML
Integrated UI, Media, Documents in markup
Enables developer designer workflow
Introducing XAML
What’s the big deal?
form1.cs
window1.xaml
public class Form1
:dialog1.rc
Form
<Window
{
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
public
Form1()
BEGIN
DIALOG
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
{ BUTTON
"HELLO WORLD"
page1.html
x:Class="Window1"
Button
END DIALOG b = new Button();
= "Hello World";
> b.Text
<html>
}
<button>
image1.svg
}
<Button>
Hello World
</button>
<TextBlock>
<rect>
</html>
<Rectangle
Width="50"
Height="50" Fill="Red" />
<text>hello
world</text>
</rect>
Hello
<Bold>World</Bold>
</TextBlock>
</Button>
</Window>
Agenda
WPF – What’s in a name?
Introducing XAML
Taming the tools
Getting started
Controls
Layout
Databinding
Graphics
Text and Documents
Conclusion + Q&A
Taming the tools
Developer and Designer Productivity
Notepad
Once in a WPF developer’s lifetime xp 
XamlPad
The fastest WYSIWYG tool for WPF
Visual Studio 2005
“Cider”
Your number one development tool
Expression Interactive Designer
“Sparkle”
Closing the gap with the graphical designer
XamlPad
Visual Studio 2005
Agenda
WPF – What’s in a name?
Introducing XAML
Taming the tools
Getting started
Controls
Layout
Databinding
Graphics
Text and Documents
Conclusion + Q&A
Getting Started
The picture that tells it all
Applications
Controls
Styling and Templates
Layout
Data
Content
Actions
Controls
Talking about challenges
Controls are not flexible
Low flexibility to adapt controls to the developer’s
and end-user’s visual needs.
The “gray box” problem
Your only customization points are the ones
in the property browser.
No “pay for play”
Advanced customization requires significantly more work
(a.k.a. the “OwnerDraw” nightmare).
Controls
WPF’s “realizing your potential”
New controls built for the platform, using the platform
Globalization, localization, accessibility, eventing, etc
Controls that can contain anything
.Content explained
Controls that have the look you want
Layout, graphics, visuals theming, etc
Controls
.Content == new(.Text)
Replacing .Text but richer
WPF C#
Button.Content = “Hello World”;
WPF XAML
<Button>Hello World</Button>
<Button><Image Source=“...”/></Button>
An improved approach for data
myButton.Content = new Customer(...);
You get back what you put in
Developer deals with data, designer deals with the
visualization
Layout
WPF’s Layout Toolbox
Canvas
The old (bad) absolute positioning
StackPanel
The simplest automatic layout
DockPanel
Dock controls on top, left, right, bottom and fill
Grid
Partitions the UI in rows and columns
TextFlow
Present text in a (typographically) user-friendly way
Controls
Layout
Styles
Databinding
Binding in Markup
<Image
Source="truck.png"
Canvas.Left=
"{Binding Path=Value,
ElementName=horzPos}"
/>
<Slider
Orientation="Horizontal"
Name="horzPos"
Value="40"
/>
{Binding Path=Value, ElementName=horzPos}
Databinding
Object Data Sources
Connect UI to data objects
<Window>
<Window.Resources>
Add to resource dictionary
<ObjectDataProvider
Named source objects
x:Key="myData"
TypeName="Foo" />
<Window.Resources> element
</Window.Resources>
Use with resource binding
…
Source “property”
</Window>
{StaticResource myData}
E.g. business entities
<TextBlock TextContent="{Binding
TextContent="
Path=
Path=Bar,
,
Source=
Source={StaticResource
myData} }"
" />
Databinding
Binding to XML
XML is everywhere
Built-in support for XPath
<Window>
<Window.Resources>
<XmlDataProvider
cars.xml
x:Key="cars"
<Cars>
XPath="/Cars/Car"
<Car Make="Ford" Model="F-150">
<Image>truck.png</Image>
Source="cars.xml"
</Car>
/>
…
</Window.Resources>
</Cars>
…
</Window>
<TextBlock TextContent="{Binding XPath=@Make,
Source={StaticResource cars} }" />
Binding controls
Binding objects
Binding XML
Databinding
Controls Think Data
ContentControl – singular content
Button, CheckBox, Label, ListBoxItem, …
ItemsControl – plural content
ListBox, ComboBox, Menu, TabControl, ToolBar, …
Can use data objects as content
myButton.Content = new Car(…);
myListBox.Items.Add(new Car(…));
Car c = (Car) myListBox.SelectedItem;
Databinding
Defining Data Templates
class Car
{
string Image {get;set;}
string Model {get;set;}
}
DataTemplate
<DataTemplate x:Key="carTemplate">
<Border BorderBrush="Blue" BorderThickness="2" Background="LightGray"
Margin="10" Padding="15,15,15,5">
<StackPanel>
<Image HorizontalAlignment="Center" Source="{Binding Path=Image}" />
<Border HorizontalAlignment="Center" BorderBrush="Navy"
Background="#DDF“ BorderThickness="1" Margin="10" Padding="3">
<TextBlock FontSize="18" TextContent="{Binding Path=Model}" />
</Border>
</StackPanel>
</Border>
</DataTemplate>
Databinding
Using Data Templates
Bind to a type
<Application … xmlns:src=“clr-namespace:MyNamespace”>
<Application.Resources>
<DataTemplate DataType=“{x:Type src:Car}”>
…
</DataTemplate>
</Application.Resources>
Bind explicitly
<Application.Resources>
<DataTemplate x:Key=“cars”>
…
</DataTemplate>
</Application.Resources>
<ContentControl …
ContentTemplate=“{StaticResource cars}” />
Binding with templates
Graphics
A Macroscopic View
WPF is a graphical foundation
2D and 3D graphics
Multimedia support
A bunch of shapes
Transforms
Gradients
Brushes
...
Based on vector graphics
Superb quality
Superb performance
Transformations
Playing with graphics
Text and Documents
Text Is Everywhere
Natural Reading
ClearType
Sub-pixel positioning
Anti-aliasing
Adobe Compact Font
Format (CFF) support
Controls
SinglePageViewer
FlowDocument
Annotation support
Putting it together
Agenda
WPF – What’s in a name?
Introducing XAML
Taming the tools
Getting started
Controls
Layout
Databinding
Graphics
Text and Documents
Conclusion + Q&A
Conclusion + Q&A
Questions?

The Connected Generation - B# .NET Technical Community

Transcript The Connected Generation - B# .NET Technical Community

Directory