winfx a lap around the windows presentation foundation
Download
Skip this Video
Download Presentation
WinFX – A Lap Around the Windows Presentation Foundation

Loading in 2 Seconds...

play fullscreen
1 / 37

WPF v1.1 - speaker - PowerPoint PPT Presentation


  • 272 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'WPF v1.1 - speaker' - paul


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
winfx a lap around the windows presentation foundation

WinFX – A Lap Around the Windows Presentation Foundation

Bart J.F. De Smet

MVP Visual C#

[email protected]

http://blogs.bartdesmet.net/bart

agenda
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 windows presentation foundation vision
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
agenda10
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
Introducing XAMLThe 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

page1.html

image1.svg

window1.xaml

public class Form1

: Form

{

public Form1()

{

Button b = new Button();

b.Text = "Hello World";

}

}

<html>

<button>

Hello World

</button>

</html>

<rect>

<text>hello world</text>

</rect>

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Window1"

>

<Button>

<TextBlock>

<Rectangle Width="50" Height="50" Fill="Red" />

Hello <Bold>World</Bold>

</TextBlock>

</Button>

</Window>

dialog1.rc

BEGIN DIALOG

BUTTON "HELLO WORLD"

END DIALOG

Introducing XAMLWhat’s the big deal?
agenda13
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
Taming the toolsDeveloper 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
slide15

XamlPad

  • Visual Studio 2005
agenda16
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
Getting StartedThe picture that tells it all

Applications

Controls

Styling and Templates

Layout

Data

Content

Actions

controls talking about challenges
ControlsTalking about challenges

Controls are not flexible

Low flexibility to adapt controls to the developer’sand end-user’s visual needs.

The “gray box” problem

Your only customization points are the onesin 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
ControlsWPF’s “realizing your potential”

Newcontrols built forthe platform, usingthe platform

Globalization, localization, accessibility, eventing, etc

Controls that can containanything

.Content explained

Controls that have the look you want

Layout, graphics, visuals theming, etc

controls content new text
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
LayoutWPF’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
slide22

Controls

  • Layout
  • Styles
databinding binding in markup
DatabindingBinding 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
DatabindingObject Data Sources
  • Connect UI to data objects
    • E.g. business entities
  • Add to resource dictionary
    • Named source objects
    • <Window.Resources> element
  • Use with resource binding
    • Source “property”
    • {StaticResource myData}

<Window>

<Window.Resources>

<ObjectDataProvider

x:Key="myData"

TypeName="Foo" />

</Window.Resources>

</Window>

<TextBlock TextContent="

" />

<TextBlock TextContent="{Binding Path= ,

Source= }" />

<TextBlock TextContent="{Binding Path= ,

Source={StaticResource myData} }" />

<TextBlock TextContent="{Binding Path=Bar,

Source={StaticResource myData} }" />

databinding binding to xml

cars.xml

<Cars>

<Car Make="Ford" Model="F-150">

<Image>truck.png</Image>

</Car>

</Cars>

DatabindingBinding to XML
  • XML is everywhere
  • Built-in support for XPath

<Window>

<Window.Resources>

<XmlDataProvider x:Key="cars" XPath="/Cars/Car" Source="cars.xml" />

</Window.Resources>…

</Window>

<TextBlock TextContent="{Binding [email protected],

Source={StaticResource cars} }" />

slide26

Binding controls

  • Binding objects
  • Binding XML
databinding controls think data
DatabindingControls 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

DataTemplate

DatabindingDefining Data Templates

class Car

{

string Image {get;set;}

string Model {get;set;}

}

<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
DatabindingUsing 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}” />
graphics a macroscopic view
GraphicsA 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
slide32

Transformations

  • Playing with graphics
text and documents text is everywhere
Text and DocumentsText Is Everywhere
  • Natural Reading
    • ClearType
    • Sub-pixel positioning
    • Anti-aliasing
  • Adobe Compact Font Format (CFF) support
  • Controls
    • SinglePageViewer
    • FlowDocument
    • Annotation support
agenda35
Agenda
  • WPF – What’s in a name?
  • Introducing XAML
  • Taming the tools
  • Getting started
    • Controls
    • Layout
    • Databinding
    • Graphics
    • Text and Documents
  • Conclusion + Q&A
ad