| Silverlight 2.0 and ASP.NET tutorial: Getting started |
| Section: Silverlight | Rating: Not rated yet! |
 | CodeGod submitted this resource
The member's homepage is http://www.codegod.de
Visit the profile here |
Attachment
Introduction
Silverlight 2.0 Beta is available now. So what's new in this version compared to Silverlight 1.0/1.1? In easy words: It's (almost) as powerful as WPF. This article will help you getting started with Silverlight 2.0 and VS 2008. We will explain the installation of the Silverlight Tools for VS 2008 and create a little Silverlight project using new Layout-functionalities and controls.
What's new?
New controls
Silverlight 2.0 ships with many new controls like: CheckBox, Calendar, Grid, GridSplitter, MediaElement, ScrollViewer, StackPanel, TextBox, Slider, Tooltip...
When using the Designer with VS 2008 and the Toolbox, it feels like you are designing a GUI for WPF. You can add eventhandlers to the controls like a Click-Handler for a Button
<Button Content="Page 1" Margin="3" Click="Button_Click"></Button>
The code of the handler looks like this:
private void Button_Click(object sender, RoutedEventArgs e)
{
// TODO
}
Layout enhancements
The layout manager support in Silverlight 2.0 is a part Silverlight UI Framework which is a compatible subset of the WPF UI Framework. Other parts of this Framework which are available in Silverlight are Databinding support, Control templates and Skinning.
Base class library
Silverlight contains a .NET base class library with support for functionalities of the namespaces Collections, IO, Generics, Threading, Globalization, XML and many more.
Installation
For getting started with Silverlight 2.0 Beta and VS 2008 you will have to download the
Silverlight Tools Beta1 for VS 2008 from
here.
After installation the following VS project templates for Silverlight are available:
Figure 1When creating a new Silverlight Application, VS 2008 asks if you want to create an ASP.NET Website for integrating the Silverlight content:
Figure 2After clicking the OK-Button, an Assembly containing the Silverlight-Page is created for you and an ASP.NET-Website with a Silverlight-control that is used to embed the Slverlight-content:
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/SilverlightTutorial1.xap" Version="2.0"
Width="100%" Height="100%" />
</div>
</form>
</body>
As you can see in the Source-property of the Silverlight-ASP.NET-control, the Silverlight-Assembly is compiled to an XAP-file. This file contains the Silverlight-UserControl that is displayed in the Website.
A sample project
Let's illustrate this by implementing a simple project: We create a Silverlight-Page using "layout manager support". The page looks like this:
Figure 3It is designed by using the layout-components Grid and StackPanel. Here is the XAML:
<UserControl xmlns:my="clr-
namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
x:Class="SilverlightTutorial1.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="500" >
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="5">
<TextBlock Margin="15" FontSize="25" FontWeight="300"
Foreground="White"
Text="My Silverlight Page!"></TextBlock>
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.40,3" StartPoint="0.9,3">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FF449999" Offset="1.5"/>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
<Grid x:Name="colColumns" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Background="Azure" Grid.Column="0" Margin="5">
<Button Content="Page 1" Margin="3" Click="Button_Click"></Button>
<Button Content="Page 2" Margin="3" Click="Button_Click"></Button>
<Button Content="Page 3" Margin="3" Click="Button_Click"></Button>
<Button Content="Page 4" Margin="3" Click="Button_Click"></Button>
</StackPanel>
<StackPanel x:Name="myContent" Background="LightGray"
Grid.Column="1" Margin="5">
</StackPanel>
</Grid>
</Grid>
</UserControl>
In the Click-Handler of the buttons we assign a random color to he StackPanel named myContent:
private void Button_Click(object sender, RoutedEventArgs e)
{
Random r = new Random();
byte d = (byte)(r.NextDouble() * 255);
myContent.Background = new SolidColorBrush(Color.FromArgb(d, d, d, 100));
}
After pressing F5 the page is displayed in the browser. The VS 2008-project is attached, stay tuned for more Silverlight articles.