margin content padding border

From Zero to Silverlight in 75 Minutes

Paul D. SheriffPresident – PDSA, Inc.www.pdsa.com psheriff@pdsa.com

DEV209

Paul.About

Paul D. Sheriff (psheriff@pdsa.com)President of PDSA, Inc.Author, speaker, architectCustom software development, developer toolsSoftware Auditswww.pdsa.com

Developer toolsHaystack Code Generator

www.CodeHaystack.com

.NET Productivity Framework

Agenda

Silverlight definedKey XAML conceptsStyles and resourcesDemos

Creating a UI using XAMLCreating stylesBasic business controlsList and container controls

Silverlight Defined

Silverlight Defined

Plug in to browsersWindows/MAC/Linux (Apache)

Runs on all major browsersRequires users to download SilverlightBuild Rich Internet Applications (RIAs)

Subset of .NET Framework availableData access via XML/services

No system. Data namespace

Some client-side resource access

Silverlight Defined

Used in combination with ASP.NETASP.NET still used for broadest reachSilverlight for specialized functionality

Silverlight 4 offers offline capabilityCan run on desktopPartial or extended trust modes

Silverlight Defined

Main parts of Silverlight appApp.xaml

Tells application where to start

MainPage.xamlThe default main page

Other .xaml pages as neededAny other functionality you need in your app

Web page on which to host Silverlight app.xap file = compiled app, downloaded to client

Uses of Silverlight

Perform animation in web browserBetter UI than possible with ASP.NET

Easier to code than using JavaScript/AJAX

Use C# or VB instead of JavaScriptPresent data to user in rich format

Access via web service, WCF, REST, etc.

Tools You Will Use

Visual Studio 2010Expression Blend (Optional)

Helps with layout & animation

Silverlight Toolkit (Optional)Download from CodePlex.com

Key XAML Concepts

XAML

XAML (pronounced zammel)Declarative markup languageSimilar to HTML or ASP.NETUsed for…

User interfaceData bindingStyles

Use C# or VB for coding

Basic Building Blocks

User controlBasic building block for re-usable code

GridContainer for controlsCan define row and columnsCan constrain height & width

Basic Building Blocks

StackPanelContainer for controlsDoes not constrain height and width

ListBoxVery flexibleYou will use this a lot

DataGridEditable grid

Basic Building Blocks

Other normal UI controlsTextBlock – display text (similar to a label)TextBoxButtonRadioButtonComboBoxCheckBoxetc.

Margins and Padding

Use margins and paddingSet left, top, right, bottom

Example: margin=“10, 2, 5, 4”Starts at left and goes clockwise

Margin

Content

Padding

Border

Creating a UI

Demo…

Styles and Resources

Styles and Resources

Move attributes to resources sectionCan be placed at control or app levelFactor out width, margin, etc.Similar to a CSS file in a web application

Styles and Resources

Demo…

Standard Business Controls

Input/Display Controls

Typical input and display controlsText blockCheck boxRadio buttonPassword boxImageMedia element

Input/Display Controls

Input and display controls

List Controls

Controls for display listsCombo boxList box

Container Controls

Controls that contain other controlsBorderTabScroll viewer

Standard Business Application Controls

Demo…

Summary

Silverlight gives you rich UI for webCross-platform

Easier to code than AJAX/JavaScriptEasier to code than FlashUse VS.NET, Blend and C#/VB

Thank You

Sign up for Haystack Webcastshttp://www.pdsa.com/webcasts

Sign up for Paul Sheriff's Inner CircleLifetime membershipOver $2000 worth of ebooks, video, etc.http://www.PaulSheriffInnerCircle.com

Generate Data, Entity, Business ClassesCRUD stored proceduresService Layer for WCFMVVM, WPF, Silverlight and ASP.NET add, edit, delete forms30 day Trialwww.CodeHaystack.com

Sample Code

http://www.pdsa.com/TechEdGet free Silverlight video

Silverlight XAML for the complete novice – Part 1

** Haystack Special **Special price: $499Use code: TECHED11Valid until: 6/30/2011

Related Content

Breakout sessions (session codes and titles)

Interactive sessions (session codes and titles)

Hands-on labs (session codes and titles)

Product demo stations (demo station title and location)

Related certification exam

Find me later at…

Track Resources

Resource 1

Resource 2

Resource 3

Resource 4

Resources

www.microsoft.com/techedSessions On-Demand & Community Microsoft Certification & Training Resources

Resources for IT Professionals Resources for Developers

www.microsoft.com/learning

http://microsoft.com/technet http://microsoft.com/msdn

Learning

http://northamerica.msteched.com

Connect. Share. Discuss.

Complete an evaluation on CommNet and enter to win!

MS Tag Placeholder Slide

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to

be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS

PRESENTATION.