(www.InterKnowlogy.com) [email protected] Silverlight: What is it / How to get Started Declarative Programming Layout and Controls, Events and Commands Working with Data Adding Style To.
Download ReportTranscript (www.InterKnowlogy.com) [email protected] Silverlight: What is it / How to get Started Declarative Programming Layout and Controls, Events and Commands Working with Data Adding Style To.
(www.InterKnowlogy.com) [email protected] Silverlight: What is it / How to get Started Declarative Programming Layout and Controls, Events and Commands Working with Data Adding Style To Your Application Lightweight WPF runtime - Silverlight was designed to be a subset of WPF not a direct port XAML-based Tools <XAML> <Button Width="100px"> OK <Button.Background> LightBlue </Button.Background> </Button> </XAML> or Visual Web Developer Express 2010 •Functionality •Project Structure •VS & Blend • For pure beginner learning purposes, this reference app is better than anything you are going to find out there on the internet. • Although it does not use all the complicated and abstracted design patterns that InterKnowlogy would use in a commercial application, it serves perfectly as a learning tool in the form of a reference application. BitmapImage XAML replaces code Attributes control Layout and Style Declarative Programming Event handlers wired-up in XAML Declarative Data Binding Separates the front-end from the back-end Simple declarative programming language suitable for constructing and initializing .NET Objects Usually the most concise way to represent user interfaces (or other hierarchies of objects) Doesn’t need a compile to render The language that almost all Silverlight related tools emit Runs in a Silverlight Application: Runs in the Browser: Declarative Programming: XAML ProductSearch in Silverlight Content rendering flows inside parent Fixed positioning (Canvas) is seldom used Panels are used to house content Margins and Padding over fixed size StackPanel Grid Canvas • Arranges child elements into a single line that can be oriented horizontally or vertically. • A flexible grid area that consists of columns and rows. • An area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area. WrapPanel DockPanel • Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. • An area where you can arrange child elements either horizontally or vertically, relative to each other. Horizontal and Vertical Alignment Margin Text Block Margin Padding Padding Text Block Layout Demo Silverlight-StoreInformation.xaml (in controls/store) Not all controls are created equal Silverlight is a subset of WPF so many of the WPF controls do not exist in the core SL The Silverlight Toolkit has a number of great controls, but they exist in different bands There are plenty of good control vendors to fill the gaps. Border Button Checkbox Combobox DataGrid Grid Image Label ListBox RadioButton Rectangle StackPanel TabControl TextBlock TextBox TreeView Viewbox Controls Demo Standard .NET Events Routed Events * Commands * Partial or no support in Silverlight Logical action that can be invoke in several ways Based on the ICommand Interface Overview Simple Data Binding Complex Data Binding Simple Field level Data Binding Complex Data Binding to multiple controls at a time (Master/Detail/Detail) Client-SideSortingandFiltering Support for binding to Objects Simple Data Binding using Business Objects Support for two-way synchronization in simple objects via the INotifyPropertyChanged interface Implicit and Declarative binding via the DataContext Binding to Lists Supports two-way data binding to list if list inherits from ObservableCollection Data Templates Sorting Filtering Master/Detail/Detail Provides a pattern to write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations. Provides end-to-end support for common tasks such as data validation, authentication and roles by integrating with Silverlight components on the client A prescriptive model for exposing your domain logic over LINQ. Working with Data Demo Overview Resource Dictionaries Visual State Manager What are styles? • Ability to associate different visual effects based on user events, • Provide an entirely new looks for existing controls, • Designate rendering behavior for nonvisual objects. SL4 supports implicit styles • Inherit from master styles Similarities to Cascading Style Sheets • Inline declaration • Page level declaration • Separate file declaration Static Resources • Loaded when Window or Page Loads • Leads to slower page loading • Changes to underlining values are not propagated * Not supported in Silverlight Dynamic Resources * • More overhead to allow for constant updates • Can only be used to set dependency properties • Can potentially improve Page and Window load time Contains hash table of resources Great way to organize resources ResourceDictionary.MergedDictionaries combines many different file based resources Resource Dictionaries Alternative to WPF Triggers in Silverlight Promotes separation between UI and code Controls have States and State Groups States within a State Group are immutable Fully supported in Blend Adding Style to Your Application with Blend Not all XAML is created equal Silverlight was designed to be a small subset of WPF; not a direct port The Silverlight Toolkit Quality Bands • Mature, Stable, Preview, Experimental Write Once; Run Everywhere • The Windows Phone 7 resolution is 800x480 • The Windows Phone 7 has a rich Multi-touch API; SL does not 7 7 7 Windows Phone Hardware Common Hardware Elements Consistent set of hardware capabilities defined by Microsoft One resolution at launch Second resolution added later Same touch input Consistent processor / GPU Same available RAM Optional keyboard Consistent Platform Quality Focus 7 Elements of the Application Platform Runtime – On “Screen” Sensors Phone Media Tools Data Xbox LIVE Location Notifications Samples Guides .NET Framework managed code sandbox Documentation Community Packaging and Verification Tools SCREEN CLOUD Phone Emulator Cloud Services Notifications Location Portal Services App Deployment Registration Marketplace Identity Feeds Validation MO and CC Billing Social Maps Certification Business Intelligence Publishing Update Management “You may not be doing this now; but, you will…” Layout in XAML is flexible and elegant The control ecosystem for SL is rich Data Binding in SL is rich & supports many data types Styles bring life, usability & NUI to your applications The learning curve can be steep, but is worth it. Download all my resources and dedicate some time to jump in http://Silverlight.net http://www.Microsoft.com/Silverlight http://developer.windowsphone.com – Silverlight 4 Unleashed by Laurent Bugnion (September 6, 2010) Essential Silverlight 3 by Ashraf Michail Silverlight In Action by Chad Campbell and John Stockton The InterKnowlogy Silverlight Reference Application The InterKnowlogy Multi-Touch Scatterview control for Silverlight http://tinyurl.com/32jc398 www.InterKnowlogy.com [email protected] http://team.interknowlogy.com/blogs/timhuckaby www.microsoft.com Use this layout to show software code The font is Consolas, a monospace font The slide doesn’t use bullets but levels can be indented using the “Increase List Level” icon on the Home menu 6 5 4 3 2 1 0 Chart Title 10% 23% 58% www.microsoft.com/teched www.microsoft.com/learning http://microsoft.com/technet http://microsoft.com/msdn