RadControls for Silverlight

RadControls for Silverlight Made Easy

Welcome to Telerik RadControls for Silverlight Made Easy.

All rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, ormechanical, including photocopying, recording, taping, or information storage and retrieval systems - without thewritten permission of the publisher.

Products that are referred to in this document may be either trademarks and/or registered trademarks of therespective owners. The publisher and the author make no claim to these trademarks.

While every precaution has been taken in the preparation of this document, the publisher and the author assume noresponsibility for errors or omissions, or for damages resulting from the use of information contained in thisdocument or from the use of programs and source code that may accompany it. In no event shall the publisher andthe author be liable for any loss of profit or any other commercial damage caused or alleged to have been causeddirectly or indirectly by this document.

Printed: January 2011

RadControls for Silverlight

2011 Telerik Inc.

Special thanks to:

Valeri HristovNikolay AtanasovVassil PetevPavel Pavlov Miroslav Nedyalkov Tihomir PetkovBoryana MiloshevskaKonstantin Petkov Konstantina GochevaTina StanchevaGeorgi DangalovMaya ZhechevaEvgenia MilchevaVeselin VasilevStephen Forte.

Last but not least, thank you to all our families for their support andpatience while we wrote the book.

RadControls for Silverlight4

2011 Telerik Inc.

Table of ContentsForeword 0

Part I Introduction 15................................................................................................................................... 151 Who Should Read This Courseware................................................................................................................................... 152 What Do You Need to Have Before Reading This Courseware................................................................................................................................... 163 How This Courseware is Organized................................................................................................................................... 164 About Telerik................................................................................................................................... 165 About Falafel................................................................................................................................... 176 Introducing RadControls for Silverlight

Part II Silverlight Introduction 20................................................................................................................................... 201 Objectives................................................................................................................................... 212 Overview................................................................................................................................... 223 Silverlight Anatomy 101

.......................................................................................................................................................... 22Silverlight Files

.......................................................................................................................................................... 24The XAP FIle

.......................................................................................................................................................... 24The Application Manifest

.......................................................................................................................................................... 25Silverlight Applications in Visual Studio

.......................................................................................................................................................... 26The Silverlight Life Cycle ................................................................................................................................... 274 Silverlight Development Tools................................................................................................................................... 285 Wrap Up

Part III Working with Silverlight 30................................................................................................................................... 301 Objectives................................................................................................................................... 312 Getting Started

.......................................................................................................................................................... 31Starting w ith Visual Studio

.......................................................................................................................................................... 37Starting w ith Expression Blend

.......................................................................................................................................................... 43Visual Studio With Expression Blend ................................................................................................................................... 473 Working with XAML

.......................................................................................................................................................... 47XAML Basics

.......................................................................................................................................................... 52Attached Properties and Events

.......................................................................................................................................................... 52Markup Extensions

.......................................................................................................................................................... 53Resources and Styles

.......................................................................................................................................................... 59Adding and Theming RadControls

.......................................................................................................................................................... 60Templates ................................................................................................................................... 614 Dependency Properties................................................................................................................................... 625 Routed Events................................................................................................................................... 636 Basic Databinding................................................................................................................................... 667 Best Practices................................................................................................................................... 678 Debugging................................................................................................................................... 689 Wrap Up

5Contents

5

2011 Telerik Inc.

Part IV Data Binding 70................................................................................................................................... 701 Objectives................................................................................................................................... 702 Binding Basics................................................................................................................................... 743 Binding Collections................................................................................................................................... 754 Change Notification................................................................................................................................... 805 Binding in Templates

.......................................................................................................................................................... 80DataTemplate

.......................................................................................................................................................... 81HierarchicalDataTemplate ................................................................................................................................... 836 Data Sources

.......................................................................................................................................................... 83XML

.......................................................................................................................................................... 86REST

.......................................................................................................................................................... 91RIA ......................................................................................................................................................... 92Project Setup......................................................................................................................................................... 94Building the RIA Service......................................................................................................................................................... 99Building the RIA Client

.......................................................................................................................................................... 101WCF ......................................................................................................................................................... 102Building the WCF Service......................................................................................................................................................... 107Building the WCF Client.......................................................................................................................................................... 110ADO.NET Data Services ......................................................................................................................................................... 111Building the Service......................................................................................................................................................... 116Building the Client.......................................................................................................................................................... 121OpenAccess ......................................................................................................................................................... 122Building the Data Access Layer......................................................................................................................................................... 124Building the Service......................................................................................................................................................... 126Building the Silverlight Client

................................................................................................................................... 1297 Wrap Up

Part V Expression Blend 131................................................................................................................................... 1311 Objectives................................................................................................................................... 1312 Overview

.......................................................................................................................................................... 132Expression Blend Project Types

.......................................................................................................................................................... 132The Expression Blend Environment ................................................................................................................................... 1383 Resources................................................................................................................................... 1404 Restyling RadControls for Silverlight................................................................................................................................... 1435 Customizing RadControls Templates................................................................................................................................... 1466 Bring RadControls to Life with Animations................................................................................................................................... 1547 Binding

.......................................................................................................................................................... 154Overview

.......................................................................................................................................................... 154Create Sample Data Sources ......................................................................................................................................................... 155Define Sample Objects......................................................................................................................................................... 158Import From XML.......................................................................................................................................................... 160Create Object Data Sources .......................................................................................................................................................... 163Drag and Drop Binding .......................................................................................................................................................... 166Binding RadControls Walk Through

................................................................................................................................... 1718 Wrap Up

Part VI Theming and Skinning 173


2011 Telerik Inc.

................................................................................................................................... 1731 Objectives

................................................................................................................................... 1732 Overview

................................................................................................................................... 1743 Getting Started

................................................................................................................................... 1774 Applying Themes to RadControls

................................................................................................................................... 1815 Creating a Custom Theme

................................................................................................................................... 1836 Modifying themes in Expression Blend.......................................................................................................................................................... 183Overview .......................................................................................................................................................... 184Modifying the Theme Brushes .......................................................................................................................................................... 188Testing the Modified Theme .......................................................................................................................................................... 190Modifying Theme Styles

................................................................................................................................... 1927 Wrap Up

Part VII Localization 194................................................................................................................................... 1941 Objectives................................................................................................................................... 1942 Overview................................................................................................................................... 1953 Getting Started................................................................................................................................... 1984 Control Details

.......................................................................................................................................................... 198LocalizationManager

.......................................................................................................................................................... 199Resource File Storage

.......................................................................................................................................................... 200Custom Storage

.......................................................................................................................................................... 201Assigning Resources to Elements

.......................................................................................................................................................... 202Using Predefined Localization ................................................................................................................................... 2025 Wrap Up

Part VIII UI Automation Support 204................................................................................................................................... 2041 Objectives................................................................................................................................... 2042 Overview................................................................................................................................... 2073 Getting Started................................................................................................................................... 2124 Automating................................................................................................................................... 2135 Wrap Up

Part IX Input Controls 215................................................................................................................................... 2151 Objectives................................................................................................................................... 2162 Overview................................................................................................................................... 2173 Getting Started................................................................................................................................... 2314 Control Details

.......................................................................................................................................................... 231Masked Text Box

.......................................................................................................................................................... 243Up Down Controls

.......................................................................................................................................................... 248Color Pickers

.......................................................................................................................................................... 261Slider Control ................................................................................................................................... 2715 Customization................................................................................................................................... 2786 Wrap Up

Part X Menu Controls 280

7Contents

7

2011 Telerik Inc.

................................................................................................................................... 2801 Objectives

................................................................................................................................... 2802 Overview

................................................................................................................................... 2813 Getting Started

................................................................................................................................... 2874 Control Details.......................................................................................................................................................... 287RadMenu .......................................................................................................................................................... 289Items .......................................................................................................................................................... 291Walk Through: Creating Menu Items in Code .......................................................................................................................................................... 294RadContextMenu

................................................................................................................................... 2995 Binding

................................................................................................................................... 3076 Customization

................................................................................................................................... 3277 Wrap Up

Part XI Tabbed Interfaces 329................................................................................................................................... 3291 Objectives................................................................................................................................... 3302 Overview................................................................................................................................... 3323 Getting Started................................................................................................................................... 3444 Control Details

.......................................................................................................................................................... 344RadTabControl

.......................................................................................................................................................... 358RadPanelBar ................................................................................................................................... 3655 Customization................................................................................................................................... 3706 Wrap Up

Part XII ToolBar 372................................................................................................................................... 3721 Objectives................................................................................................................................... 3732 Overview................................................................................................................................... 3753 Getting Started................................................................................................................................... 3814 Control Details................................................................................................................................... 3905 Binding................................................................................................................................... 4006 Customization................................................................................................................................... 4097 Wrap Up

Part XIII Expander 411................................................................................................................................... 4111 Objectives................................................................................................................................... 4112 Overview................................................................................................................................... 4123 Getting Started................................................................................................................................... 4164 Control Details

.......................................................................................................................................................... 416Populating RadExpander

.......................................................................................................................................................... 423Events

.......................................................................................................................................................... 424Animation ................................................................................................................................... 4265 Customization................................................................................................................................... 4346 Wrap Up

Part XIV Drag and Drop. 436


2011 Telerik Inc.

................................................................................................................................... 4361 Objectives

................................................................................................................................... 4362 Overview

................................................................................................................................... 4373 Getting Started

................................................................................................................................... 4444 Control Details.......................................................................................................................................................... 444Overview. .......................................................................................................................................................... 445Make a Control Draggable .......................................................................................................................................................... 446Accept Dropped Controls .......................................................................................................................................................... 447RadDragAndDropManager .......................................................................................................................................................... 448Events. .......................................................................................................................................................... 454Visual Cues

................................................................................................................................... 4575 Binding

................................................................................................................................... 4586 Wrap Up

Part XV Date, Time and Calendar 460................................................................................................................................... 4601 Objectives................................................................................................................................... 4612 Overview................................................................................................................................... 4643 Getting Started................................................................................................................................... 4794 Control Details

.......................................................................................................................................................... 479Calendar

.......................................................................................................................................................... 489Date Picker

.......................................................................................................................................................... 490Time Picker

.......................................................................................................................................................... 493DateTime Picker ................................................................................................................................... 4945 Binding................................................................................................................................... 5016 Customization................................................................................................................................... 5087 Wrap Up

Part XVI ComboBox 510................................................................................................................................... 5101 Objectives................................................................................................................................... 5112 Overview................................................................................................................................... 5123 Getting Started................................................................................................................................... 5154 Control Details................................................................................................................................... 5325 Binding................................................................................................................................... 5406 Customization................................................................................................................................... 5497 Wrap Up

Part XVII TreeView 551................................................................................................................................... 5511 Objectives................................................................................................................................... 5522 Overview................................................................................................................................... 5553 Getting Started................................................................................................................................... 5584 Control Details

.......................................................................................................................................................... 558Working with Nodes ......................................................................................................................................................... 558Adding Nodes......................................................................................................................................................... 560Locating and Accessing Nodes......................................................................................................................................................... 563Path Properties and Methods

9Contents

9

2011 Telerik Inc.

......................................................................................................................................................... 564Node Properties

......................................................................................................................................................... 565Removing Nodes

......................................................................................................................................................... 566Node Images.......................................................................................................................................................... 568Selections .......................................................................................................................................................... 572Node Expansion .......................................................................................................................................................... 573Checkboxes and Radiobuttons .......................................................................................................................................................... 577Drag-and-Drop .......................................................................................................................................................... 583Editing .......................................................................................................................................................... 586Keyboard Support .......................................................................................................................................................... 587Performance

................................................................................................................................... 5885 Binding.......................................................................................................................................................... 588Basic Binding .......................................................................................................................................................... 591Hierarchical Templates .......................................................................................................................................................... 609Template Selectors .......................................................................................................................................................... 613Load-On-Demand

................................................................................................................................... 6176 Customization

................................................................................................................................... 6287 Wrap Up

Part XVIII GridView 630................................................................................................................................... 6301 Objectives................................................................................................................................... 6312 Overview................................................................................................................................... 6323 Getting Started................................................................................................................................... 6404 Control Details

.......................................................................................................................................................... 640Selections

.......................................................................................................................................................... 648Filtering Sorting and Grouping ......................................................................................................................................................... 649Filtering......................................................................................................................................................... 654Sorting......................................................................................................................................................... 657Grouping.......................................................................................................................................................... 660Editing .......................................................................................................................................................... 665Grid View Elements Visibility .......................................................................................................................................................... 669Accessing Elements in a Grid Row Template .......................................................................................................................................................... 670Sizing .......................................................................................................................................................... 671Performance ......................................................................................................................................................... 671Virtualization......................................................................................................................................................... 672Paging.......................................................................................................................................................... 673Print and Export ......................................................................................................................................................... 674Exporting......................................................................................................................................................... 677Formatting......................................................................................................................................................... 677Printing

................................................................................................................................... 6785 Binding.......................................................................................................................................................... 678.NET Objects .......................................................................................................................................................... 683REST ......................................................................................................................................................... 683Project Setup......................................................................................................................................................... 684XAML Editing......................................................................................................................................................... 690Code Behind.......................................................................................................................................................... 703WCF ......................................................................................................................................................... 704Building the WCF Service......................................................................................................................................................... 712Building the WCF Silverlight Client.......................................................................................................................................................... 715WCF RIA Services ......................................................................................................................................................... 716Project Setup......................................................................................................................................................... 718Building the RIA Service


2011 Telerik Inc.

......................................................................................................................................................... 723Building the RIA Client................................................................................................................................... 7246 Customization................................................................................................................................... 7287 Wrap Up

Part XIX Scheduler 730................................................................................................................................... 7301 Objectives................................................................................................................................... 7312 Overview................................................................................................................................... 7333 Getting Started................................................................................................................................... 7364 Control Details

.......................................................................................................................................................... 736Time Slots

.......................................................................................................................................................... 737Views

.......................................................................................................................................................... 739Appointments

.......................................................................................................................................................... 743Recurrence

.......................................................................................................................................................... 744Resources

.......................................................................................................................................................... 749Events

.......................................................................................................................................................... 750Commands

.......................................................................................................................................................... 754Drag-and-Drop ......................................................................................................................................................... 754Drag-and-Drop Overview......................................................................................................................................................... 758Drag-and-Drop Walk Through.......................................................................................................................................................... 768Internationalization ......................................................................................................................................................... 768Using Predefined Cultures......................................................................................................................................................... 771Custom Translations

................................................................................................................................... 7755 Binding.......................................................................................................................................................... 775Basic Binding .......................................................................................................................................................... 779Custom Appointments

................................................................................................................................... 7846 Customization

................................................................................................................................... 7957 Wrap Up

Part XX Gauges 797................................................................................................................................... 7971 Objectives................................................................................................................................... 7982 Overview................................................................................................................................... 8003 Getting Started................................................................................................................................... 8084 Control Details................................................................................................................................... 8315 Binding................................................................................................................................... 8426 Customization................................................................................................................................... 8467 Wrap Up

Part XXI ProgressBar 848................................................................................................................................... 8481 Objectives................................................................................................................................... 8482 Overview................................................................................................................................... 8493 Getting Started................................................................................................................................... 8554 Wrap Up

Part XXII Charting 857................................................................................................................................... 8571 Objectives

11Contents

11

2011 Telerik Inc.

................................................................................................................................... 8582 Overview

................................................................................................................................... 8593 Getting Started

................................................................................................................................... 8684 Control Details.......................................................................................................................................................... 868Chart Series Types .......................................................................................................................................................... 874Chart Elements ......................................................................................................................................................... 874Series and DataPoints......................................................................................................................................................... 877Axis Elements.......................................................................................................................................................... 878Animations .......................................................................................................................................................... 880Integration w ith ASP.NET AJAX

................................................................................................................................... 8865 Binding.......................................................................................................................................................... 886Binding Basics .......................................................................................................................................................... 894Binding Axis Labels .......................................................................................................................................................... 895Tooltips .......................................................................................................................................................... 899Format Expressions

................................................................................................................................... 9056 Customization.......................................................................................................................................................... 905Coloring Chart Elements .......................................................................................................................................................... 914Styling the Chart

................................................................................................................................... 9177 Wrap Up

Part XXIII Docking 919................................................................................................................................... 9191 Objectives................................................................................................................................... 9202 Overview................................................................................................................................... 9213 Getting Started................................................................................................................................... 9274 Control Details

.......................................................................................................................................................... 927Creating Containers in Code

.......................................................................................................................................................... 930Sizing and Positioning

.......................................................................................................................................................... 933Pane Pinning and Visibility

.......................................................................................................................................................... 933Prevent Docking

.......................................................................................................................................................... 934Saving and Loading ................................................................................................................................... 9385 Binding

.......................................................................................................................................................... 939Building the WCF Service

.......................................................................................................................................................... 953Building the Docking Client Application ......................................................................................................................................................... 953Project Setup......................................................................................................................................................... 954Silverlight Client Code Behind......................................................................................................................................................... 963Silverlight Client XAML......................................................................................................................................................... 967Run and Test the Application

................................................................................................................................... 9686 Customization

................................................................................................................................... 9707 Wrap Up

Part XXIV Windows 972................................................................................................................................... 9721 Objectives................................................................................................................................... 9722 Overview................................................................................................................................... 9733 Getting Started................................................................................................................................... 9764 Control Details

.......................................................................................................................................................... 976Predefined Dialogs ......................................................................................................................................................... 976Alert......................................................................................................................................................... 980Confirm


2011 Telerik Inc.

......................................................................................................................................................... 983Prompt.......................................................................................................................................................... 986Brushes .......................................................................................................................................................... 988Events .......................................................................................................................................................... 989Window State and Z-Order

................................................................................................................................... 9905 Binding

................................................................................................................................... 9936 Customization

................................................................................................................................... 9977 Wrap Up

Part XXV HTMLPlaceholder 999................................................................................................................................... 9991 Objectives................................................................................................................................... 9992 Overview

................................................................................................................................... 10003 Getting Started

................................................................................................................................... 10044 Control Details.......................................................................................................................................................... 1004Loading Content .......................................................................................................................................................... 1008Events .......................................................................................................................................................... 1009Sizing and Positioning .......................................................................................................................................................... 1010Interaction w ith the Page ......................................................................................................................................................... 1011Calling Javascript from Managed Code......................................................................................................................................................... 1014Calling Managed Code from Javascript

................................................................................................................................... 10175 Binding

................................................................................................................................... 10226 Wrap Up

Part XXVI MediaPlayer 1024................................................................................................................................... 10241 Objectives................................................................................................................................... 10242 Overview................................................................................................................................... 10253 Getting Started................................................................................................................................... 10284 Control Details................................................................................................................................... 10325 Binding................................................................................................................................... 10466 Customization................................................................................................................................... 10487 Wrap Up

Part XXVII CoverFlow 1050................................................................................................................................... 10501 Objectives................................................................................................................................... 10502 Overview................................................................................................................................... 10513 Getting Started................................................................................................................................... 10524 Control Details

.......................................................................................................................................................... 1052Items

.......................................................................................................................................................... 1057Item Properties

.......................................................................................................................................................... 1059Distance

.......................................................................................................................................................... 1060Camera

.......................................................................................................................................................... 1061Animation

.......................................................................................................................................................... 1061Reflection ................................................................................................................................... 10625 Binding................................................................................................................................... 10746 Customization

.......................................................................................................................................................... 1074Navigation

13Contents

13

2011 Telerik Inc.

................................................................................................................................... 10767 Wrap Up

Part XXVIII Upload 1078................................................................................................................................... 10781 Objectives................................................................................................................................... 10782 Overview................................................................................................................................... 10803 Getting Started................................................................................................................................... 10844 Control Details

.......................................................................................................................................................... 1084Controlling Upload Access

.......................................................................................................................................................... 1085Working with the Upload Handler

.......................................................................................................................................................... 1091Events and Methods ................................................................................................................................... 10925 Customization................................................................................................................................... 10956 Wrap Up

Index 1096

Part

IIntroduction

Introduction 15

2011 Telerik Inc.

1 Introduction

1.1 Who Should Read This Courseware

This courseware assumes that you are familiar with VB.NET or C# code. The courseware uses VisualStudio 2010 and assumes you know your way around this environment. You should be able to navigate thebasic functional areas of the IDE (e.g. Solution Explorer, Properties, code/designer web pages etc.) and beable to run and debug applications and class libraries. You should have a basic familiarity with XML syntax.

1.2 What Do You Need to Have Before Reading This Courseware

Computer Setup

The courseware assumes you are running Windows X86 or x64 500-megahertz (MHz) or higher processorwith 128-megabytes (MB) of RAM.

Silverlight Setup

For information on system requirements for Silverlight, see "Microsoft Silverlight System Requirements" at http://www.microsoft.com/silverlight/get-started/install/default.aspx. This will show you the combinations ofoperating system and browser that will support Silverlight.

Development Tools

This courseware assumes that you have installed:

Visual Studio 2010 or better

Expression Blend 4 [optional]

Silverlight 4 SDK

Silverlight Toolkit

WCF RIA Services

See the Silverlight Getting Started site at http://silverlight.net/getstarted/ for links to these resources.

RadControls for Silverlight

Get RadControls for Silverlight at http://www.telerik.com/purchase/individual/silverlight.aspx.


2011 Telerik Inc.

1.3 How This Courseware is Organized

The initial chapters of this courseware will help you quickly get up to speed with Silverlight and will discusssome of the issues in common with all RadControls such as binding or theming. In the "Controls" section ofthis Courseware, the chapter structure is as follows:

Objectives: A summary of what you will learn in the chapter.Overview: A high-level overview of the control, what it does and its key features.Getting Started: A step-by-step walk through of building an application that uses the control in theminimal number of steps. Control Details: One or more topics that dig into specific properties, methods and events of thecontrol. Binding: How to bind the control to data.Customization: How to give the control a custom look and feel or special functionality. Typically thiswill be through the use of templates and includes many examples of using Expression Blend. Wrap Up: A summary of what you learned in the chapter.

1.4 About Telerik

Telerik is a leading vendor of User Interface (UI) components for Microsoft .NET technologies (ASP.NETAJAX, WinForms, Windows Presentation Foundation and Silverlight), as well as tools for .NET Reporting,ORM and web content management. Building on our expertise in interface development and Microsofttechnologies, Telerik helps customers build applications with unparalleled richness, responsiveness andinteractivity. Created with passion, Telerik products help thousands of developers every day to be moreproductive and deliver reliable applications under budget and on time.

1.5 About Falafel

Founded in 2003, Falafel Software, Inc. provides the highest quality software development, consultation, andtraining services available. Starting initially with consulting and training, Falafel Software found itselfexpanding rapidly on the excellence of its engineers and the incredible sense of teamwork exhibited byeveryone in the company. This common mutual respect for each other's talents has been a major asset forFalafel, causing extraordinary growth, and a level of quality that very few other IT companies can match.Employees include best-selling authors, industry speakers, technology decision makers, and formerMicrosoft and Borland engineers. All of Falafel engineers are Microsoft Certified Professionals, CertifiedApplication Developers, or Most Valuable Professionals.

Falafel has written the following Telerik courseware:

RadControls for ASP.NETRadControls for ASP.NET AJAXRadControls for WinformsTelerik ReportingTelerik OpenAccess ORM

Introduction 17

2011 Telerik Inc.

1.6 Introducing RadControls for Silverlight

RadControls are built on Microsoft Silverlight 3 and include UI controls for building rich line-of-businessSilverlight applications. Sharing the same code base with Telerik WPF controls, the Silverlight controls offera clean and intuitive API, Blend support and powerful theming capabilities that will radically improve yourRIA development.

Comprehensive Toolset from the Masters ofWeb UI: An established leader in web interfacetechnologies, Telerik now offers you RadControls forSilverlight 3 a comprehensive suite of controls thatbring style and interactivity to your LOBapplications.

Rich Data Visualization Capabilities: Featuringeverything from a super powerful Silverlight grid, toanimated, fully customizable Silverlight charts andgauges, Telerik Silverlight 3 controls enabledevelopers to transform data into interactive,animated visuals that empower end-users toanalyze complex business scenarios.

Engineered for Great Performance: TelerikSilverlight 3 controls are engineered for outstandingperformance through native UI virtualization, aninnovative LINQ-based data engine, asynchronousdata binding, RadCompression module and othertechniques that help reduce page loading time andspeed up data operations.

Full Interoperability with ASP.NET AJAX: RadControls for Silverlight 3 are a perfect additionfor existing ASP.NET AJAX applications and worknicely with Telerik RadControls for ASP.NET AJAX.This enables you to add islands of rich functionalityto standards-based websites when needed, withoutrewriting your working applications for scratch.

WCF RIA Services support: All data-bound TelerikSilverlight 3 controls support binding to WCF RIAServices. This enables all data operations toexecute on the server, which results in speediersorting, filtering and paging for RadGridView. Withcompletely codeless binding, it takes almost noextra effort to bind RadControls for Silverlight 3 toWCF RIA Services.

Ready-to-Use Themes: Styling is made easythanks to the integrated theme support. TelerikSilverlight controls ship with 5 major themes: Vista,Summer, Office Blue, Black and Silver. Thesethemes help you deliver a consistent look-and-feelthroughout your application.

Validation support: All Telerik Silverlight 3 inputcontrols support metadata-driven validation via dataannotations.

3D Charts for Silverlight: Pushing the envelope ofrich data presentation, Telerik offers the firstcommercial 3D chart control for Silverlight.

Integration with Leading-Edge Technologies:RadControls for Silverlight 3 are designed to workeffortlessly with cutting-edge Silverlight technologieslike MVVM and Microsoft Composite ApplicationGuidance (Prism).

Support for Expression Blend: RadControls forSilverlight are styleable through MicrosoftExpression Blend. As a result, you can unleashyour imagination and redefine how elements lookand behave.

Code Re-Use with RadControls for WPF: RadControls for Silverlight 3 and RadControls forWPF suites are derived from the same codebaseand share the same API. They represent two almostmirror toolsets for building rich line-of-business weband desktop applications, allowing for substantialcode and skills reuse between Silverlight and WPFdevelopment.

Enhanced Routed Events Framework: To helpyour code become even more elegant and concise,we implemented an Enhanced Routed EventsFramework for RadControls for Silverlight 3. Thisallows you to handle "bubbling" and "tunneling"events from other elements in the visual tree.


2011 Telerik Inc.

Free Testing Framework for RadControls: Thefree WebAii Testing Framework helps developersbuild automated functional tests and endto-endscenario tests for both Silverlight- and AJAX-powered applications. The framework ships withspecial wrappers for Telerik RadControls forSilverlight and ASP.NET AJAX, making it easierthan ever before to create and maintain tests.

Part

IISilverlight Introduction


2011 Telerik Inc.

2 Silverlight Introduction

2.1 Objectives

This chapter will give you a feel for how Silverlight fits relative to other web technologies. You will get arundown on the parts that make up a Silverlight application and how those parts fits in a Visual Studioproject. You will get an overview of the Silverlight Life Cycle. Finally, you will learn about the developmenttools available for Silverlight development and where each tool is used.

Find the projects for this chapter at...

\Courseware\Projects\\SilverlightIntroduction\SilverlightIntroduction.sln.

Silverlight Introduction 21

2011 Telerik Inc.

2.2 Overview

Silverlight is a web application framework that runs on the client and delivers Rich Internet Applications(RIA) capability. Here's a blurb from the MSDN Silverlight Architecture page that summarizes:

"Silverlight is not only an appealing canvas for displaying rich and interactive Web and mediacontent to end users. It is also a powerful yet lightweight platform for developing portable, cross-platform, networked applications that integrate data and services from many sources.Furthermore, Silverlight enables you to build user interfaces that will significantly enhance thetypical end user experience compared with traditional Web applications."

Silverlight started out life as a video streaming plug-in. As the platform has matured, capabilities haveexpanded to more closely rival those of Adobe Flash: interactive graphics, multi-media and animations in asingle runtime environment.

Silverlight is routinely compared to Flash or AJAX and there is frequent speculation on what technologymight prevail. Silverlight actually fits within a spectrum of existing technologies with "simple" HTML andASP.NET web pages on one end and desk top applications on the other. Silverlight uses a small plug-inthat can be hosted within traditional web pages either as an "island" or constituting the entire browserexperience. Even when used as an island, you can communicate between the Silverlight application and theHTML page through Javascript.

Like AJAX, the Silverlight display is updated without refreshing the entire page. But where AJAXdevelopment has a patchwork feel, Silverlight lets you write managed code using your favorite .NETlanguage. Silverlight user interfaces are defined in XAML (Extensible Application Markup Language) and canbe built using Visual Studio or Expression Blend. The isolation between UI and functionality allows webdesigners to build high-end graphic interfaces that really shine without colliding with development efforts.

Silverlight is supported by a lightweight class library. This slim subset of the .NET framework Base ClassLibrary handles collections, reflection, regular expressions, threading, web services, rich media, vectorgraphics and user interface tasks. Parts of the framework that are not compatible with security or that wouldmake the plugin too heavy have been omitted, e.g. System.IO is not present in the Silverlight class library.Don't expect to find all the classes, methods or properties of the original framework, even in familiarnamespaces. For example, the Enum class exists in Silverlight and has GetName() and Parse() methods,but no GetValues() method. Likewise, WebClient running in Silverlight does not allow synchronouscommunication. Even with these changes, Silverlight has significant functionality for such a small footprint.

Silverlight runs in a "Sandbox" and can't invoke the platform API. Files are accessed through the native"Save" and "Open" file dialogs and files can also be persisted in local "Isolated Storage". To connect todatabases or access server-side classes, you need to go through an intermediary, typically a web service.Silverlight can talk with WCF, RIA, ADO.NET Data Services and REST based services. Silverlight canconverse using JSON and XML formats, including RSS and ATOM.


2011 Telerik Inc.

2.3 Silverlight Anatomy 1012.3.1 Silverlight Files

At a high level we can think of a Silverlight application as assembly that includes two sets of files:

App.xaml & App.xaml.cs: This class is the entry point for the application as a whole. The class handlesapplication startup and has several events for handling application wide events such as startup, exit andunhandled exceptions.

Public Sub New() AddHandler Me.Startup, AddressOf Application_Startup Me.Exit += Me.Application_Exit Me.UnhandledException += Me.Application_UnhandledException

InitializeComponent()End Sub

Private Sub Application_Startup(ByVal sender As Object, ByVal e As StartupEventArgs) Me.RootVisual = New MainPage()End Sub'. . .

public App(){ this.Startup += this.Application_Startup; this.Exit += this.Application_Exit; this.UnhandledException += this.Application_UnhandledException;

InitializeComponent();}

private void Application_Startup(object sender, StartupEventArgs e){ this.RootVisual = new MainPage();}. . .


2011 Telerik Inc.

MainPage.xaml & MainPage.xaml.cs: The initial main page is created automatically and contains aXAML (Extensible Application Markup Language) file to describe the user interface and managed code-behind to define the client logic. The screenshot below shows a minimal "Hello World" example. Most ofyour typical development effort will center around these files.


2011 Telerik Inc.

2.3.2 The XAP FIle

When the application is compiled, the assembly DLL is placed into a "*.xap" file along with a manifest. The"xap" file is simply a compressed file, like a "*.zip". When a browser requests a Silverlight application torun, the xap file is downloaded on demand and executed by the Silverlight plugin. To view the "xap" file,change the extension to "zip" and open it. The screenshot below shows the xap contents for a minimal"Hello World" application named "SilverlightIntroduction".

If we reference assemblies that are not part of the base Silverlight class library, these DLL's will also beincluded in the xap. Adding a RadCalendar to the "Hello World" application requires references to theTelerik.Windows.Controls and Telerik.Windows.Controls.Input assemblies. Once referenced, theseassemblies are automatically included in the xap:

2.3.3 The Application Manifest

The application manifest describes the contents of the xap file and tells Silverlight how to run a particularapplication. Looking inside the AppManifest.xaml you can see that the Deployment.Parts element listsand names each assemblies in the xap. The Deployment RuntimeVersion is the version of Silverlightrequired to run the application. The Deployment EntryPointAssembly and EntryPointType are the namesof the assembly and the class that will be instantiated to start the Silverlight application.


2011 Telerik Inc.

2.3.4 Silverlight Applications in Visual Studio

When you create a new Silverlight application in Visual Studio, two projects are created, the SilverlightApplication project and a Host Web Application project. The screenshot below shows the key elements:

1. "App" represents the application class. This class handles instantiation and other application leveltasks.

2. "MainPage" has xaml to describe the user interface for your application and code-behind to define thelogic.

3. After the Silverlight application is compiled, the "xap" is placed in the host web application \ClientBinfolder.

4. Standard ASP.NET or HTML test pages are automatically added to the host web application. Thesepages contain "" tags that reference the Silverlight plugin. The two pages are substantially thesame. Looking at the "*.html" file we can see that it contains boilerplate Javascript code for handlingSilverlight errors. In the HTML portion of the file below the Javascript, there is an "" element. Theobject element represents the Silverlight plugin. Notice that it has a series of parameter tags that tell itwhere the "xap" file can be found and what Javascript should be run if there's an error."minRuntimeVersion" and "autoUpgrade" are configured to automatically update the plugin if it is out ofdate.


2011 Telerik Inc.

2.3.5 The Silverlight Life Cycle

The sequence below is a simplified Silverlight Life Cycle.

1) The cycle begins when a user requests a web page that contains a Silverlight application. 2) The host page downloads to the client browser.3) The browser renders the HTML.4) The browser reaches the "" element and loads the Silverlight Plugin.5) The Silverlight Plugin downloads the "xap" file specified in the "source" parameter of the object

element. 6) The plugin extracts the xap and reads the manifest. 7) Using information from the manifest, the plugin creates an instance of your application. 8) The default constructor for the App class: a) Hooks up event handlers for the Startup, Exit and UnhandledException events. b) Calls InitializeComponent() that loads the application XAML.

9) The plugin fires the application Startup event. 10)The application Startup event handler creates an instance of the MainPage. 11)The constructor for the MainPage calls InitializeComponent() for the page where the XAML for the page

is loaded and creates any Silverlight elements defined there. 12)The MainPage instance is assigned to the applications RootVisual property. The RootVisual is the

page that the application is displaying at any one time.


2011 Telerik Inc.

2.4 Silverlight Development Tools

Visual Studio and Expression Blend

Both Visual Studio and Expression Blend can be used to build Silverlight applications. In fact, you can workin both environments for the same project and pass the project back in forth. Both environments sensewhen changes have been made outside their environments and update their interfaces accordingly. Bothenvironments have shortcuts to invoke each other.

Why would you use one over the other? Visual Studio can be thought of as primarily a developers tool set.Visual Studio is the appropriate tool when you need to build disparate parts of a larger solution. ExpressionBlend can be thought of as a designer's environment. While you can still code in Blend, the toolset leanstowards rich media display and animation, all accomplished with visually oriented tools and methods.

Notes

Expect the dichotomy between Visual Studio and Expression Blend to be a temporary state ofaffairs. Future versions of both environments are likely to overlap to a greater degree as thetoolset progresses.

Links to Silverlight development tools and other resources can be found at http://silverlight.net/getstarted/.

Silverlight SDK

The SDK includes the necessary Silverlight assemblies, documentation, Visual Studio templates andexamples. This download is required for developing Silverlight applications. The install currently includes thefollowing DLL's:

System.ComponentModel.DataAnnotations.dllSystem.Data.Services.Client.dllSystem.Json.dllSystem.Runtime.Serialization.Json.dllSystem.ServiceModel.PollingDuplex.dllSystem.ServiceModel.Syndication.dllSystem.Windows.Controls.Data.dllSystem.Windows.Controls.Data.Input.dllSystem.Windows.Controls.dllSystem.Windows.Controls.Input.dllSystem.Windows.Controls.Navigation.dllSystem.Windows.Data.dllSystem.Windows.VisualStudio.Design.dllSystem.Xml.Linq.dllSystem.Xml.Serialization.dllSystem.Xml.Utils.dll


2011 Telerik Inc.

WCF RIA Services

"Microsoft WCF RIA Services simplifies the traditional n-tier application pattern by bringing together theASP.NET and Silverlight platforms. RIA Services provides a pattern to write application logic that runs onthe mid-tier and controls access to data for queries, changes and custom operations."

Using WCF RIA services is demonstrated in this Courseware as part of the "Data Binding" chapter.

Silverlight Toolkit

The toolkit has a collection of useful controls and classes. While its not required to build Silverlightapplications, some of the resources in this download are used in this Courseware. The toolkit is acommunity project at located at http://silverlight.codeplex.com.

2.5 Wrap Up

In this chapter you got a feel for where Silverlight fits relative to other web technologies. You were given arundown on the elements that make up a Silverlight application and how those parts fits in a Visual Studioproject. You learned about the basic Silverlight Life Cycle. Finally, you learned about the development toolsavailable for Silverlight development and where each tool is used.

Part

IIIWorking with Silverlight


2011 Telerik Inc.

3 Working with Silverlight

3.1 Objectives

This chapter is intended to get you started working with Silverlight. This is not intended to be acomprehensive coverage of all things Silverlight, but rather a quick guide to basic "up-and-running"information. In this chapter you will build simple "Hello World" Silverlight applications using both VisualStudio and Expression Blend. You will also learn how to hand off projects back and forth between the twoenvironments and in the process learn the basic working styles of both. In this chapter you will learn thebasics about XAML, including XML namespaces, defining objects, properties and collections in XAML,attached properties, markup extensions, how to define and apply styles to Silverlight elements, how todefine and use resources and how RadControls are defined and themed in XAML.

You will learn how templates are used to create free form arrangements of Silverlight elements withoutaffecting underlying functionality. You will learn the basics on how to bind data to Silverlight elements.

You will learn about Silverlight best practices including MVVM and Prism. Finally, you will learn the settingsfor debugging a Silverlight application.

Find the projects for this chapter at...

\Courseware\Projects\\WorkingWithSilverlight\WorkingWithSilverlight.sln.

Working with Silverlight 31

2011 Telerik Inc.

3.2 Getting Started3.2.1 Starting with Visual Studio

This walk through will take you step-by-step building a classic "Hello World" Silverlight application.

Project Setup

1) From the Visual Studio menu choose File > New > Project..., select the Silverlight project type, thenselect the Silverlight Application template. Provide a unique name for the project and click the OKbutton.


2011 Telerik Inc.

2) In the "New Silverlight Application" dialog make sure that the "Host the Silverlight application in a newWeb site" option is checked, give the project a unique name and verify that the "ASP.NET WebApplication Project" New Web Project Type option is selected. Click OK to close the dialog and createthe project.


2011 Telerik Inc.

3) Review the contents of the solution in the Solution Explorer. There are two projects. The SilverlightApplication project contains "MainPage" where MainPage.xaml contains the markup for the userinterface and "MainPage.xaml.cs" is the code-behind that defines the client-side logic. The host projectcontains two test pages: an "aspx" test page and a "html" test page.

4) In the Solution Explorer, right-click the host project and select "Set as Startup Project" from thecontext menu.

5) In the Solution Explorer, right-click the host project "aspx" test page and select "Set as Start Page". 6) Build the solution. In the Solution Explorer, find the "ClientBin" folder and notice that a "xap" file has

been created


2011 Telerik Inc.

7) Navigate to the Silverlight project and open MainPage.xaml for editing. It should contain markup similarto the example shown below.

8) Drag a Button control from the "Silverlight XAML Controls" tab of the Toolbox to a point between themain Grid element tags.

9) Replace the Button tag with the XAML shown below.


2011 Telerik Inc.

10)The completed XAML should now look like the example below:

11)Press F7 to navigate to the code behind.

12)Locate the button Click event handler and insert a call to the static MessageBox.Show() method asshown in the example below.

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) MessageBox.Show("Hello World")End Sub

private void Button_Click(object sender, RoutedEventArgs e){ MessageBox.Show("Hello World"); }

Run The Application

Press F5 to run the application. The web page should look something like the screenshot below.


2011 Telerik Inc.

Modify the Application

By default, the Button stretches to take up the entire width and height of the screen. Hardly optimal buteasily fixed. Return to the MainPage.xaml file to continue editing. Replace the Button element with themarkup example below. These changes will align the button to the top left of the page and move it 20 pixelsoff all sides.

Press F5 to re-run the application which should now look like this:


2011 Telerik Inc.

3.2.2 Starting with Expression Blend

This walk through will take you step-by-step building a classic "Hello World" Silverlight application inExpression Blend. You will also get a chance to contrast the working styles of Expression Blend and VisualStudio from the previous example.

Project Setup

1) Run Expression Blend.2) From the File menu select New Project. If Expression Blend is configured to show the startup dialog,

click the New Project... option.


2011 Telerik Inc.

3) In the "New Project" dialog select the "Silverlight" project type. In the right hand list select the"Silverl

RadControls for Silverlight

Documents

Transcript of RadControls for Silverlight