Apress Introducing dot NET 4 0 with Visual Studio 2010_7 ppt

Silverlight offers the following: • Ability to use the .NET development tools you know and love • Utilize many of the .NET framework libraries in your applications for security reasons,

Trang 1

Silverlight Introduction

Availability: Framework 3.5sp1 Onward

“Silverlight is a new web presentation technology that is created to run on a variety of

platforms It enables the creation of rich, visually stunning and interactive

experiences that can run everywhere: within browsers and on multiple devices and

desktop operating systems (such as the Apple Mac).”

http://silverlight.net/content/GetStarted.aspx

Some might say that Silverlight is Microsoft’s version of Adobe’s Flash and Flex products This doesn’t

really do it justice, though Silverlight has a number of compelling features that make it an ideal choice for creating web applications with the functionality traditionally only found in desktop applications

These applications are known as Rich Internet Applications (or RIA to its friends)

Silverlight offers the following:

• Ability to use the NET development tools you know and love

• Utilize many of the NET framework libraries in your applications (for security

reasons, not everything is available)

• An easy-ish path to convert web applications to desktop (WPF) applications if

required in the future (also check out Silverlight 3’s offline capabilities in Chapter 15)

• Great media-streaming capabilities

• Support for designers (more prevalent in Blend)

Although Silverlight was available for earlier versions of NET and Visual Studio, I decided to include

a brief introduction because Silverlight was released between VS2008 and VS2010, and I suspect that

many developers are not aware of how easy it is to use I believe Silverlight will grow in importance and

is something that all NET developers should at least be aware of

Silverlight versus Flash

When Silverlight was first released, it was inevitable that it would be compared to Adobe Flash (and Flex)

Trang 2

Silverlight’s development was the obvious offshoot of WPF, and there was no satisfactory

technology for the Microsoft developer to create RIAs prior to its release Options such as ActiveX controls or embedded Windows forms suffered from being difficult to develop and debug, were not cross-platform, and had security and deployment issues

For a taste of just what is possible using Silverlight, take a look at the upcoming Microsoft Office Online application (http://channel9.msdn.com/posts/PDCNews/First-Look-Office-14-for-Web/) Office Online utilizes Silverlight to provide online versions of Word, Excel, and PowerPoint

Perhaps the biggest advantage offered by Silverlight is that applications can be written using the NET framework and existing Microsoft tools such as Visual Studio This immediately lowers the entry barrier to new developers and gives them access to much more functionality

Although Flash is almost certainly installed on more browsers than Silverlight, at the time of writing, Microsoft is in a strong position to encourage uptake of Silverlight (subject to future possible antitrust legislation!)

It is hard to get accurate statistics about Silverlight uptake, but the sites http://www.riastats.com/ and http://www.statowl.com/silverlight.php are well worth a look At the time of writing, they indicate that roughly 25 percent of browsers have some version of Silverlight installed Adobe indicates that it has

a much higher uptake, which is to be expected with a more mature product:

http://www.adobe.com/products/player_census/flashplayer/

Silverlight in the Real World

An impressive example of a Silverlight application is “Descry: A Website Named Desire” that was created for the Mix conference This web site illustrates the web site development process (see Figure 14-1) and

is available online at http://www.visitmix.com/labs/descry/awebsitenameddesire/

Trang 3

One of the earliest but still very impressive uses of Silverlight is on the Hard Rock Café’s

memorabilia page If you haven’t seen it, go to it now at (http://memorabilia.hardrock.com/) The page shows rock memorabilia items owned by the Hard Rock café (see Figure 14-2) The user can fluidly zoom

in and out to display more detail of any individual item This site was created with Silverlight and a

technology called Deep Zoom

NOTE Deep Zoom is freely available for your use if you want to create a similar application: http://msdn

Interested? You should be Take a look at the technology stack Silverlight is built on

Figure 14-2 Hard Rock Café memorabilia page (http://memorabilia.hardrock.com/)

Trang 4

WPF

As part of.NET framework version 3.0, Microsoft released Windows Presentation Foundation (WPF): a new way of creating UIs for applications Silverlight uses a subset of the full WPF and NET framework You will find some classes and methods unavailable, and anything with the SecurityCritical attribute cannot be used

Why not use the full WPF and NET framework?

• Silverlight is a browser plug-in, so it needs to be small

• Some WPF functionality might present a security risk when run in the browser

• Not all WPF functions are cross-platform

XAML

Silverlight applications are developed using eXtensible Application Markup Language (XAML) XAML is

an XML-based language that is used to describe objects XAML is used in other areas of NET such as WPF and WCF You can expect to see Microsoft making increasing use of XAML for many different purposes in the future

Silverlight Requirements and Installation

To develop Silverlight applications, you will require one of the following:

• Visual Studio 2008 and Silverlight Tools for Visual Studio and NET 3.5sp1

• Visual Studio 2010

Expression Blend

The design time support for WPF and Silverlight applications is greatly improved in Visual Studio 2010 (see Chapter 17), but for serious Silverlight development a separate product called Expression Blend is almost essential

Expression Blend (written using WPF) is very much aimed at designers and eases tasks such as layout, animation, and customization of controls You will still need to edit code in Visual Studio, but Visual Studio and Blend play well together so you can have both open at the same time and skip between them

When a designer and a developer work at the same time on an application, there can be issues as one developer’s changes overwrite the others Microsoft has tried to address this with a declarative data binding syntax and design of Blend I am not sure they have fully achieved this lofty aim, but it is a step

in the right direction If you want to see whether Blend is worth using for you, download the free trial version of Blend from the main Silverlight.net site at http://silverlight.net/GetStarted/

Trang 5

Figure 14-3 Expression Blend Designer

Creating a New Silverlight Project

Get started creating a new Silverlight project

1 Open Visual Studio

2 Select File➤New Project

3 Select the C# node and then the Silverlight node

4 Select Silverlight Application

5 Call your project Chapter14.HelloSilverlight

6 Make sure the “Host the Silverlight application in a new Web site” option is selected (this will be essential later on)

7 Click OK

Visual Studio will now create a Silverlight solution for you to use

Trang 6

Project Structure

Visual Studio has created two projects (see Figure 14-4):

• Chapter14.HelloSilverlight

• Chapter14.HelloSilverlight.Web

Why two projects?

• Chapter14.HelloSilverlight.Web acts as a host or test harness for the application

• Chapter14.HelloSilverlight contains the Silverlight code

In the future, you might not want to create a separate hosting project If so, don’t check the add a new ASP.NET web project option If you do this then Visual Studio will dynamically generate a page to display your Silverlight application when run (see Figure 14-4)

Figure 14-4 Silverlight default project setup

Trang 7

Hi Yo, Silver!

Let’s create a Hello World (or Hi yo Silver) application:

1 Open the file ~\MainPage.xaml

2 By default, MainPage.xaml will contain a Grid tag like the following:

Silverlight and WPF allow you to nest tags inside one another Enter the following between the Grid tags:

3 Press F5 to run your application You should see the text Hi yo Silver displayed on a page

Understanding the Basics

Let’s run through the lines of code to understand what they do The following line tells the compiler

which class to inherit from (It is similar to ASP.NET’s inherits property in an aspx or ascx file.)

x:Class="Chapter14.HelloSilverlight.MainPage"

The lines beginning with xmlns import a number of WPF- and Silverlight-related namespaces (such

as a using or imports statement)

The following line creates a TextBlock on the page and sets the text to Hi yo Silver:

<TextBlock>Hi yo Silver</TextBlock>

NOTE Hi yo, Silver was a line said by the Lone Ranger as he rode away on his horse It was on a TV/radio series that I am too young to remember, but it was the only Silver-related reference I could think of

Trang 8

Adding Content

Content can be added either declaratively or programmatically If you wanted to create the previous example programmatically, you could do so in MainPage.xaml.cs in the constructor as follows:

TextBlock TextBlock = new TextBlock();

TextBlock.Text = "Hi yo Silver";

LayoutRoot.Children.Add(TextBlock);

Note that the TextBlock control is added as a child element to the LayoutRoot control Elements in a XAML page are maintained in a hierarchy like HTML’s document object model (DOM) The Children property is similar to ASP.NET’s Controls property

This hierarchy allows you to do some strange things such as nesting text boxes inside buttons that wouldn’t be possible with Windows forms I can’t wait to see some of the appalling uses this feature will

no doubt be used for Let’s create an example to demonstrate this now:

</Button>

Figure 14-5 Text box inside a button

Adding Silverlight to your Application

So back to the Hi yo Silver application How did this end up being rendered in the browser? In Silverlight 3.0, applications are displayed using the object tag Previous versions of Silverlight utilized an ASP.NET Silverlight tag that has since been depreciated (although still available on Codeplex)

Object Tag

Select the Chapter14.HelloSilverlight.Web project and open the file ~/Chapter14

HelloSilverlightTestPage.html The page will contain an object tag similar to the following:

Trang 9

Note the following from the preceding code:

• An object tag is used to embed the Silverlight plug-in in the web page

• The object tag has a param value that references the JavaScript function

onSilverlightError() to return any errors from Silverlight to the user via JavaScript

When you compile your Silverlight application, all the XAML, resources, references, and so forth get compressed into an XAML Application Package (XAP) file The object tag has a property called Source

that contains the location of the XAP file

Also note that the test page contains the following line:

Silverlight.js contains lots of functionality such as error handling, loading, and displaying the

plug-in; routing messages to JavaScript; and upgrading the plug-in If you want to customize how the

Silverlight application is displayed, you can modify the parameters passed into Silverlight.js (or even Silverlight.js itself)

Pages in Silverlight

Silverlight allows you to divide your application up into a number of XAML pages However, you cannot just move between pages as you do in ASP.NET with functions such as Response.Redirect or

Server.Transfer

A popular way of implementing navigation between pages is to create one page with a container

control that you then load other XAML files into

TIP Silverlight 3.0 introduced an easier way (NavigationApplication) that you will examine in Chapter 15

You will create this paging functionality now because it will make it easy to navigate through the

examples:

1 Right-click Chapter14.HelloSilverlight solution

2 Select Add Class

3 Call the class PageNavigator

4 Enter the following code:

using System;

using System.Net;

Trang 10

//Get reference to old control

var OldUserControl = RootLayoutElement.Children[0] as UserControl;

//Add new control

Creating a Silverlight User Control

You will now create a menu page with a number of buttons to take you to the examples you will create:

1 Right-click the Chapter14.HelloSilverlight solution and select Add➤New Item

2 Select Silverlight User Control

3 Enter the name MainMenu

4 Note that at the top of the XAML code is a control declaration:

<UserControl x:Class="Chapter14.HelloSilverlight.MainMenu"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

Trang 11

You want the menu control to span the whole page, so remove this code:

</StackPanel>

Okay, nearly done But when the Silverlight application is first loaded, you want to load

MainMenu.xaml rather than MainPage.xaml You can do this by editing a file called App.xaml

App.xaml

App.xaml handles global events in a manner similar to Global.asax

Open ~/App.xaml.cs By default, App.xaml.cs has code such as the following:

private void Application_Startup(object sender, StartupEventArgs e)

{

this.RootVisual = new MainPage();

}

This loads the MainPage.xaml file when the application starts You want to alter this to load the

MainMenu.xaml file instead Change the Application_startup method to the following:

private void Application_Startup(object sender, StartupEventArgs e)

Silverlight allows you to define set styles for objects in a manner that is a cross between CSS and

ASP.NET themes You will create a simple style that will format the page title on the menu page

Trang 12

6 Open up ~/App.xaml

7 Inside the <Application.Resources> block, enter the following:

</Style>

8 Now go back to MainMenu.xaml and find the line where it says the following:

<TextBlock FontSize="40" Canvas.Left="200" Canvas.Top="25">Silverlight

Demo</TextBlock>

9 Add the following attribute to this tag to reference the style you created in App.xaml:

Style="{StaticResource MyStyle}"

Your tag should now look like this:

<TextBlock FontSize="40" Canvas.Left="200" Canvas.Top="25"

Style="{StaticResource MyStyle}">Silverlight Demo</TextBlock>

APPLICATION.RESOURCES

The Application.Resources section allows you to hold much more complex styles than you have just created It can be used to hold pretty much any set of properties you might want to reuse For example, you could include colors, gradients, or even control templates

Positioning Elements

One of the most confusing parts of Silverlight and WPF is element positioning When you start working with Silverlight and WPF, it is quite common to find yourself wondering why an element is not

displaying This is normally due to the following:

• You haven’t set the width or height

• Your element is obscured by another element

• You have positioned the element off the screen

• Your element is transparent

Silverlight positions elements using two axes running from the top-left corner of the screen called Left (horizontal axis) and Top (vertical axis) The top-left corner is referred to as coordinates 0, 0 (see Figure 14-6)

Trang 13

Figure 14-6 Silverlight screen coordinates system

You are probably expecting to be able to position elements in Silverlight similar to the following

code:

However, elements are positioned using the Canvas.Left and Canvas.Top properties (unless

positioned through some other means such as a Grid):

Canvas.Left and Canvas.Top are a special type of property called an attached property The Left and

Top properties are actually attached to the Canvas element This means you are positioning the TextBlock relative to the Canvas element This is an important concept to understand and brings you to the subject

of attached and dependency properties

Attached and Dependency Properties

When you set a property of an object in ASP.NET such as Width on a TextBox, you would usually write

something like this:

<asp:TextBox Width=“300" Runat="server" />

Behind the scenes, the Width value is retained in a private field If you were to retrieve the Width

property, it would be the same as when it was first set However, when working with dependency

properties, this is not necessarily true

Trang 14

Consider how a browser works out where to display an item on the screen It is not as straight forward as it first sounds There are actually a number of things that need to be taken into account when calculating where an item will be positioned on a page:

• Other elements on the page

• Runtime settings (e.g., screen and browser settings)

• Styles

• Templates

That’s quite a lot to consider You could say the positioning is dependent on lots of other factors

Dependency properties are properties that are dependent on other property values It’s as simple as that

and it saves you lots of work, and not just for tasks such as positioning elements Dependency properties are also used for tasks such as data binding where Silverlight needs to know to redraw an item if the underlying data source were to change

A predefined order exists that determines how dependency properties will be evaluated, which is intuitive for the most part For more information on how dependency properties are evaluated, please refer to http://msdn.microsoft.com/en-us/library/ms743230.aspx

Attached properties are a type of dependency property, but attached properties do not necessarily

exist in the object they are set on They are easy to spot because are written in this format:

Trang 15

Figure 14-7 Diagram of a stack panel set to vertical and horizontal alignment

Let’s create an example stack panel now:

1 Right-click the project and add a new folder called Layout

2 Right-click and select Add➤New Item

3 Select Silverlight User Control

4 Name the control StackPanelTest

5 Add the following XAML inside the LayoutRoot Grid tag (make sure to alter the width and

height, or you will not see the whole column):

</StackPanel>

You now need to modify the MainMenu control to enable it to take you to the stack panel page you

have just created

Wiring up a button in Silverlight is similar to performing the same task in ASP.NET or Windows

forms You need to wire up an event in the page loaded event because the button won’t be created until this point

Trang 16

3 In MainMenu_Loaded() add the following code:

void MainMenu_Loaded(object sender, RoutedEventArgs e)

{

this.cmdStackPanel.Click += new RoutedEventHandler(cmdStackPanel_Click); }

4 Now create a method to be called when cmdStackPanel is clicked:

void cmdStackPanel_Click(object sender, RoutedEventArgs e)

{

PageNavigator.LoadPage(new Layout.StackPanelTest());

}

Your code should now look similar to the following:

public partial class MainMenu : UserControl

Trang 17

Figure 14-8 Laying out items with the StackPanel

Try changing the Orientation of the StackPanel to Horizontal to see how it affects the positioning of the squares StackPanel is a very useful control and is very flexible It is used extensively to perform tasks such as laying out lists of elements and creating menus

Grid

The Grid layout control allows you to define a grid strucure to place individual elements within and is in some ways similar to an HTML table You will create a 2 x 2 grid and some colored rectangles and then position them within the grid:

1 Right-click the Layout folder and select Add➤New Item➤Silverlight User Control

Trang 18

<Rectangle Fill="blue" Grid.Row="0" Grid.Column="0" Width="100"

4 Let’s add the ability to navigate to this page on the main menu Open ~/MainMenu.xaml.cs

5 Add the following code to the MainMenu_Loaded() method:

this.cmdGrid.Click += new RoutedEventHandler(cmdGrid_Click);

6 Add the following event handler:

void cmdGrid_Click(object sender, RoutedEventArgs e)

Trang 19

Simple Animation

Silverlight allows you to animate objects both declaratively and programmatically Animation is perhaps easier to understand programmatically, so you will create a very simple animation to move a rectangle across a screen and at the same time change its transparency by modifying its opacity

You will use a Storyboard class to create an animation The Storyboard defines what will happen

within the animation (the story) and contains features to start, stop, and repeat the animation

The storyboard has a property called Interval that is a timer that allows you to perform the

animation In the example when the storyboard interval occurs, you will increment the x and y position

of the rectangle and increase the opacity

Creating Animation Programmatically

Let's start the example:

1 Create a new folder called Animation within your project

2 Right-click this folder➤Add➤New Item➤Silverlight User Control

3 Call it Animation

4 Remove the d:DesignHeight="300" d:DesignWidth="400" properties from the user control tag

5 Replace the Grid tags with the following XAML:

<Rectangle Width="52" Height="52" Stroke="#FF000000" Opacity="0" Fill="Red"

x:Name="rectAnimation" RadiusX="10" RadiusY="10" />

</Canvas>

6 Open ~/Animation/Animation.xaml.cs and enter the following code:

public partial class Animation : UserControl

this.Loaded += new RoutedEventHandler(Animation_Loaded);

StoryBoard.Completed += new EventHandler(StoryBoard_Completed);

Trang 20

7 Now edit MainMenu so you can navigate to this page Open ~/MainMenu.xaml.cs

8 In the MainMenu_Loaded() method add a handler for the animation button:

this.cmdAnimation.Click += new RoutedEventHandler(cmdAnimation_Click);

9 Add the code to load Animation.xaml when the animation button is clicked:

void cmdAnimation_Click(object sender, RoutedEventArgs e)

{

PageNavigator.LoadPage(new Animation.Animation());

}

10 Press F5 to run the application

When the page is loaded you should see a rectangle move diagonally across the screen Note that you incremented the Opacity value using the following code:

This is because Opacity is not an attached property, but Top and Left are

Responding to User Events

You will now detect the user clicking the rectangle and then perform a different animation:

1 In Animation_Loaded(), add the following code:

rectAnimation.MouseLeftButtonDown +=

new MouseButtonEventHandler(rectAnimation_MouseLeftButtonDown);

2 Let’s add another storyboard for an animation that will start when the rectangle is clicked You will change the rectangle's color to yellow to indicate that it has been clicked and then move it horizontally instead of diagonally acrosss the screenPixar has nothing to fear Add a new Storyboard object within the Animation class:

Trang 21

3 Create the methods rectAnimation_MouseLeftButtonDown() and StoryBoard2_Completed():

void rectAnimation_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

4 Press F5 to run your application and then click the rectangle The rectangle should change to

yellow and then move across the screen

Declarative Animation

Animation can also be declared declaratively Following is an example produced by Blend 3 for moving a

rectangle horizontally across the screen in two seconds (not the sort of thing you will be writing yourself):

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</UserControl.Resources>

<Rectangle Height="80" HorizontalAlignment="Left" Margin="34,123,0,0"

VerticalAlignment="Top" Width="91" Fill="#FFE24646" Stroke="#FF000000"

Trang 22

Although the preceding XAML is not as readable as animating the item programmatically, it is arguably easier to produce Blend allows you to define key frames for your object and will then animate between them For more information about Blend, check out the great tutorial videos available at http://silverlight.net/learn/videocat.aspx?cat=2#HDI2Basics

Figure 14-10 Blend showing timeline on right and the path the square will move to

HTML Integration

Silverlight has some great functionality that allows you to interact with the web page through something

called the HTML bridge The HTML bridge allows you to modify DOM elements and call JavaScript

functions from within your Silverlight application The reverse is also possible, allowing you to call Silverlight functions from within JavaScript Note that Silverlight utilizes parts of the DLR (refer to Chapter 3) to perform some of this functionality (Silverlight was one of the first applications to benefit from the DLR)

Tiêu đề	Silverlight Introduction
Trường học	Not specified
Chuyên ngành	Computer Science
Thể loại	Lecture

Định dạng
Số trang	45
Dung lượng	2,5 MB