Car and Truck Templates for Graphics - PowerPoint

Document Sample
Car and Truck Templates for Graphics - PowerPoint Powered By Docstoc
					WinFX – A Lap Around the
 Windows Presentation
      Foundation
         Bart J.F. De Smet
           MVP Visual C#
       info@bartdesmet.net
 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
    : Form
    dialog1.rc
  <Window
{
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    public DIALOG
    BEGIN Form1()
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    { BUTTON "HELLO WORLD"
        page1.html
     x:Class="Window1"
        Button b = new Button();
    END DIALOG
     > b.Text = "Hello World";
        <html>
    }
           <button>
             image1.svg
}    <Button>Hello World
       <TextBlock>
           </button>
             <rect>
        </html>
         <Rectangle Width="50" Height="50" Fill="Red" />
               <text>hello world</text>
       Hello <Bold>World</Bold>
          </rect>
     </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                       <Slider
  Source="truck.png"           Orientation="Horizontal"
  Canvas.Left=                 Name="horzPos"
    "{Binding Path=Value,      Value="40"
     ElementName=horzPos}"   />
/>

  {Binding Path=Value, ElementName=horzPos}
                Databinding
             Object Data Sources

 Connect UI to data objects
   E.g. business entities     <Window>
                                <Window.Resources>
 Add to resource dictionary       <ObjectDataProvider
   Named source objects            x:Key="myData"
   <Window.Resources> element      TypeName="Foo" />
                                </Window.Resources>
 Use with resource binding      …
   Source “property”          </Window>
   {StaticResource myData}


           TextContent="{Binding Path=
<TextBlock TextContent="                 ,
                                 Path=Bar,
     Source={StaticResource myData} }" />
     Source=                         "
               Databinding
                Binding to XML

 XML is everywhere
                                  <Window>
 Built-in support for XPath
                                    <Window.Resources>
cars.xml                              <XmlDataProvider
<Cars>                                 x:Key="cars"
  <Car Make="Ford" Model="F-150">      XPath="/Cars/Car"
     <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?

				
DOCUMENT INFO
Description: Car and Truck Templates for Graphics document sample