Winfx a lap around the windows presentation foundation
Download
1 / 37

WPF v1.1 - speaker - PowerPoint PPT Presentation


  • 271 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 l.jpg

WinFX – A Lap Around the Windows Presentation Foundation

Bart J.F. De Smet

MVP Visual C#

[email protected]

http://blogs.bartdesmet.net/bart


Agenda l.jpg
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 technology islands l.jpg
WPF – What’s in a name?Technology Islands


Wpf what s in a name no design protocol l.jpg
WPF – What’s in a name?No Design Protocol


Wpf what s in a name your dear powerful gpu l.jpg
WPF – What’s in a name?Your “Dear” Powerful GPU


Wpf what s in a name true smart client not possible l.jpg

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?True Smart Client Not Possible


Wpf what s in a name windows presentation foundation vision l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

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 l.jpg
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 l.jpg
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 l.jpg


Agenda16 l.jpg
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 l.jpg
Getting StartedThe picture that tells it all

Applications

Controls

Styling and Templates

Layout

Data

Content

Actions


Controls talking about challenges l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg


Databinding binding in markup l.jpg
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 l.jpg
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 l.jpg

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 l.jpg


Databinding controls think data l.jpg
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 l.jpg

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 l.jpg
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 l.jpg
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 l.jpg


Text and documents text is everywhere l.jpg
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 l.jpg
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 l.jpg
Conclusion + Q&A

  • Questions?


ad