Silverlight PPt

Document Sample
Silverlight PPt Powered By Docstoc
					 Framework for building rich, browser hosted applications that can
  run on a variety of operating systems.

 Works through a browser plug-in.

 Silverlight
            pages can have interactive graphics, can use vector
  animations and play video and sound files.

 Aims  to combine the raw power and cross-platform support of
  Flash with a first-class programming platform that incorporates
  the fundamental concepts of .NET.

 Based  on a scaled-down version of the .NET’s CLR and allows
  developers to write client-side code using pure C#.
Advantage      of plugin model is that user needs to
  install just a single component to see content created
  by range of different people and companies.

Plugin installation requires a small download (approx.
  4MB) and forces the user to confirm the installation.

Once   installed, the browser can process any content
  that uses the plugin with no further prompting.
 Microsoft Windows (Minimum browser versions)
   IE 6.0, FireFox 1.5

 MAC (Minimum browser versions)
   FireFox 2 and Safari 3

    Does    not currently work on LINUX. Mono Team is
     creating an open source LINUX implementation of
     Silverlight 1 and 2, named Moonlight, being developed
     with key support from Microsoft.
 Silverlight   borrows WPF model for rich client-side user

 Silverlight uses a subset of WPF.
    UI is defined using XAML markup.
    Borrows same basic controls and       styling system from
    Uses shapes, paths, transforms, geometries and brushes
      for drawing 2D graphics – all similar to WPF.
    Provides   a declarative animation model based on
      storyboards – similar to WPF.
    Uses   MediaElement class to show video or play audio
      – similar to WPF.
 Silverlight 1.0
    Included 2D drawing features and media playback support.
    No support for CLR and .NET languages.
    Coding was done using JavaScript.

 Silverlight 2.0
    Added the CLR and a subset of   .NET framework classes and
      a UI model based on WPF.

 Silverlight 3.0
    Same development model as Silverlight 2.0.
    Adds some selected group of features and       performance
Visual Studio 2008 (With SP1)
  Visual Studio 2008 extensions for Silverlight 2 or 3
     which include Silverlight runtime and Silverlight
 Visual Studio 2008
    No graphical design time features.
    All markup needs to be written explicitly.

 Visual Studio 2010
    Has the same coding      support as VS 2008, but adds a visual
      designer that’s influenced by Microsoft Expression Blend.
    Supports drag and drop.

 Microsoft Expression Blend 3.0
    Provides rich support for creating Silverlight UI.
    Provides gradient fill effects for certain           type of user
Ordinary web site with HTML pages
 Entry point to the Silverlight applicationis an
    HTML page that includes a Silverlight content

ASP.NET web site
 Contains 2 projects:      one which contains all the
    Silverlight Application files, and the other is the
    ASP.NET web site that is deployed along with the
    Silverlight files. The entry point for the Silverlight
    application can be a .aspx or a .html file.
 App.xaml and App.xaml.cs
    Used for configuring a silverlight application.
    Used for defining resources that will be made available to all pages
      in the application.
    Used  for reacting to application events such as startup, shutdown
      and error conditions.
    Also used for specifying the startup xaml file.
 MainPage.xaml
    Defines UI (collection of controls, images and text) for a page.
    Actually a user control inherited from UserControl class.

 AppManifest.xaml
    Lists assembly dependencies.
 TestPage.html
    Entry page that the user requests to start the Silverlight application.
      Can also be a .aspx page.

 XAP File (ZIP Archive)
    Silverlight   package that contains everything needed to deploy a
      Silverlight application, including the application manifest, the project
      assembly and any other assemblies that the application uses. This
      file is copied to the ClientBin folder in case of an ASP.NET web site.

The XAP file compresses the content. The content is not
decompressed until it reaches the client. This reduces the
time required to download the application. The XAP file also
simplifies deployment.
EverySilverlight project is compiled to a DLL file
 named after the Silverlight application.

This   project assembly is stored in the
 /bin/Debug folder along with a few other
 important files.

During  deployment, copy the XAP file along with
 the required .html or .aspx files (that includes a
 Silverlight content region) to the web server.
 Client requests a .html or a .aspx page.
 Browser downloads and processes the page.
 When it reaches the <object> element,      it loads the
  Silverlight plugin and creates the Silverlight content
 The plugin downloads the linked XAP file.
 The AppManifest.xaml file is examined        and the
  appropriate Silverlight application assembly (.dll) is
 The plugin then creates the App object.
 The App object triggers a Startup event     and the first
  Silverlight page is created.
 System.dll
    Contains additional generic collections and classes for dealing with
      regular expressions.
 System.Core.dll
    Contains support for LINQ.
 System.Net.dll
    Contains classes that support networking.
 System.Windows.dll
    Includes classes for building Silverlight UI   including classes that
      support animation and data binding.
 System.Windows.Browser.dll
    Contains classes for interacting with HTML elements.
 System.Xml.dll
    Includes classes for XML processing.
 System.Windows.Controls.dll

 System.Windows.Controls.Data.dll

 System.Windows.Controls.Data.Input.dll

 System.Windows.Controls.Input.dll

 System.Windows.Controls.Navigation.dll

These assemblies add new controls to the Silverlight
Creating a HelloWorld Silverlight Application.

Examining the .html / .aspx entry page.

Sizing the Silverlight content region.
A   layout is used for organizing content in a set of different layout

 Layout is determined by the container being used.

A    Silverlight window can hold multiple containers, but only within a
   single root element.

 All  Silverlight layout containers are panels that derive from the
   abstract System.Windows.Controls.Panel class.

 Layout containers can be nested.

 Silverlight provides 3 Panel-derived classes that can be used to
   arrange layout.
 Stack Panel
    Places elements in a horizontal or vertical stack.

 Grid
    Arranges elements in rows and columns according to an invisible table.

 Canvas
    Allows elements to be positioned absolutely using fixed coordinates.

 WrapPanel
    Places  elements in a series of wrapped lines (left to right or top to

 DockPanel
    Aligns elements against an entire edge of a container.
Stacks its children in a single row or column.
Elements are arranged based on their order.
Default arrangement is from top to               bottom
Elements  can be arranged horizontally by setting the
  Orientation property.
Child  elements can specify their own layout using
  layout properties – HorizontalAlignment or
Different or same margins for each side of a control
  can be set using Margin property of a control within
  the StackPanel.
 The    first level container   nested   inside   the   root
    UserControl element.
 Separates    elements into invisible grid of rows and
 Steps to create a grid:
    Choose the number of rows and columns.
    Assign the appropriate row and column          to each
      contained element.
   Grids are created by filling Grid.ColumnDefinitions
    and Grid.RowDefinitions collections.
   Attached properties like RowSpan and ColumnSpan
    can be used to make an element stretch over several
Contains   splitter bars – draggable dividers that
  separate one section of a window from another.
Defined in System.Windows.Control assembly.
Must be placed in a grid cell.
Always resizes entire rows or columns and not   single
To make it usable, set HorizontalAlignment=Stretch
  and VerticalAlignment=Center (for a horizontal
  splitter) and VerticalAlignment=Stretch and
  HorizontalAlignment=Center (for a vertical
To   actually see the splitter, set the Background
 Stretches controls against one of its outside edges

 Eg:  toolbars at the top of many Windows Applications
  (docked to the top of the window).

 Eg:  a button docked to the top of a DockPanel is stretched
  across the entire width, but given whatever height it
  requires. A button docked to the left of a container is
  stretched across the entire height, but given whatever width
  it requires.

 Several elements can also be docked against the same size.
  In this case, the elements stack up against the side in the
  order they are declared in the markup.
Lays  out controls in the available space , one line or
  one column at a time.

By default, controls are aligned from left to right and
  then on subsequent rows.

A   WrapPanel in horizontal mode creates a series of
  imaginary rows, each of which is given the height of
  the tallest contained element. Other controls may be
  stretched to fit or aligned according to the
  VerticalAlignment property.
   Places elements using exact coordinates.

   To position an element, set the Canvas.Left and Canvas.Top properties, which
    sets the number of pixels between the left edge of the element and the left edge of
    the Canvas and the number of pixels between the top of the element and the top of
    the Canvas respecitvely.

   If the Width and Height properties of an element are not set, the element gets its
    desired size (large enough to fit its contents).

   Changing the size of the Canvas does not affect the controls inside.

   Layering can be done using ZIndex for overlapping elements.

   When elements have the same Zindex (default is 0), they are displayed in the same
    order as specified in the XAML markup.

   Elements can be promoted to a higher level by increasing their Zindex.
Scrolling   allows you to fit large amount of
  contents in a limited amount of space.

Typically used to wrap a layout container.

Supports horizontal and vertical scrolling.

Use       HorizontalScrollBarVisibility       and
  VerticalScrollBarVisibility properties to control
  horizontal and vertical scrollbar visibility
 Takes  a single piece of nested content (often a
  layout panel) and adds a background or border
  around it.

 Use     BorderBrush,   BorderThickness       and
  CornerRadius properties to control the fill color,
  thickness and the rounding effect of the border
 Three   basic strategies to perform page changes
  in a Silverlight application:
   Loading/Embedding user controls.
   Use code to access the root visual       (main
    application UI), remove the user control
    that represents the first page and add another
    user control that represents a different page.
   Use Silverlight’s navigation system with the
    Frame and Page controls.
 Each user control represents a page, which is
  prepared at design-time as a separate XAML file.

A   part of the single central page (the main
  window) can be changed to load new content
  and simulate navigation.

 To  dynamically load a user control, create an
  instance of the appropriate class and add it to a
  suitable container like Border, ScrollViewer,
  StackPanel or Grid.
   Can be used to switch to a completely new display for a different

   Use a simple layout container as the application’s root visual and
    load user controls into the root visual when required and unload
    them afterwards.

   The root visual itself can never be replaced after the application
    has started.

   Also, each page can be created once and can be kept in the
    memory until later.

   This allows maintaining the page’s current state including all the
    values in any input controls.
   Similar to modal dialog boxes on the Windows platform.

   When a child window is shown, the rest of the application
    information is disabled.

   The rest of the application becomes responsive when the
    child window is closed.

   The Child Window is actually just another element added to
    the existing page.

   When a Child Window is shown, the UI underneath remains
    active, but the user cannot interact with it (any animation or
    a running video continues running in the background).
   Create an instance of the child window class and call the Show()

   To close the child window, call the Close() method.

   The Show() method does not block execution of code. Code after
    the call to Show() runs immediately.

   To react when the user closes the child window, the application
    needs to respond to the child window’s Closed event.

   To extract information from the controls in the child window, create
    public properties in the child window class which expose the values
    of the controls.
 Limitation of the navigation methods just
  described is that the browser has no idea
  about the page navigation.

 Clicking the browser’s back button, navigates
  to the previous HTML or .aspx page, thereby
  exiting the current Silverlight application.

 In Silverlight 3, browser navigation can be
  achieved using the Frame and Page classes.
   Frame is a content control in which navigation takes place.

   Defined      in     System.Windows.Controls.Navigation.dll

   Provides the Navigate() method which changes the Content
    property and also triggers the navigation services that are
    responsible for tracking user’s page history and updating the
    browser’s URI.

   Navigate() method creates an instance of the specified page class
    and uses it to set the frame content.

   Navigate() method also provides additional features such as
    browser URI integration and history support.
   When content of a frame is changed using Navigate() method, the
    name of the XAML resource is appended to the current URI, after
    the fragment marker (#).

Eg: http://...../MySilverlightApp/TestPage.aspx
                       RESULTS IN

   If the browser is closed and reopened, the newly constructed
    navigation URI can be typed to load the Silverlight application and
    insert the content from the specified XAML page into the frame, all
    in one step.
   Users can also create a bookmark with the new URI which allows
    them to return to the same application with the correct page loaded
    in the frame (deep linking).
   Each time the Navigate() method is called, Silverlight
    adds a new entry in the history list.

   The first page of the application appears in the history
    list with the title of the HTML /aspx entry page.

   Subsequent XAML pages appear under the history list
    using the user control filename /page title for the display

   As long as the URI remains the same, Silverlight loads
    the appropriate page into the frame when the Back or
    Forward button is clicked.
   Provides convenient hooks into the navigation system and
    (optionally) automatic state management.

   Derives from UserControl class and provides methods to react to
    navigation actions.

   Provides  properties   like  Title,  NavigationService,
    NavigationContext and NavigationCacheMode.

   NavigationService provides a NavigationService object which
    supplies navigation methods like Navigate(), GoBack(),
    GoForward, etc.

   NavigationContext provides a NavigationContext object
    which provides the Uri property and QueryString collection.
   When the user travels to a page using the Forward and Backward
    buttons in the history list, the page is re-created from scratch.

   When the user leaves the page, the page object is discarded from the

   As a result, all input controls on a page are reset to their default values
    on a return visit.

   Use the Page.NavigationCacheMode property to cache the entire

   Default value is Disabled (ie, no caching).

   Change it to Required which keeps the page object in memory after
    the user navigates away.
   Are triggered during different navigation actions.

   Can be used to perform various actions when a page is being left or visited.

   Can be used to implement a more selective form of state management to
    store just a few details from the current page in the memory rather than
    caching the entire page object.

   Methods:
       OnNavigatedFrom()
            Called when the user has left the page (called before the next page
       OnNavigatedTo()
         Called when the frame navigates to the page. (first time or revisit).
       OnNavigatingFrom()
         Called when the user is about to leave the page. (allows cancellation
            of the action).

Shared By:
Description: Microsoft SilverLight Technology ppt gives a simple and easy way of understanding